A modern, responsive web application that enables users to exchange unused clothing through direct swaps or a point-based redemption system. The goal is to promote sustainable fashion and reduce textile waste by encouraging users to reuse wearable garments instead of discarding them.
- Item Discovery: Browse clothing items by categories, sizes, and styles
- Advanced Filtering: Sort items by size, brand, condition, style, and more
- Item Ratings & Reviews: Rate and review clothing items with detailed feedback
- Responsive Design: Fully responsive design that works on all devices
- Admin Panel: Comprehensive admin interface for managing content
- User Authentication: Secure login/register system with JWT
- Direct Swaps: Exchange clothing items directly with other users
- Point System: Earn and redeem points for clothing exchanges
- Search Functionality: Advanced search with filters
- Mobile-First Design: Optimized for mobile and tablet devices
- User Dashboard: Manage profile, items, and swap history
- Image Upload: Upload item images with Cloudinary integration
- User Management: Manage user accounts and permissions
- Item Moderation: Approve, reject, or remove inappropriate items
- Analytics Dashboard: View platform statistics and user activity
- Content Moderation: Moderate items and user content
- React 18 - Modern React with latest features
- Vite - Fast build tool and development server
- Tailwind CSS - Utility-first CSS framework
- Redux Toolkit - State management
- React Router - Client-side routing
- React Icons - Icon library
- Axios - HTTP client
- Swiper - Touch slider component
- Node.js - JavaScript runtime
- Express.js - Web framework
- MongoDB - NoSQL database
- Mongoose - MongoDB object modeling
- JWT - Authentication
- Cloudinary - Image upload and management
- Multer - File upload handling
- bcryptjs - Password hashing
- Helmet - Security middleware
- CORS - Cross-origin resource sharing
- Node.js (v18 or higher)
- npm (v9 or higher)
- MongoDB (local or cloud instance)
-
Clone the repository
git clone <repository-url> cd Course-Comparator
-
Install backend dependencies
cd backend npm install -
Environment Configuration Create a
.envfile in the backend directory:PORT=9000 MONGO_URI=your_mongodb_connection_string JWT_SECRET=your_jwt_secret_key CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name CLOUDINARY_API_KEY=your_cloudinary_api_key CLOUDINARY_API_SECRET=your_cloudinary_api_secret NODE_ENV=development
-
Start the backend server
npm run dev
-
Install frontend dependencies
cd frontend npm install -
Environment Configuration Create a
.envfile in the frontend directory:VITE_BACKEND_URL=http://localhost:9000
-
Start the frontend development server
npm run dev
cd backend
npm run seedThis will create:
- Sample users (including admin user)
- Sample clothing items
- Initial database structure
npm run dev- Start development server with nodemonnpm start- Start production servernpm run seed- Seed database with initial datanpm test- Run testsnpm run lint- Lint codenpm run format- Format code
npm run dev- Start development servernpm run build- Build for productionnpm run preview- Preview production buildnpm test- Run testsnpm run lint- Lint codenpm run format- Format code
Course-Comparator/
├── backend/
│ ├── data/
│ │ └── items.js
│ ├── middleware/
│ │ └── authMiddleware.js
│ ├── models/
│ │ ├── Item.js
│ │ ├── Swap.js
│ │ ├── Subscriber.js
│ │ └── Users.js
│ ├── routes/
│ │ ├── adminRoutes.js
│ │ ├── itemRoutes.js
│ │ ├── swapRoutes.js
│ │ ├── subscriberRoutes.js
│ │ ├── uploadRoutes.js
│ │ └── userRoutes.js
│ ├── server.js
│ ├── seeder.js
│ └── package.json
├── frontend/
│ ├── src/
│ │ ├── components/
│ │ │ ├── Admin/
│ │ │ ├── Common/
│ │ │ ├── Items/
│ │ │ ├── Layout/
│ │ │ └── User/
│ │ ├── pages/
│ │ ├── redux/
│ │ │ └── slices/
│ │ ├── assets/
│ │ ├── App.jsx
│ │ └── main.jsx
│ ├── package.json
│ └── vite.config.js
└── README.md
- Browse Items: View all available clothing items with filtering and sorting
- Item Details: Detailed view with image gallery, description, and uploader info
- List Items: Upload new items with images and descriptions
- Item Status: Track item availability and swap status
- Request Swaps: Send swap requests to item owners
- Manage Swaps: View ongoing and completed swaps
- Swap History: Track all swap activities
- Points System: Earn points for successful swaps
- Authentication: Secure login/register with JWT
- User Profiles: Manage personal information and preferences
- Dashboard: Overview of items, swaps, and points
- Role-based Access: Different permissions for users and admins
- Item Moderation: Approve/reject new item listings
- User Management: Manage user accounts and permissions
- Analytics: View platform statistics and user activity
- Content Management: Remove inappropriate content
- Clone and setup the project (see Installation section)
- Configure environment variables for both frontend and backend
- Start the backend server (
npm run devin backend directory) - Start the frontend server (
npm run devin frontend directory) - Seed the database (
npm run seedin backend directory) - Access the application at
http://localhost:5173
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Built with modern web technologies
- Designed for sustainability and community building
- Promotes circular fashion economy