🛍️ E-commerce Full Stack Application

This is a comprehensive e-commerce full-stack application built using Next.js for the front end and Node.js with Express.js for the backend. It provides functionality for user authentication, seller product management, and buyer shopping experience.

😍 UI Components

Homepage & 404 error page

Login & Signup Page

Login & Signup form validation

Buyer & Seller dashboard Page

Advance search functionality for product name & category

Fallback loading UI

Unauthorize access page for protected routes & Buyer cart page

Seller Add & Edit product page

Add & Edit product form fields with custom validation

🕹️ Tech Stack

Frontend

• Next.js 14.2.6
• React 18
• TypeScript
• Tailwind CSS
• Additional libraries:
  • @hookform/resolvers
  • @radix-ui (for UI components)
  • axios (for API requests)
  • react-hook-form (for form handling)
  • zod (for schema validation)
  • zustand (for state management)

Backend

• Node.js
• Express.js
• PostgreSQL (pg driver)
• Additional libraries:
  • bcryptjs (for password hashing)
  • jsonwebtoken (for JWT authentication)
  • cors (for handling Cross-Origin Resource Sharing)
  • dotenv (for environment variable management)

🎉 Features

User Authentication & Authorization

• Role based dynamic routes based on user login.
• JSON Web Tokens (JWT) used for maintaining user sessions.
• Tokens securely stored on the client-side for persistent authentication.
• Distinct user roles (seller and buyer) with different permissions and access levels.
• Users can create accounts as either sellers or buyers.
• Custom form validation enforced for enhanced security.
• Passwords hashed using bcrypt before storage in the database.
• Handled Unauthorized access for all roles.
• Seamless one click logout feature.

Seller Functionality

• Sellers can easily add new products with detailed information:
  • Product name
  • Category selection from predefined options
  • Rich text description support
  • Price setting with discount
• Edit existing product details and update information in real-time.
• Remove products from the marketplace with safeguards against accidental deletion.
• Have access for his own added products only.

Buyer Functionality

• Search functionality allowing users to find products by name or category.
• Implemented advance debounced search functionality for better UI rendering.
• Sort results automatically by acceding order on every request.
• Buyer can have the flexibility for add to card with quantity directly from product card.
• Remove items or adjust quantities directly from the cart table.
• Persistent cart that saves items for logged-in users across sessions.
• Added cart notification dot with cart count for real time updates.

Responsive Design

• Fully responsive interface adaptable to various screen sizes (desktop, tablet, mobile).
• Consistent user experience across different devices.

Security Features

• HTTPS encryption for all data transmissions.
• CSRF protection for form submissions.
• Input validation and sanitization to prevent SQL injection and XSS attacks.

🪄 Best Practices

• [✔️] Input Validation: All user inputs are validated and sanitized using Zod before being processed or stored in the database.
• [✔️] Routing: Next.js file-based routing system is used effectively, with dynamic routes implemented where necessary.
• [✔️] Responsiveness: The application is designed to be responsive across various devices and screen sizes using Tailwind CSS.
• [✔️] Error Handling: Proper error handling is implemented for various scenarios, with clear and meaningful error messages returned to the client.
• [✔️] Code Quality: The codebase maintains high standards of readability and maintainability, with appropriate comments explaining complex logic.
• [✔️] Security: Best practices for security are followed, including secure authentication with JWT and bcrypt for password hashing.
• [✔️] State Management: Zustand is used for efficient and scalable state management on the frontend.
• [✔️] Form Handling: react-hook-form is utilized for efficient and performant form handling.
• [✔️] API Requests: Axios is used for making HTTP requests, providing a consistent interface for both browser and node.js environments.
• [✔️] UI Components: Shadcn UI is used for accessible and customizable UI components.