week11-where-is-whippy 🍦 🚚

Project overview

An app created to connect local ice cream vendors with customers. Where's Whippy was created to support local businesses and ice cream lovers alike.

Where's Whippy is a full stack web application with JWT authentication that serves geolocation and user data from a postgres database using an RESTful API built in Express.

The team

Ina - DevOps / Developer 🖥️
Lizzy - User Experience / Developer 🖌️
Joe - Quality assurance / Developer ✔️
Hettie - Scrum master / Developer 📋

Project overview
The team
Tech Stack
🗄️ Database schema
Features
🏁 Getting started
- Database setup
- REST API Endpoints
📆 Project Timeline
Reflections and What Next
👨‍🏫 Key takeaways
⏳ Additional Features

Tech Stack

Dependencies

pg - Non-blocking postgres client for Node (API)
dotenv - Allows private variables to be added (API)
nodemon - Restarts the server automatically when you make a change to the code
bcrypt - Hashes the passwords
jsonwebtoken - Used to create a jwt for the users to sign in and out
Prettier - Ensures we all have same formatting as a team

Dev Dependencies

Husky - Prevents bad code from being committed automatically

🗄️ Database schema

Features

What can you do?

You can sign up as either a vendor or customer.
As a vendor you will be able to generate a heatmap of customers that have signalled they want ice cream.
As a customer you can signal you want ice cream. Then when generating the heatmap as a vendor that location should show.

🏁 Getting started

Clone this repo locally
Run npm run gap → this will npm i the three package.jsons in

client-app/
server-api/
Root folder

Make sure you do npm start in the client-app/ and server-api/ folders respectively when running the project.

Database setup

Enter postgres and set up a superuser for local database

CREATE USER myuser WITH PASSWORD 'mypassword';
ALTER USER myuser WITH SUPERUSER;

Set up local dev and testing database. The latter must be called student_project_test_db.

   CREATE DATABASE my_new_db WITH OWNER myuser;
   \c my_new_db;
   \i .../db/init.sql;
   CREATE DATABASE student_project_test_db WITH OWNER myuser;
   \c student_project_test_db;
   \i .../db/init.sql;

Create a .env file in the server-api/ folder with the following inside:

PGDATABASE=my_new_db
PGUSER=myuser
PGPASSWORD=mypassword
JWT_SECRET=mysecret

REST API Endpoints

Examples of body and example response can be found in the following Postman collection:

GET

GET all customers: http://localhost:8080/customers/
GET all customer coordinates:http://localhost:8080/customers/coords
GET specific customer:http://localhost:8080/customers/id:
GET all vendors: http://localhost:8080/vendors/
GET all vendor coordinates: http://localhost:8080/vendors/coords
GET specific vendor:http://localhost:8080/vendors/id:
GET specific route by name:http://localhost:8080/routes/:name:

POST

POST signup new vendor http://localhost:8080/vendors/signup
POST login vendor http://localhost:8080/vendors/login
POST new vendor coordinates: http://localhost:8080/vendors/coords
POST new route:http://localhost:8080/routes
POST signup new customer http://localhost:8080/customers/signup
POST login customer http://localhost:8080/customers/login
POST new customer coordinates: http://localhost:8080/customers/coords

Delete

DELETE route:http://localhost:8080/routes/:name

📆 Project Timeline

🎨 Week 1: Design

This week was spent identifying key design heuristics we wanted to incorporate into our prototype and conducting user research. See our style guide here for a full breakdown.

For an overview of the project's user stories, check out the User stories here

The initial prototype can be viewed here on Figma

Through our initial user research, we learnt that ice cream vendors are not keen to have their location shared constantly with customers, so would like to have full control of how visible they are on the map, and this impacted our final MVP design.

🔧 Week 2: First Build Sprint

By the end of the first build sprint, we had accomplished the following:

Initial set up of PostgresQL database
Set up Travis CI and Husky as part of initial setup
Deployment of frontend and backend from a monorepo
Finalized style guide
Set up React router for for the front-end to serve different pages

🔨 Week 3: Second Build Sprint

By the end of the second build sprint, we were able to :

Create the heatmap for ice cream vendors to view nearby customers who are interested in icecream
Set up codecov to monitor test coverage on the project
Add functionality for customers to let ice cream vendors know they would like ice cream
Include geolocation api tracking for customers

Reflections and what next

👨‍🏫 Key takeaways

React router to serve different pages for diferent users
Using React context to make state management more streamlined in your React app
Implementing and customising Google Map and Geocoding APIs in React
How to scope a MVP properly and prototype in Figma
Most importantly, everyone loves icecream 🍦

⏳ Additional Features

Unfortunately, there were a few features we were unable to incorporate into the MVP due to time constraints. These included:

The map customers where they could see their nearest ice cream vendor
The routes feature for vendors which allows them to upload, edit and store their routes
Style the heatmap based on the prototype
Add an emergency exit for users
No authorization on the API's endpoints
Minimal frontend tests

MariyaPeychinova/week11-where-is-whippy