Summary

Component Hierarchy

• App:

  • Root component that sets up routes and provides global context.

• Header:

  • Contains the Navbar and DarkModeToggle components.

• Navbar:

  • Navigation links to different pages.

• DarkModeToggle:

  • Toggles between light and dark modes.

• Routes:

  • Home (Products)
  • Add Product (ProductForm)
  • About Us (AboutUs)
  • Not Found (NotFound)

Component Map diagram

API structure

• Main Server File (server.js or index.js)

  • Sets up an Express server.
  • Connects to a MongoDB database using Mongoose.
  • Configures middleware, including CORS and JSON parsing.
  • Defines routes for the API, delegating product-related routes to a separate router (productRouter).

• Product Controller (productControllers.js)

  • Contains functions to handle CRUD operations for products:
    • getProducts: Fetches all products.
    • getProduct: Fetches a single product by ID.
    • createProduct: Creates a new product.
    • deleteProduct: Deletes a product by ID.
    • updateProduct: Updates a product by ID.
    • updateProductPrice: Updates only the price of a product by ID.
    • getLikes: Increases the like count of a product by ID.

• Product Model (productsModel.js)

  • Defines the structure of a product document in the MongoDB database.
  • Uses Mongoose schema to specify fields and their types (e.g., name, image, initialPrice, newPrice, description, tag, likes).

• Product Router (products.js)

  • Sets up routes for the product-related endpoints.
  • Associates each route with the corresponding controller function.

Features and technologies used

• Features Implemented: Product listing, bidding, search, filtering, and love rating system.
• Technologies Used: React, Node.js, Express, MongoDB Atlas.
• API: Integrated own API with product data.
• Deployment: Front-end and back-end on render.

Video Demonstration

• [Watch the demo video] (https://drive.google.com/file/d/1ATcTYjmjmijsonTCJt43HuVwlkXim_Ro/view?usp=sharing)

References

• Link to the site

Example demo

• Home page

• 

• Home page Dark mode

• 

• Add new Product page

• 

• About us page

• 

• Bidding

• 

• Adding Product

• 

• Deleting Product

• 

• Search Product

• 

• Love Product

• 

• Page not found

•