scheiber/saucesource

Add some fuel to your fire with SauceSource, a web app that allows a user to learn about and curate different types of hot sauces.

SauceSource

Table of Contents

• About
• Features
• Technical Details
• Links
• Local Setup
  • Front-end Setup
  • Back-end Setup
• Acknowledgments
• Screenshots

About

Looking to spice up your life? SauceSource is a web app that allows you to learn about and curate different kinds of hot sauces. The app functions as a reference guide as well as a discovery tool. Users can navigate the site to see a selection of different sauces, complete with images of their bottles, their rating on the Scoville Scale, the origins of the sauce, what foods they pair best with, and if the sauce is organic or kosher. Add some fuel to your fire with SauceSource.

Features

• Clean and easily-navigable user experience is designed to be fully responsive.
• Looks and works great on both desktop and mobile platforms.
• Ability to add, edit, see information about, and delete sauces.
• Asks to confirm deletion of any sauce, to prevent unintentional user action and data loss.
• "Sticky" navigation bar is always present on screen as user scrolls the page.
• Assigns each sauce a "flame score" from 1 to 5 that is calculated based on the sauce's Scoville Heat Unit (SHU) rating.
• Formats and displays Scoville ratings correctly using Intl.NumberFormat.
• Uses react-helmet-async to dynamically change page titles based on current route.
• Uses react-icons for custom button icons.
• Uses react-promise-tracker and react-loader-spinner to display a loading indicator during fetch calls.
• Uses react-scroll-up-button to display a button that scrolls to the top of the list of sauces when clicked.
• Links to buy sauces from external websites on each sauce page.
• Customized favicon.
• Customized font.
• Customized error page.
• "About" page with details of project and credits.

Technical Details

• This project was created using a React-based front-end, an Express-based back-end, and a PostgreSQL database.
• The front-end is hosted on Netlify and the back-end is hosted on Fly.io.
• Sauce data is stored in the back-end database.
• This project went from conception to completion in two weeks and was created while fully remote through the Pursuit fellowship.

Links

• Frontend Deployment
• Backend Deployment
• Trello Board
• ERD
• Wireframes
• Project Prompt

Local Setup

First, clone this repository to your local machine.

git clone [email protected]:Scheiber/saucesource.git

It is recommended to use two separate terminal instances so that the front-end and back-end can run concurrently.

Front-end Setup

Prerequisites are Git and Node.js.

First, navigate to the front-end directory.

cd saucesource/front-end

Next, create a .env file to allow the front-end to access the back-end locally.

echo "REACT_APP_API_URL=http://localhost:3333" >> .env

Next, install the required node modules.

npm i

Finally, start the server.

npm start

Back-end Setup

Prerequisites are Git, Node.js, and Postgres.

First, navigate to the back-end directory.

cd saucesource/back-end

Next, create a .env file to access the database locally.

echo "PORT=3333\nPG_HOST=localhost\nPG_PORT=5432\nPG_DATABASE=saucesource" >> .env

Next, install the required node modules.

npm i && npm i -g nodemon

Next, initialize and seed the database.

npm run db:init && npm run db:seed

Finally, start the server.

nodemon server.js

Acknowledgments

Much gratitude goes towards the testers and reviewers of this project, including my instructors Myra Smith, Gary Kertis, and Tristan Angieri, as well as my colleagues Jossy Pascasio for design consulting, and Pratima Roy for user experience review.

Screenshots