garrettgsb · sneham-boop · Sep 29, 2022 · Sep 29, 2022 · Sep 29, 2022 · Sep 29, 2022
diff --git a/README.md b/README.md
@@ -1,46 +1,113 @@
-# React + Express No-Fluff Boilerplate
+# Welcome to WeRun
+## Final Project for Lighthouse Labs
+### Created by Sneha Mahajan (@sneham-boop) and Marianne Bourcier (@mariannebourcier)
 
-A boilerplate project for anyone interested in making a project that uses React and Express.
+WeRun is a single page application where users can find running events near them or create new running events for others to join. The goal of this app is to make running more fun and bring together the runners community by having them join events in an interactive way. 
+This app uses React and Bootstrap on the front-end and Express, PostgreSQL and Node on the back-end. Multiple packages and APIS were used to make the user experience smoother, such as Recoil, Autocomplete and Google Maps. Twilio is currently being used to send users important information via text messaging. 
 
-This repository is a bootleg of @NimaBoscarino's [React Rails Boilerplate](https://github.com/NimaBoscarino/react-rails-boilerplate). It uses the same React app, but replaces the Rails server with an Express server.
+## Screenshots
 
-Note! This boilerplate has _no fluff_! That means that there's nothing set up for you to do authentication stuff, there's no Redux stuff, and there's no React Router stuff. On the Express end, there is no session storage or database connection.
+!["homepage"](https://github.com/mariannebourcier/werun/blob/master/docs/images/homepage.png?raw=true)
+This screenshot shows the homepage for WeRun.
 
-The main important bit is that the React project has `proxy` set to `localhost:8080` in the `package.json` file, and that the Express app listens to port 8080 in `server.js`. Take a look!
+!["map"](https://github.com/mariannebourcier/werun/blob/master/docs/images/joinARun.png?raw=true)
+This screenshot shows a map that centers on the user's current location to allow them to find runs near them more easily. 
 
-You can (and perhaps should) rename the directories `express-back-end` and `react-front-end` if you want-- The name doesn't matter.
+<img src="https://github.com/mariannebourcier/werun/blob/master/docs/images/markerHoverInfo.png?raw=true" alt="marker-hover" width="50%">
 
-## Running the projects
+This screenshot shows the marker for a run and details of the run.
 
-You need **TWO** terminal windows/tabs for this (or some other plan for running two Node processes).
+!["run-join"](https://github.com/mariannebourcier/werun/blob/master/docs/images/joiningStatus.png?raw=true)
+This screenshot shows what happens when a user hits the join button for a run. The user will also receive a text message confirming their attendance to the event.
 
-In one terminal, `cd` into `react-front-end`. Run `npm install` or `yarn` to install the dependencies. Then run `npm start` or `yarn start`, and go to `localhost:3000` in your browser.
+!["available-runs"](https://github.com/mariannebourcier/werun/blob/master/docs/images/availableRuns.png?raw=true)
+This screenshot shows which runs are available to join.
 
-In the other terminal, `cd` into `express-back-end`. Run `npm install` or `yarn` to install the dependencies, then `npm start` or `yarn start` to launch the server.
+!["createrun"](https://github.com/mariannebourcier/werun/blob/master/docs/images/createRunAutocomplete.png?raw=true)
+This screenshot shows the run creation page where users can find the exact location for their run.
 
-In the browser, you can click on the button and see the data get loaded.
+!["run"](https://github.com/mariannebourcier/werun/blob/master/docs/images/runCreated.png?raw=true)
+This screenshot shows the new run that was created under the user's profile planned tab.
 
-If this doesn't work, please message me!
+!["run-details"](https://github.com/mariannebourcier/werun/blob/master/docs/images/runCreatedDetails.png?raw=true)
+This screenshot shows the new run's additional details such as the exact route, time and date.
 
-## Next steps
+!["profile"](https://github.com/mariannebourcier/werun/blob/master/docs/images/fullProfile.png?raw=true)
+This screenshot shows the user's profile with their running statistics as well as a planned and attended tab for them to keep track of their events.
 
-From here, you can start working on your project!
+<img src="https://github.com/mariannebourcier/werun/blob/master/docs/images/signIn.png?raw=true" width="50%" alt="signin">
 
-As soon as the dependencies are installed, your Express server can serve JSON and static assets (like images) in response to API calls from the React app. You can get started on developing your React app, routing plan, etc. right away! Any request that isn't handled by React is passed on to the Express server. That means that you can call a route like `/api/users` from React using `fetch`, `axios`, or something else, and Express will receive it as though they originated from the same app. For routing, best practice is to namespace all of your data routes to `/api`, so that they don't clash with other routing schemes, like React Router.
+This screenshot shows the sign in page.
 
-At some point, you'll likely want to install and configure a database driver for Postgres or MongoDB-- Refer to past projects for hints on how to do this.
+<img src="https://github.com/mariannebourcier/werun/blob/master/docs/images/signUp.png?raw=true" width="50%" alt="signin">
 
-And don't forget to update the README!
+This screenshot shows the sign up page.
 
-## Example Projects
 
-You might want to look at examples of projects that have used this boilerplate for hints on how to extend it. Here are a few:
+## Dependencies
+### Front-End:
+- axios
+- bootstrap
+- dotenv
+- google-map-react
+- react
+- react-bootstrap
+- react-datepicker
+- react-dom
+- react-google-autocomplete
+- react-router-dom
+- react-scripts
+- recoil
+- recoil-persist
 
-* [Later Cart](https://github.com/bonitac/later-cart)
-* [Buddi.io](https://github.com/Danny-Tran/buddi.io)
+### Back-end:
+- bcryptjs
+- body-parser
+- cookie-session
+- dotenv
+- express
+- nodemon
+- pg
+- twilio
 
-If you'd like your project added to the list, please shoot me a message.
+## Getting Started
+1. Git clone project.
 
-## Contact
+### Front-End:
+1. Open the react-front-end folder using the ```cd react-front-end``` command in the terminal.
+2. Install all dependencies using ```npm install``` in the terminal.
+3. Type the ```npm start``` command.
+
+### Database:
+1. Create a .env file in the root of the directory like the .env.example file and add your own database credentials for DB_USER, DB_PASS & DB_NAME
+2. Next, we will need to create the database itself. Start PostgreSQL by using the ```psql``` command in your CLI.
+3. Create the database using ```CREATE DATABASE your-db-name;``` command, but make sure to use the database name you used for the DB_NAME variable in the .env file.
+4. Add tables to the database by typing ```\i db/schema/01_schema.sql``` in the terminal.
+5. Add seed data to the database by typing ```\i db/seeds/01_seeds.sql``` in the terminal.
+
+If the database credentials are setup properly, you should be able to connect to the db using \c your-db-name
+The database must be initialized with new tables and some seed data next.
+
+A few errors that can occur while setting up a PostgreSQL database:
+Role mismatch: Check existing roles for your machine with \du. If your-role you used in the .env file does not exist, it will not show up and you will have to create one with the following command CREATE ROLE your-role WITH SUPERUSER;. Note that your current role must be superuser to be able to create a new role.
+Password mismatch: Check how you have set up psql on your machine to sort this one.
+Missing .env file: You need a .env file with your own credentials to be able to connect to the database. Use the .env.example file to create the .env file.
+
+### Back-end:
+1. Open the express-back-end folder using the ```cd express-back-end``` command in the terminal.
+2. Install all dependencies using ```npm install``` in the terminal.
+3. Type the ```npm start``` command. 
+
+
+
+
+### Future Features
+- A button on the planner tab to notify runners of any changes related to the running event, such as cancelation or time change.
+- A way for runners to record and track their time, possibly using an API from Fitbit, Strava or Apple Health.
+- Allowing users to change their profile picture.
+
+### Known Issues
+- The profile picture is a static image from the server.
+- The location selection for runs does not calculate automatically the distance between point A and point B yet.
+- This application hasn't been tested on other browsers besides Google Chrome yet. 
 
-Please contact me on Slack (@garrettgsb) or Nima at `[email protected]` if you have any questions, requests, or feedback, or post an issue to this repo. If you are using the boilerplate, I'd love to hear from you as well!
diff --git a/docs/.DS_Store b/docs/.DS_Store
diff --git a/docs/images/.DS_Store b/docs/images/.DS_Store
diff --git a/docs/images/ProfileDash.png b/docs/images/ProfileDash.png
diff --git a/docs/images/availableRuns.png b/docs/images/availableRuns.png
diff --git a/docs/images/createRunAutocomplete.png b/docs/images/createRunAutocomplete.png
diff --git a/docs/images/fullProfile.png b/docs/images/fullProfile.png
diff --git a/docs/images/homepage.png b/docs/images/homepage.png
diff --git a/docs/images/joinARun.png b/docs/images/joinARun.png
diff --git a/docs/images/joiningStatus.png b/docs/images/joiningStatus.png
diff --git a/docs/images/kananaskis-run-info.png b/docs/images/kananaskis-run-info.png
diff --git a/docs/images/kananaskisRun.png b/docs/images/kananaskisRun.png
diff --git a/docs/images/markerHoverInfo.png b/docs/images/markerHoverInfo.png
diff --git a/docs/images/runCreated.png b/docs/images/runCreated.png
diff --git a/docs/images/runCreatedDetails.png b/docs/images/runCreatedDetails.png
diff --git a/docs/images/signIn.png b/docs/images/signIn.png
diff --git a/docs/images/signUp.png b/docs/images/signUp.png
diff --git a/express-back-end/.DS_Store b/express-back-end/.DS_Store
diff --git a/express-back-end/.env.example b/express-back-end/.env.example
@@ -0,0 +1,8 @@
+DB_HOST=localhost
+DB_USER=
+DB_PASS=
+DB_NAME=your_db_name
+DB_PORT=5432
+TWILIO_ACCTNUM=your_twilio_acct_num
+TWILIO_TOKEN=your_twilio_token
+TWILIO_PHONENUM=your_phone_number
diff --git a/express-back-end/db/queries.sql b/express-back-end/db/queries.sql
@@ -0,0 +1,105 @@
+-- users
+-- Get all users
+SELECT * FROM users;
+
+-- Get user by email
+SELECT * FROM users
+WHERE users.email = '[email protected]';
+
+-- Get all runners
+SELECT * FROM users 
+WHERE users.runner = TRUE;
+
+-- Get all planners
+SELECT * FROM users 
+WHERE users.planner = TRUE;
+
+-- Create a new user
+INSERT INTO users (name, email, password, phone, gender, age, planner, runner)
+VALUES ('Jane Doe','[email protected]','password','111-111-1111','F',21,TRUE,TRUE);
+
+
+
+-- runs
+-- Get all runs - past and future
+SELECT runs.id, runs.name, runs.description, runs.location, runs.time, runs.date, runs.planner_id 
+FROM runs;  
+
+-- Get all runs - past
+SELECT runs.name, runs.description, runs.location, runs.time, runs.date 
+FROM runs
+WHERE runs.date < CURRENT_DATE; 
+
+-- Get all runs - future
+SELECT runs.id, runs.name, runs.description, runs.location, runs.time, runs.date 
+FROM runs
+WHERE runs.date >= CURRENT_DATE; 
+
+-- Get specific run based on id
+SELECT runs.id, runs.name, runs.description, runs.location, runs.time, runs.date 
+FROM runs
+WHERE runs.id = 1; 
+
+-- Get all runs for a specific planner
+SELECT runs.id, users.id AS planner_id, runs.name, runs.description, runs.distance, runs.date,
+      (CASE WHEN runs.date >= CURRENT_DATE THEN TRUE
+            ELSE FALSE
+       END) AS future_run
+FROM runs
+JOIN users ON runs.planner_id = users.id
+WHERE runs.planner_id = 1;
+
+-- Get all runs for a specific user - planned or participated in NOT FINISHED SO FAR
+-- SELECT users.id AS user_id, runs.id AS run_id, runs.name, runs.description, runs.distance, runs.date, users_runs.time, users_runs.rating, 
+--       (CASE WHEN runs.date >= CURRENT_DATE THEN TRUE
+--             ELSE FALSE
+--        END) AS future_run,
+--       (CASE WHEN (users.planner = TRUE AND users.runner = TRUE AND users.id = runs.planner_id AND users_runs.runner_id = users.id) THEN 'B'
+--             WHEN (users.planner = TRUE AND users.runner = FALSE AND users.id = runs.planner_id) THEN 'P'
+--             WHEN (users.planner = TRUE AND users.runner = TRUE AND users_runs.runner_id = users.id) THEN 'R'
+--             WHEN (users.planner = FALSE AND users.runner = TRUE AND users_runs.runner_id = users.id) THEN 'R'
+--             ELSE 'NA'
+--        END) AS planned_run_both
+-- FROM users
+-- FULL OUTER JOIN runs ON users.id = runs.planner_id
+-- FULL OUTER JOIN users_runs ON users.id = users_runs.runner_id
+-- GROUP BY users.id, runs.id, users_runs.id
+-- ORDER BY users.id;
+
+-- Create a run
+INSERT INTO runs (name, description, location, distance, time, date, planner_id)
+VALUES ('Aberfoyle Park','Great running space full of trees.','212, Aberfoyle St., Aberfoyle, ON, L8T 8T5',5,'10:00:00','2022-05-23',1);
+
+
+
+-- users_runs
+-- Get all runs for a specific runner
+SELECT runs.id, users.id AS user_id, runs.name, runs.description, runs.distance, runs.date, users_runs.time, users_runs.rating, 
+      (CASE WHEN runs.date >= CURRENT_DATE THEN TRUE
+            ELSE FALSE
+       END) AS future_run
+FROM users_runs
+JOIN runs ON runs.id = users_runs.run_id
+JOIN users ON users_runs.runner_id = users.id
+WHERE users_runs.runner_id = 1;
+
+-- Join a run - only future runs
+INSERT INTO users_runs (time, rating, runner_id, run_id)
+      SELECT 0, 0, 1, 4
+      WHERE
+      EXISTS (
+            -- only future runs can be joined
+        SELECT *
+        FROM runs
+        WHERE runs.id = 4 AND runs.date >= CURRENT_DATE
+        LIMIT 1
+      ) AND 
+      NOT EXISTS (
+            -- runs can only be joined once
+        SELECT *
+        FROM users_runs
+        WHERE users_runs.run_id = 4 AND users_runs.runner_id = 1
+        LIMIT 1    
+      )
+      RETURNING *;
+
diff --git a/express-back-end/db/schema.sql b/express-back-end/db/schema.sql
@@ -0,0 +1,42 @@
+-- Reset database 
+-- \i db/schema.sql 
+-- \i db/seeds.sql 
+DROP TABLE IF EXISTS users CASCADE;
+DROP TABLE IF EXISTS runs CASCADE;
+DROP TABLE IF EXISTS users_runs CASCADE;
+
+CREATE TABLE users (
+  id SERIAL PRIMARY KEY NOT NULL,
+  name VARCHAR(255) NOT NULL,
+  email VARCHAR(255) NOT NULL,
+  password VARCHAR(255) NOT NULL,
+  phone VARCHAR(255),
+  gender VARCHAR(255),
+  age INTEGER,
+  planner BOOLEAN,
+  runner BOOLEAN
+);
+
+CREATE TABLE runs (
+  id SERIAL PRIMARY KEY NOT NULL,
+  name VARCHAR(255) NOT NULL,
+  description VARCHAR(255) NOT NULL,
+  location VARCHAR(255) NOT NULL,
+  distance INTEGER NOT NULL,
+  time TIME NOT NULL,
+  date DATE NOT NULL,
+  planner_id INTEGER REFERENCES users(id) ON DELETE CASCADE,
+  latitude DECIMAL(8,6) NOT NULL,
+  longitude DECIMAL(9,6) NOT NULL,
+  location_to VARCHAR(255) NOT NULL,
+  latitude_to DECIMAL(8,6) NOT NULL,
+  longitude_to DECIMAL(9,6) NOT NULL
+);
+
+CREATE TABLE users_runs (
+  id SERIAL PRIMARY KEY NOT NULL,
+  time INTEGER NOT NULL,
+  rating INTEGER,
+  runner_id INTEGER REFERENCES users(id) ON DELETE CASCADE,
+  run_id INTEGER REFERENCES runs(id) ON DELETE CASCADE
+);
diff --git a/express-back-end/db/seeds.sql b/express-back-end/db/seeds.sql
@@ -0,0 +1,37 @@
+-- users
+INSERT INTO users (name, email, password, phone, gender, age, planner, runner)
+VALUES ('Jane Doe','[email protected]','$2a$10$r9wYh1lcViQBfeIF13wUs.JSD7jdk.l0XLlBdySc.3FW/Z8dM2Z2e','111-111-1111','F',21,TRUE,TRUE),
+('John Doe','[email protected]','$2a$10$r9wYh1lcViQBfeIF13wUs.JSD7jdk.l0XLlBdySc.3FW/Z8dM2Z2e','222-222-2222','M',22,FALSE,TRUE),
+('Bob Roberts','[email protected]','$2a$10$r9wYh1lcViQBfeIF13wUs.JSD7jdk.l0XLlBdySc.3FW/Z8dM2Z2e','333-333-3333','M',23,TRUE,FALSE),
+('Lilly Smith','[email protected]','$2a$10$r9wYh1lcViQBfeIF13wUs.JSD7jdk.l0XLlBdySc.3FW/Z8dM2Z2e','444-444-4444','F',24,FALSE,TRUE);
+
+-- runs
+INSERT INTO runs (name, description, location, distance, time, date, planner_id, latitude, longitude, location_to, latitude_to, longitude_to)
+VALUES ('Aberfoyle Park','Great running space full of trees. You need the dark in order to show the light. These things happen automatically. All you have to do is just let them happen. You gotta think like a tree.','212, Aberfoyle St., Aberfoyle, ON, L8T 8T5',2,'10:00:00','2022-05-23', 1, 43.952347, -79.431323, '212, Aberfoyle St., Aberfoyle, ON, L8T 8T5', 43.972347, -79.531323),
+('Seaside Park','Beautiful view of the sea. We will lay all these little funky little things in there. Pretend you are water. Just floating without any effort. Having a good day. All kinds of happy little splashes.','213, Seaside St., Seaside, BC, K8L 8Y5',10,'10:00:00','2022-12-23', 1, 49.312464, -123.143101, '213, Seaside St., Seaside, BC, K8L 8Y5', 49.254969,-123.2037175),
+('Mountain Park','See mountains while you run. Maybe there is a little something happening right here. Think about a cloud. Just float around and be there. It looks so good, I might as well not stop.','412, Mountain St., Mountain, AB, O5Y 8F7',5,'09:00:00','2022-08-12',3, 50.979643, -114.098084, '412, Mountain St., Mountain, AB, O5Y 8F7', 50.979643, -114.098084),
+('Hidden Park','Quaint area far from the city hustle and bustle. Let your heart be your guide. Everything is not great in life, but we can still find beauty in it.','432, Hidden St., Hidden, QC, W4R 5T8',5,'08:00:00','2022-11-10',3, 45.499262,-73.570682,  '432, Hidden St., Hidden, QC, W4R 5T8', 45.5118111,-73.695578),
+('New Park','New surroundings. The light is your friend. Preserve it. Every single thing in the world has its own personality - and it is up to you to make friends with the little rascals.','432, New St., New, QC, W4R 5T8',10,'08:00:00','2022-8-10',3, 45.501836, -73.593265, '432, New St., New, QC, W4R 5T8', 45.501836, -73.593265 ),
+('Gargoyle Park','Great running space full of trees. I spend a lot of time walking around in the woods and talking to trees, and squirrels, and little rabbits and stuff. Just let these leaves jump.','212, Gargoyle St., Gargoyle, ON, L8T 8T5',5,'10:00:00','2023-11-23',1, 43.696061, -79.354618, '212, Gargoyle St., Gargoyle, ON, L8T 8T5', 43.6465479,-79.603766),
+('Bench Park','Beautiful view of the sea. Have fun with it. Everyone is going to see things differently - and that is the way it should be.','213, Bench St., Bench, BC, K8L 8Y5',5,'10:00:00','2023-12-23',1,49.313020, -124.212467, '213, Bench St., Bench, BC, K8L 8Y5', 49.1735987,-124.0967019 ),
+('Kananaskis Park','See mountains while you run. Just go out and talk to a tree. Make friends with it. All you have to do is let your imagination go wild.','412, Little Lougheed, Kananaskis, AB, O5Y 8F7',5,'09:00:00','2023-08-12',3,50.953012, -115.315435, '514, Little Lougheed, Kananaskis, AB, O5Y 8F7', 50.8899495,-115.3338652 ),
+('Forillon Park','Quaint area far from the city hustle and bustle. Go out on a limb - that is where the fruit is. Be brave. There is immense joy in just watching - watching all the little creatures in nature.','432, Greens St., Greens, QC, W4R 5T8',5,'08:30:00','2023-11-10',3,48.815195, -64.271882, '432, Greens St., Greens, QC, W4R 5T8', 48.7938742,-64.2611792 ),
+('Sentier des Dunes','New surroundings. That is when you can experience true joy, when you have no fear. We will paint one happy little tree right here. Be so very light. Be a gentle whisper.','432, Blue St., Quebec, QC, W4R 5T8',2,'08:00:00','2023-8-10',3, 46.998819, -71.191848, '432, Blue St., Quebec, QC, W4R 5T8', 48.1593378,-69.6794241),
+('Gibbons Park','Great running space full of trees. You have got to learn to fight the temptation to resist these things. Just let them happen. Work that paint. Just beat the devil out of it.','212, Smile St., London, ON, L8T 8T5',10,'10:00:00','2023-05-23',1, 42.998326, -81.259929, '212, Smile St., London, ON, L8T 8T5', 42.9649031,-81.3579601),
+('Wild Side Trail','Beautiful view of the sea. We spend so much of our life looking - but never seeing. This is your world, whatever makes you happy you can put in it. Go crazy. Use absolutely.','213, Wild St., Wild, BC, K8L 8Y5',5,'10:15:00','2023-12-23',1, 49.266271, -126.055370, '213, Wild St., Wild, BC, K8L 8Y5', 49.2662579,-126.0752572),
+('Old Fort Point','See mountains while you run. It is so important to do something every day that will make you happy. Maybe there is a happy little waterfall happening over here. These things happen.','412, Dog St., Jasper, AB, O5Y 8F7',2,'09:00:00','2023-08-12',3, 52.871019, -118.061465, '412, Dog St., Jasper, AB, O5Y 8F7', 52.8789656,-118.1053982),
+('Promenade de la Gorge Magog','Quaint area far from the city hustle and bustle. Let us make a nice big leafy tree. Almost everything is going to happen for you automatically - you do not have to spend any time.','432, High St., Sherbrooke, QC, W4R 5T8',5,'08:00:00','2023-11-10',3, 45.401880, -71.899518, '432, High St., Sherbrooke, QC, W4R 5T8', 45.4158576,-71.9524829 ),
+('Third Vault Falls','Let us make a nice big leafy tree. Almost everything is going to happen for you automatically - you do not have to spend any time working or worrying.We have a fantastic little sky!','432, 114 St., Bay of Fundy, NB, W4R 5T8',2,'08:00:00','2023-12-10',3, 45.617307, -65.024755, '432, 114 St., Bay of Fundy, NB, W4R 5T8', 45.6247906,-65.0960219);
+
+
+-- users_runs
+INSERT INTO users_runs (time, rating, runner_id, run_id)
+VALUES (45, 4, 1, 1),
+(60, 5, 2, 1),
+(0, 0, 1, 2),
+(0, 0, 2, 2),
+(0, 0, 4, 2),
+(89, 5, 1, 3),
+(0, 0, 2, 4),
+(0, 0, 4, 4);
+