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, and whether 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.
• Supports dark and light mode based on system preference.
• 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.
• Search sauces by name, sort by name or Scoville rating, and filter by organic or kosher status.
• Displays a live sauce count that updates to reflect active filters, with a one-click clear filters button.
• "Surprise me!" button navigates to a randomly selected sauce.
• Organic and kosher status shown as icon badges directly on each sauce card.
• Image URL fields in the add and edit forms show a live preview thumbnail as the URL is typed.
• Active navigation link is visually distinguished in the navigation bar.
• "Sticky" filter controls bar remains visible as the user scrolls the sauce list.
• "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 git@github.com: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.

printf "PORT=3333\nPG_HOST=localhost\nPG_PORT=5432\nPG_DATABASE=saucesource\n" >> .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