Welcome to ProductStore, a full-stack MERN application designed to help you save, organize, and manage your favorite products. Whether you're planning to buy later or just want to keep track of items, ProductStore has you covered!
- Save Products: Add product details like name, description, price, and purchase links.
- Organized Layout: View your saved products in a clean, responsive masonry grid.
- Edit & Delete: Update or remove products with ease.
- Authentication: Secure signup, login, and email verification.
- Responsive Design: Fully optimized for desktop and mobile devices.
- JWT Authentication: Secure user sessions with JSON Web Tokens.
- Password Hashing: User passwords are hashed using
bcrypt. - CORS Configuration: Cross-origin requests are securely handled.
- React: For building the user interface.
- Chakra UI: For beautiful and responsive components.
- React Router: For seamless navigation.
- Vite: For fast development and optimized builds.
- Node.js: For server-side logic.
- Express.js: For building RESTful APIs.
- MongoDB: For storing user and product data.
- Mongoose: For object data modeling (ODM).
- Zustand: For state management.
- Lucide Icons: For modern and lightweight icons.
- Nodemailer: For sending email verifications and password resets.
- Vercel: For deployment.
backend/
├── api/
│ └── index.js # Entry point for Vercel deployment
├── config/
│ └── db.js # MongoDB connection setup
├── controllers/
│ ├── product.controller.js
│ └── user.controller.js
├── emails/
│ ├── email.config.js # Email configuration
│ ├── emailTemplate.js # Email templates
│ └── nodemailer.js # Nodemailer setup
├── middlewares/
│ └── verifyToken.js # JWT verification middleware
├── models/
│ ├── product.model.js # Product schema
│ └── user.model.js # User schema
├── routes/
│ └── ... # API routes
├── utils/
│ └── handleResponses.js # Utility functions for API responses
├── .env # Environment variables
├── server.js # Main server file
└── vercel.json # Vercel configuration
frontend/
├── public/
│ ├── productsaver-high-resolution-logo.png
│ └── vite.svg
├── src/
│ ├── assets/ # Static assets
│ ├── components/ # Reusable components (e.g., Navbar, Footer, ProductCard)
│ ├── pages/ # Application pages (e.g., HomePage, LoginPage)
│ ├── store/ # Zustand stores for state management
│ ├── utils/ # Utility functions (e.g., formatDate, applyStyles)
│ ├── App.jsx # Main application component
│ ├── main.jsx # Entry point
│ └── index.css # Global styles
├── .env # Environment variables
├── vite.config.js # Vite configuration
└── README.md # Project documentation
- Node.js (v16 or higher)
- MongoDB (local or cloud instance)
- Vercel CLI (optional, for deployment)
- Navigate to the
backendfolder:cd backend - Install dependencies:
npm install
- Create a
.envfile and add the following:MONGO_URI=your_mongodb_connection_string JWT_SECRET=your_jwt_secret NODE_ENV=development CLIENT_URL=http://localhost:5173 - Start the server:
npm start
- Navigate to the frontend folder:
cd frontend - Install dependencies:
npm install
- Create a
.envfile and add the following:VITE_API_URL=http://localhost:5000/api - Start the development server:
npm run dev
- Install the Vercel CLI:
npm install -g vercel
- Deploy the backend:
cd backend vercel - Deploy the frontend:
cd frontend vercel
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-name" - Push to your branch:
git push origin feature-name
- Open a pull request.
- Author: Satyam Prajapati
- Email: satyamm1402@gmail.com
- LinkedIn: Satyam Prajapati
- Portfolio: satyam.42web.io
- Chakra UI for the amazing component library.
- Lucide Icons for the beautiful icons.
- Vercel for seamless deployment.
Made with ❤️ by Satyam Prajapati