Mobile Commerce

The landing page displays a grid of product cards with images, titles, and prices, accessible to all users without login.

Unauthenticated users can browse products but are redirected to /login when attempting to add items to the cart.

• Responsive product card layout
• Public access to product catalog
• Cart access restricted to logged-in users
• Clean and intuitive UI design

Unauthenticated users attempting to access protected actions (like adding to cart) are redirected to the /login route with a secure login form.

The /register route allows new users to create accounts with name, email, and password, with seamless navigation between login and registration.

• Secure login and registration with MongoDB
• Hashed password storage for security
• Responsive and consistent form design
• Smooth navigation flow between auth pages

The /products route displays all available products in a grid layout, accessible via the navbar.

Logged-in users can click 'Add to Cart' on any product, instantly updating the cart count in the navbar.

Advanced search and filtering options allow users to search products by name or description, filter by price range, and sort by A-Z, Z-A, price low to high, or high to low.

Clicking a product image navigates to the dedicated product detail page at /product/[id].

• Full product catalog with real-time search by name/description
• Interactive filtering by price range
• Sorting options: A-Z, Z-A, price low to high, high to low
• Interactive 'Add to Cart' for authenticated users
• Click-to-view product detail page via image
• Real-time cart badge update in navbar
• Responsive grid layout for all devices

Accessible by clicking any product image from the landing page or /products route, this dynamic route shows full product details including high-resolution image, title, description, price, discount, category, SKU, and inventory status.

Users can add the product to cart directly from this page with quantity controls.

• Dynamic routing with Next.js [id] parameter
• Detailed product view with all attributes
• High-quality image display
• Add to cart with quantity selection
• Responsive single-product layout

Accessible via the cart icon in the navbar, the /cart route shows all items added by the user with product image, title, price, and quantity.

Users can increment/decrement quantity, remove items, and proceed to checkout with a dedicated button.

• Dynamic cart with real-time updates
• Quantity controls and item removal
• Proceed to checkout functionality
• MongoDB-backed cart persistence

The /billing route provides a complete order summary including all cart items, quantities, individual prices, and the total amount.

Users fill out a debit card payment form to complete the purchase. Upon clicking 'Make Payment', a green success message appears along with a detailed payment payslip confirming the transaction.

• Order summary with itemized breakdown
• Total amount calculation
• Secure debit card payment form
• Instant success feedback with payslip
• MongoDB-backed transaction simulation
• Responsive billing interface

Logged-in users access the /profile route via the profile icon in the navbar to view and edit their name, upload/change profile photo, and update their password with verification.

The interface ensures secure and user-friendly profile management.

• Editable name and profile photo
• Secure password change with current password check
• Responsive and clean profile layout
• Logout option with session termination

Admins see an additional 'Admin' link in the navbar, leading to the /admin route where they can add new products by filling a form with ID, title, description, image, inventory, price, discount, category, and SKU.

All fields are validated and stored in MongoDB for immediate availability across the platform.

• Form-based product creation with full attributes
• Admin-only access with role-based protection
• Real-time database integration via MongoDB
• Responsive admin interface for product management

Built with Next.js for server-side rendering, dynamic routing, and optimal performance across all pages.

Integrates MongoDB for real-time product, user, cart, and order data management, with Tailwind CSS ensuring a modern, responsive design.

Features dynamic product detail pages, advanced search/filter/sort on product listing, and a complete billing & payment flow with success confirmation.

• Next.js dynamic routing for public, protected, and [id]-based pages
• MongoDB for secure and scalable data storage
• React hooks for state, cart, and form management
• Tailwind CSS for consistent, mobile-first styling
• Role-based access control for user and admin features
• Advanced search, filter, sort, and product detail system
• Full checkout flow with payment simulation and payslip