A Product Manager application built with React, Redux Toolkit, TypeScript, and Chakra UI. This application provides a streamlined interface for managing products, user authentication, and cart functionality.
- Authentication: User login and signup with form validation using
yup. - Product Management: Add, edit, delete, and view products.
- Dashboard: Paginated product management with sorting and filtering.
- Cart Management: Add, update, and remove items from the cart.
- Responsive Design: Fully responsive UI using Chakra UI.
- Dark Mode: Toggle between light and dark themes.
- File Upload: Upload product thumbnails to the backend.
- Persisted State: Cart state is persisted using
redux-persist.
- Frontend: React, TypeScript, Chakra UI
- State Management: Redux Toolkit
- Routing: React Router
- Form Validation: React Hook Form, Yup
- API Integration: Axios
- Backend: Strapi (for API and file uploads)
- Clone the repository:
git clone https://github.com/your-username/product-manager.git
cd product-manager- Install dependencies:
npm install- Start the development server:
npm run dev- Open the app in your browser at
http://localhost:5173.
src/
├── app/ # Redux slices and store
├── components/ # Reusable UI components
├── pages/ # Application pages
├── interfaces/ # TypeScript interfaces
├── validation/ # Form validation schemas
├── config/ # Axios configuration
├── data/ # Static data or helpers
├── main.tsx # Application entry point
├── App.tsx # Main application component
npm run dev: Start the development server.npm run build: Build the application for production.npm run preview: Preview the production build.npm run lint: Run ESLint to check for code issues.
The application interacts with a Strapi backend. Below are the key endpoints:
- Authentication:
POST /api/auth/local: LoginPOST /api/auth/local/register: Signup
- Products:
GET /api/products: Fetch all productsPOST /api/products: Add a new productPUT /api/products/:id: Edit a productDELETE /api/products/:id: Delete a product
- File Upload:
POST /api/upload: Upload product thumbnails
- File:
src/pages/Auth.tsx - Handles user login and signup with form validation.
- File:
src/pages/dashboard/DashBoard.tsx - Add, edit, delete, and view products with pagination.
- File:
src/pages/Cart.tsx - Add, update, and remove items from the cart.
- File:
src/pages/Profile.tsx - Displays user information and logout functionality.
Contributions are welcome! Please follow these steps:
- Fork the repository.
- Create a new branch:
git checkout -b feature-name. - Commit your changes:
git commit -m "Add feature". - Push to the branch:
git push origin feature-name. - Open a pull request.
This project is licensed under the MIT License. See the LICENSE file for details.
