Clothify is a fully-functional, responsive e-commerce platform built with the MERN stack (MongoDB, Express.js, React.js, Node.js). This project showcases the implementation of modern web development practices, providing users with a seamless shopping experience while empowering admins with a robust product and order management system.
- User Authentication & Authorization: Secure registration, login, and role-based access using JWT.
- Product Browsing: Explore products with categories, brands, and filters.
- Search Functionality: Fast and intuitive product search.
- Dynamic Cart Management: Add, update, and remove products from the shopping cart.
- Order Placement: Streamlined checkout process with integrated payment options.
- Order Tracking: View order details, status, and history from the user dashboard.
- Admin Dashboard: Centralized platform to manage orders, products, and users.
- Product Management: Add, update, delete, and categorize products.
- Order Management: View, process, and update order statuses.
- User Management: Manage user accounts and roles.
- Responsive Design: Fully optimized for mobile, tablet, and desktop devices.
- Scalable Backend: Efficient database queries and optimized server-side performance.
- Pagination: Smooth and efficient data loading for large product catalogs.
- React.js: Component-based architecture for reusable and dynamic UI.
- React Router: Client-side routing for seamless navigation.
- Redux Toolkit: Efficient global state management.
- Bootstrap: Responsive, mobile-first design framework.
- Node.js: Server-side runtime for building scalable APIs.
- Express.js: Lightweight and flexible backend framework.
- JWT: Secure user authentication.
- Bcrypt.js: Password hashing for secure credential storage.
- MongoDB: NoSQL database for scalable and flexible data management.
- Mongoose: Elegant ODM for MongoDB with schema-based data modeling.
- Users Collection: Stores user details, roles, and authentication tokens.
- Products Collection: Detailed product information with categories and brands.
- Orders Collection: Tracks user orders and statuses.
- Payment Gateway: Integrated with Stripe for secure online payments.
- Cloudinary: For efficient image storage and management.
-
Clone the repository:
git clone https://github.com/your-username/clothify-ecommerce.git
-
Navigate to the project directory:
cd clothify-ecommerce -
Install dependencies for both frontend and backend:
cd frontend && npm install cd ../backend && npm install
-
Set up environment variables:
- Check
example.envfile in the backend and frontend directory. - Create a
.envfile in the backend and frontend directory accordingly.
- Check
-
Start the development server:
npm run dev
-
Access the application:
- Frontend: http://localhost:3000
- Backend API: http://localhost:5000
- Testing: Covers backend APIs using Jest.
clothify-ecommerce/
├── frontend/ # React application
│ ├── src/ # Source files
│ ├── public/ # Public assets
│ └── package.json # Frontend dependencies
├── backend/ # Node.js API
│ ├── models/ # Database schemas
│ ├── routes/ # API routes
│ ├── controllers/ # Business logic
│ ├── middlewares/ # Custom middleware
│ └── package.json # Backend dependencies
└── README.md # Project description
Contributions are always welcome! Follow these steps to contribute:
- Fork the repository.
- Create a new branch:
git checkout -b feature-name
- Commit your changes:
git commit -m "Add feature" - Push the branch:
git push origin feature-name
- Open a Pull Request.
This project is licensed under the MIT License.
For questions or suggestions, reach out to sohaibrashed@gmail.com or create an issue in the repository.
Happy Coding! 💻✨