https://github.com/moelsayed089/task-front-end
A frontend project built with React + TypeScript + Vite, using Redux Toolkit for state management, React Hook Form + Zod for form validation, and Shadcn UI for UI components.
https://github.com/moelsayed089/task-front-end
api react-router reactjs redux tailwindcss typescript vite zod
Last synced: 3 months ago
JSON representation
A frontend project built with React + TypeScript + Vite, using Redux Toolkit for state management, React Hook Form + Zod for form validation, and Shadcn UI for UI components.
- Host: GitHub
- URL: https://github.com/moelsayed089/task-front-end
- Owner: moelsayed089
- Created: 2025-09-09T08:13:53.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-09-09T08:39:02.000Z (10 months ago)
- Last Synced: 2025-09-09T10:19:55.911Z (10 months ago)
- Topics: api, react-router, reactjs, redux, tailwindcss, typescript, vite, zod
- Language: TypeScript
- Homepage: https://task-front-end-oos.vercel.app/
- Size: 71.3 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 📝 Task Frontend
A frontend project built with **React + TypeScript + Vite**, using **Redux Toolkit** for state management, **React Hook Form + Zod** for form validation, and **Shadcn UI** for UI components.
---
## 🚀 Tech Stack
- **React 18 + TypeScript**
- **Vite** (bundler)
- **Redux Toolkit** (state management)
- **React Hook Form + Zod** (form handling & validation)
- **TanStack Query** (data fetching)
- **Axios** (API requests)
- **Shadcn UI + TailwindCSS** (UI & styling)
## 📂 Project Structure
```bash
src/
│── app/ # Global app setup
│ ├── api/ # Axios & Query client configs
│ │ ├── axiosConfig.ts
│ │ ├── queryClient.ts
│ │
│ ├── hooks/ # Custom reusable hooks
│ │ ├── useGetQuery.ts
│ │ ├── usePostMutation.ts
│ │
│ ├── providers/ # Context/Providers
│ │ ├── theme-provider.tsx
│ │
│ ├── routes/ # Routing setup
│ │ ├── routes.tsx
│ │
│ ├── store/ # Redux store (root store)
│ │ ├── index.ts
│ │
│ └── index.ts # App-level exports (optional barrel file)
│
│── components/ # Shared/global UI components
│ ├── mode-toggle.tsx
│
│── features/ # Feature-based modules
│ ├── dashboard/ # Dashboard feature
│ │ ├── components/
│ │ │ ├── ErrorElement.tsx
│ │ │ ├── MainSection.tsx
│ │ │ ├── NotFound.tsx
│ │ │ ├── Sidebar.tsx
│ │ │ ├── WorkSummary.tsx
│ │ ├── pages/
│ │ │ ├── LayoutDashboardPage.tsx
│ │ │ ├── MainPage.tsx
│ │ └── index.ts # Barrel exports for dashboard
│ │
│ ├── entriesdashboards/ # Posts/Entries feature
│ │ ├── components/
│ │ │ ├── loadingSkeleton.tsx
│ │ │ ├── AddPostDialog.tsx
│ │ │ ├── DisplayPostsForm.tsx
│ │ │ ├── DisplayPostsTable.tsx
│ │ │ ├── EditPostDialog.tsx
│ │ │ ├── PostsPagination.tsx
│ │ │ ├── SearchBar.tsx
│ │ ├── pages/
│ │ │ ├── DisplayPostsPage.tsx
│ │ ├── services/
│ │ │ ├── GetAllPosts.ts
│ │ │ ├── PostNewPost.ts
│ │ ├── store/
│ │ │ ├── postsSlice.ts
│ │ ├── types/
│ │ │ ├── posts.type.ts
│ │ ├── validation/
│ │ │ ├── addPosts.ts
│ │ └── index.ts # Barrel exports for entriesdashboards
│
│── lib/ # Global styles & utilities
│ ├── utils/ # Helper functions
│ ├── App.css
│ ├── App.tsx
│ ├── index.css
│ ├── main.tsx
│ └── vite-env.d.ts
```
---
## ⚡ Features
- 📊 **Dashboard layout** with sidebar & summary
- 📝 **Posts management**:
- Add new posts
- Edit existing posts
- Paginated & searchable posts table
- 🎨 **Dark/Light mode** toggle
- 🧩 **Reusable UI components** (Dialog, Pagination, Search, etc.)
- ⚡ **Error boundaries** & `NotFound` page
---
## 🛠️ Installation & Setup
1. Clone the repo:
```bash
git clone https://github.com/moelsayed089/Task-Front-end.git
cd task-frontend
```
2. Install dependencies:
```bash
npm install
```
3. Run the development server:
```bash
npm run dev
```
---
## 👨💻 Author
Mohamed Elsayed – Frontend Developer