Back to Projects
E-Commerce Website
Advanced ecommerce system with QR tracking, OTP verification, product filtering, Cloudinary upload and admin panel.
Technologies
ReactNode.jsMongoDB
Digi Store is a personal e-commerce project built using the MERN stack (MongoDB, Express.js, React.js, Node.js). It offers a complete online shopping experience with secure order placement, admin management, email OTP verification, and QR code-enabled delivery tracking.
MongoDB : It is a NoSQL, document-based database used to store structured data such as products, orders, users, OTPs, and admin details. It provides flexibility in data modeling and scalability, and it's connected to the app through Mongoose, enabling schema validation and easy querying.
Express JS : It is a fast, minimal Node.js framework used for building the backend API. It handles all HTTP requests, routes, middleware for authentication, file uploads (via Multer), and connects the application to the MongoDB database. It plays a crucial role in managing user authentication, admin access control, and server-side logic.
React JS : It is used to build the entire frontend of Digi Store. It powers a responsive and dynamic user interface with component-based architecture, handling routing (via React Router), state management, and asynchronous operations like API calls. React also generates QR codes on the client side using libraries like qrcode.react, making delivery tracking user-friendly and instant.
Node.js : Node.js serves as the runtime environment for the backend. It runs the Express server, manages API endpoints, and handles asynchronous tasks like sending emails (via Nodemailer) and securely verifying tokens (using JWT). Using JavaScript on both the client and server sides ensures smooth integration and consistency throughout the stack.
MongoDB : It is a NoSQL, document-based database used to store structured data such as products, orders, users, OTPs, and admin details. It provides flexibility in data modeling and scalability, and it's connected to the app through Mongoose, enabling schema validation and easy querying.
Express JS : It is a fast, minimal Node.js framework used for building the backend API. It handles all HTTP requests, routes, middleware for authentication, file uploads (via Multer), and connects the application to the MongoDB database. It plays a crucial role in managing user authentication, admin access control, and server-side logic.
React JS : It is used to build the entire frontend of Digi Store. It powers a responsive and dynamic user interface with component-based architecture, handling routing (via React Router), state management, and asynchronous operations like API calls. React also generates QR codes on the client side using libraries like qrcode.react, making delivery tracking user-friendly and instant.
Node.js : Node.js serves as the runtime environment for the backend. It runs the Express server, manages API endpoints, and handles asynchronous tasks like sending emails (via Nodemailer) and securely verifying tokens (using JWT). Using JavaScript on both the client and server sides ensures smooth integration and consistency throughout the stack.
Features Overview
Component Structure (React.js)
- Component-based architecture using React to organize the frontend for both user and admin roles.
- User components include pages like Home, Product Listing, About, Contact Us, and User Order Page.
- Admin components include Order Dashboard, Product Manager, Slider Manager, and Staff Delivery Panel.
Order and Delivery System
- Users can only place an order after verifying their email via an OTP.
- Once verified, an order confirmation email is sent containing order details and a link with a QR code.
- Delivery staff scan this QR code and verify the order before updating its status to “Delivered”.
Email OTP Verification
- An OTP is sent to the user’s email address using Nodemailer before an order is confirmed.
- Only after entering the correct OTP can the user proceed with the order.
- Once verified, an email is sent with the order confirmation and tracking information.
QR Code Generation (Frontend)
- QR codes are generated on the frontend using a React-based QR code library.
- Each order gets a unique QR code linked to a page that displays product and order information.
- The delivery staff use this QR code to securely update the delivery status.
Admin Dashboard Features
- Admins can log in and access a dedicated dashboard to manage the store.
- They can view and update orders, add new products, edit or delete existing ones, and manage slider images.
- A delivery panel is also included where staff can scan QR codes and confirm deliveries.
Security and Authentication
- JWT Authentication ensures secure access for both users and admins with token-based session handling.
- bcrypt is used to hash user passwords and OTP codes before storing them in the database.
- Protected routes are applied throughout the backend to enforce role-based access control.
Search Functionality with Debouncing
- The search input on the product page supports debounced suggestions.
- As users type, real-time suggestions are shown without making excessive backend requests.
- This results in a faster and smoother user experience.
Cloudinary Integration for Image Management
- Cloudinary is used to upload and host product and slider images from the admin panel.
- Uploaded images are stored as URLs in MongoDB and loaded efficiently on the frontend.
- This enables faster page load times and reliable media delivery.
User Order Management
- Logged-in users can view all their previous orders on a dedicated page.
- Each order displays its status, product details, and tracking information.
- Ensures a complete post-purchase experience for users.
Responsive UI and Styling
- The entire site uses plain CSS for a clean and intuitive design.
- Both the user-facing site and admin dashboard are fully responsive across all screen sizes.
- Optimized for mobile, tablet, and desktop devices.
What I Learned
Component Structure (React.js)
- Component-based architecture using React to organize the frontend for both user and admin roles.
- User components include pages like Home, Product Listing, About, Contact Us, and User Order Page.
- Admin components include Order Dashboard, Product Manager, Slider Manager, and Staff Delivery Panel.
- Libraries Used: React.js, React Router for navigation.
Order and Delivery System
- Users can only place an order after verifying their email via an OTP.
- Once verified, an order confirmation email is sent containing order details and a link with a QR code.
- Delivery staff scan this QR code and verify the order before updating its status to “Delivered.”
- Libraries Used: Nodemailer for sending emails, qrcode.react for generating QR codes.
Email OTP Verification
- An OTP is sent to the user’s email address using Nodemailer before an order is confirmed.
- Only after entering the correct OTP can the user proceed with the order.
- Once verified, an email is sent with the order confirmation and tracking information.
- Libraries Used: Nodemailer, bcryptjs for OTP hashing.
QR Code Generation (Frontend)
- QR codes are generated on the frontend using a React-based QR code library.
- Each order gets a unique QR code linked to a page that displays product and order information.
- The delivery staff use this QR code to securely update the delivery status.
- Libraries Used: qrcode.react for generating QR codes.
Admin Dashboard Features
- Admins can log in and access a dedicated dashboard to manage the store.
- They can view and update orders, add new products, edit or delete existing ones, and manage slider images.
- A delivery panel is also included where staff can scan QR codes and confirm deliveries.
- Libraries Used: React.js, React Router, Axios for API requests.
Security and Authentication
- JWT Authentication ensures secure access for both users and admins with token-based session handling.
- bcrypt is used to hash user passwords and OTP codes before storing them in the database.
- Protected routes are applied throughout the backend to enforce role-based access control.
- Libraries Used: jsonwebtoken for JWT authentication, bcryptjs for password and OTP hashing.
Search Functionality with Debouncing
- The search input on the product page supports debounced suggestions.
- As users type, real-time suggestions are shown without making excessive backend requests.
- This results in a faster and smoother user experience.
Cloudinary Integration for Image Hosting
- Cloudinary is used to upload and host product and slider images from the admin panel.
- Uploaded images are stored as URLs in MongoDB and loaded efficiently on the frontend.
- This enables faster page load times and reliable media delivery.
- Libraries Used: Cloudinary, cloudinary Node.js SDK.
User Order Management
- Developed an order management system where users can view and track their orders, complete with real-time updates on order status and tracking information.
- The order page displays detailed information including product names, quantities, prices, and order status updates such as "Pending," "Confirmed," "Shipped," and "Delivered."
- Users can also cancel their orders before confirmation, providing flexibility and control over their purchase decisions.
- Libraries Used: Axios for fetching order data, React.js for UI rendering.
Delivery Staff Integration
- Integrated a system where delivery staff can scan QR codes to confirm the status of orders, ensuring smooth and secure delivery tracking.
- Delivery staff receive a unique QR code for each order, which they scan to verify that the correct product is being delivered to the right customer.
- Once the QR code is scanned, the order status is updated automatically in the system, marking it as "Delivered," ensuring seamless communication between the user and delivery staff.
- Libraries Used: qrcode.react, Axios for API calls.
Responsive Design and UI/UX
- The entire site uses plain CSS for a clean and intuitive design.
- Both the user-facing site and admin dashboard are fully responsive across all screen sizes.
- Optimized for mobile, tablet, and desktop devices.
- Libraries Used: None (plain CSS for styling).
React State Management
- Used useState and useEffect hooks to manage dynamic product data and user interactions across multiple components.
- Ensured that the components update seamlessly based on user inputs, like adding items to the cart or updating order statuses.
- Handled state across components like the Product Page, User Order Page, and Admin Dashboard for real-time updates.
- Libraries Used: React.js (React hooks).
Component Reusability
- The project was built with a modular, reusable component structure to avoid redundancy.
- Components like ProductCard, OrderCard, and AdminProductCard are reused across different pages to reduce the amount of code.
- This modularity makes it easier to maintain the project as changes can be applied to the component in one place, reflecting across all instances where it’s used.
- Libraries Used: React.js.
API Integration and Data Fetching
- Integrated the backend with the frontend through RESTful APIs to fetch and display product details, order information, and user data.
- Learned to handle asynchronous API calls using async/await to fetch product data, order status, and user details.
- Managed API response errors to ensure smooth user experience, even in cases of failed API calls.
- Libraries Used: Axios for API requests, Express.js for backend API development.
Admin Dashboard and Role-Based Access
- Developed a secure Admin Dashboard that allows the management of products, orders, and delivery statuses.
- Implemented role-based access control, where admins can manage products and orders, but delivery staff only have access to delivery-specific functionality.
- Used JWT tokens to manage session and restrict access based on user roles.
- Libraries Used: React.js, React Router, jsonwebtoken for JWT.
Cloudinary Integration for Image Management
- Used Cloudinary for efficient image hosting and management for product images and slider images.
- Learned how to upload, store, and retrieve images efficiently to ensure faster load times and optimized storage.
- After uploading images to Cloudinary, implemented Multer and FS to delete the image files from the server, ensuring optimized server storage and avoiding unnecessary disk usage.
- Managed image URLs in MongoDB to dynamically link each product or slider image, enhancing storage efficiency.
- Libraries Used: Cloudinary, Multer, fs (File System), cloudinary Node.js SDK.
Security and Data Integrity
- Ensured secure handling of user data using JWT for authentication and bcrypt for password hashing.
- Used secure token management to allow users to sign in and perform actions like placing orders and viewing past orders.
- Ensured that sensitive information like passwords and OTPs are hashed and never stored in plaintext.
- Libraries Used: jsonwebtoken, bcryptjs.
Handling User Inputs and Forms
- Implemented forms for user registration, login, product ordering, and admin login.
- Validated user input to ensure correct data entry, especially for fields like email addresses, OTPs, and product details.
- Managed form submissions using React hooks and ensured data was sent correctly to the backend via API calls.
- Libraries Used: React.js, Axios for form handling and data submission.
User Authentication and Session Management
- Learned to implement JWT authentication for both users and admins, ensuring secure login and session handling.
- Managed token expiration and re-authentication processes for secure access to protected routes.
- Utilized cookies to store JWT tokens on the frontend for maintaining the login state.
- Libraries Used: jsonwebtoken, cookie-parser.
Real-Time Updates and Notifications
- Implemented real-time updates for order status changes, so users and admins are notified instantly when their order status changes.
- Developed a notification system to inform users about order confirmations, shipping updates, and delivery statuses.
- Used email notifications for sending OTPs and order confirmations to users.
- Libraries Used: Nodemailer for email notifications.