iShop is a full stack e-commerce web application built to simulate a basic online shopping platform. The main goal of this project was to practice building a complete web application with a separate frontend and backend.
Users can browse products, add items to their cart, manage delivery addresses, and place orders. The project helped me understand how different parts of a full stack application work together, including the user interface, API communication, and database operations.
The application also focuses on creating a responsive interface and organizing the project in a structured way.
Frontend
- Next.js / React
- TailwindCSS
- Redux Toolkit
Backend
- Node.js
- Express.js
Database
- MongoDB
Tools
- Git
- GitHub
- Postman
- VS Code
ishop
|
|-- client # Frontend application built with Next.js
|-- server # Backend API built with Node.js and Express
|-- package.json
|-- package-lock.json
|-- README.md
- User authentication (login and registration)
- Product listing
- Add to cart functionality
- Cart management
- Address management
- Checkout process
- Order creation
- Admin management for brands and products
The application is divided into three main sections:
Authentication
Handles user login and registration functionality.
- Login
- Register
Website
This section contains the user-facing part of the application where users can browse products and place orders.
- Store (product listing)
- Cart management
- Checkout process
- User profile
Admin Panel
The admin panel allows administrators to manage the product catalog using CRUD operations.
- Brand management
- Category management
- Color management
- Product management
Clone the repository
git clone https://github.com/DeepikaJangid/iShop.git
Navigate to the project directory
cd iShop
Install root dependencies
npm install
Install client dependencies
cd client
npm install
Install server dependencies
cd ../server
npm install
Run the application
npm start
This project follows a separated frontend and backend structure.
The frontend is responsible for displaying the user interface and handling user interactions such as browsing products, managing the cart, and adding addresses.
The backend handles API requests, user authentication, order creation, and database operations.
Redux Toolkit is used on the frontend to manage global state such as user information and cart data so that different pages can access the same data.
- Managing global state across different pages using Redux
- Handling API calls between the frontend and backend
- Organizing components so they can be reused
- Implementing the checkout flow and connecting it with address selection and order creation
- Payment gateway integration
- Admin analytics dashboard
- Socket.io
Deepika Jangid GitHub: https://github.com/DeepikaJangid