About this project
Advanced ecommerce system with QR tracking, OTP verification, product filtering, Cloudinary upload and admin panel.
Project features
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.
Quick summary
Advanced ecommerce system with QR tracking, OTP verification, product filtering, Cloudinary upload and admin panel.