Spice Guys

Table of Contents

1. About the Project
   • Built With
2. Application Endpoints
   • Server API
   • React App
3. Getting Started
   • Installation
   • Prerequisites
4. License

About the Project

Spice Guys is a web application that allows users to create and share information on spices. Users will create an account and login to the application. Once logged in, users can create, edit, and delete spices.

(back to top)

Built With

Spice Guys is a full-stack MERN app built with the following frameworks/libraries:

• 
• 
• 
• 
• 
• Bcrypt
• JSON Web Token (JWT)

(back to top)

Application Endpoints

Server API

Method	Path	Purpose
GET	/api	Root Page
GET	/api/auth	User route
POST	/api/auth/createuser	For new user sign-up
POST	/api/auth/login	For user login
GET	/api/fetchallspices	Spices route
POST	/api/spices/addspice	Add Spice route
DELETE	/api/spices/deletespice/:id	Delete spice route
PUT	/api/spices/updatespice/:id	Update spice route

React App

Component	Purpose
components/About.js	Component directing to About page (/about)
components/AddSpice.js	Component on Home page that consists of form for adding notes
components/Alert.js	Component that creates an alert for the SpiceState (in context folder)
components/LandingPage.js	Landing Page (/) - can access Login or Signup
components/Home.js	Home page (/home) - displays Spices and AddSpice components, can access Logout
components/Login.js	Component directing to Login page (/login)
components/Navbar.js	Navigation bar - can access Login, Signup, Home and About
components/SpiceItem.js	Component representing individual spice that make up Spice.js component
components/Spice.js	Component on Home page that includes individual SpiceItem.js components
components/Signup.js	Component directing to Signup page (/signup)

(back to top)

Getting Started

Installation

1. In order to run this project locally, you'll need to cd into the both the backend and client folders and run npm install.
2. Create an .env file in the backend directory and add the following environmental variables:

       PORT=5000
       MONGO_URI=mongodb+srv://<username>:<password>@<clustername>.mongodb.net/spiceGuys
       JWT_SECRET=<random-string>

3. Create an .env file in the client directory and add the following environmental variable. (Note that if you change the port to anything other than 5000 in one .env you'll need to update it in the other as well.)

    REACT_APP_SERVER_URL=http://localhost:5000/

4. In order to run the app you'll also need to create a database in MongoDB and generate a JSON web token (JWT). The Prerequisites section below provides further instructions on these.

Prerequisites

• Set up a database on MongoDB:

  • Open MongoDB Compass, select the "Databases" tab at the top and click the "Create database" button under it.
  • A window will open where you'll fill in fields for "Database Name" and "Collection Name" and then click "Create Database". I named my database "spiceGuys" and the collection "users". I also added a collection named "spices", but that can be done later.
  • Get your connection string by clicking on the three dots next to your cluster name, which will enable a pop-up in which you'll click on "Copy connection string".
  • Copy the string and paste it after MONGO_URI= in backend directory's .env file.
  • If you have trouble getting logged into Compass you can find instructions at the MongoDB Atlas website that will guide you through connecting to Compass at https://www.mongodb.com/atlas/database.

• Get a JSON web token (JWT) for authentication:

  • Go to the terminal and type node to launch the REPL (Node shell).
  • At the > prompt type require('crypto').randomBytes(35).toString('hex').
  • Copy the generated string and paste it after JWT_SECRET= in the backend directory's .env file.
  • Type .exit to exit the REPL and return to the terminal.

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)