Skip to content

Latest commit

 

History

History
94 lines (71 loc) · 3.57 KB

README.md

File metadata and controls

94 lines (71 loc) · 3.57 KB
Raw

Oddity Emporium

Oddity Emporium is a web application that allows users to browse, add, and review inventions. It features a React-based front-end that communicates with a Node.js backend using MongoDB for data storage. Users can add new inventions, upload images, leave reviews, and interact with the product catalog.

Features

  • Browse Products – View inventions in the shop and their details.
  • Add Inventions – Logged-in users can add new products, upload images, and provide details such as price, weight, and description.
  • Reviews – Users can leave reviews and ratings on products they have purchased.
  • Admin Panel – Admins can manage product listings and reviews.

Tech Stack

Frontend:

  • React – JavaScript library for building the user interface.
  • React Router – For client-side routing.
  • SCSS – CSS preprocessor for styling.
  • Axios – For making API requests.

Backend:

  • Node.js & Express – For creating the REST API.
  • MongoDB – For storing product data, reviews, and user information.
  • Multer – For handling file uploads (product images).
  • CORS – To handle cross-origin resource sharing.

Live Demo

You can access the live demo here.

Installation

Backend (Node.js Server with MongoDB)

  1. Download API: 
     https://gofile.io/d/hjFMS0
  2. Navigate to the project directory: 
    cd oddity-emporium
  3. Install dependencies for the backend: 
    npm install
  4. Setup environment variables:
    • Create a .env file in the root of your project.
    • Add the MongoDB connection string to .env: 
      MONGO_URI=mongodb+srv://<username>:<password>@cluster0.mongodb.net/oddity-emporium
  5. Run the server: 
    node server.js

The server will start on the specified port (PORT), and you'll be able to access the API on http://localhost:3000.

Frontend (React Application)

  1. Navigate to the frontend directory: 
    cd frontend
  2. Install dependencies for the frontend: 
     npm install
  3. Run the React application: 
     npm run dev

Backend Details (Node.js with MongoDB)

The backend is built using Node.js and Express and connects to MongoDB for storing and managing inventions, reviews, and other related data.

Endpoints:

  • GET /inventions – Get all inventions.
  • POST /inventions – Add a new invention (requires image upload).
  • POST /inventions/:id/reviews – Add a review for an invention.
  • PUT /inventions/:id – Update an invention.
  • DELETE /inventions/:id – Delete an invention.

MongoDB Schema:

  • Invention – Represents the invention data including name, description, price, weight, reviews, etc.
  • Review – Represents the review data including reviewer name, rating, and comment.

Setting up MongoDB

The backend is connected to MongoDB via Mongoose, and you'll need a MongoDB Atlas account to set up your own database. Follow these steps to configure MongoDB:

  1. Create an Atlas Account: Sign up at MongoDB Atlas.
  2. Create a Cluster: Follow the steps in the Atlas dashboard to create a new cluster.
  3. Get the Connection String: From your cluster's dashboard, click on "Connect" and select "Connect your application". Copy the connection string.
  4. Update .env file: Replace the , , and in the connection string with your actual MongoDB credentials and database name.

Design

shop

License

This project is licensed under the MIT License - see the LICENSE file for details.