Hike Finder

Author: Carly Dekock

Link to GitHub repo here

Deployed Link: https://hike-finder.netlify.app/

Application Info

• Hike Finder is an authenticated hiking trails API.
• Server hosted on Heroku with a PostgreSQL database, and front-end on Netlify
• First, a user must sign in or create an account through Auth0 to gain access to the site.
• Then, a user will have access to the database of local hiking trails.
• Users can view and add to the database, as well as update hike information or remove no longer accessible hikes.
• Can view trip reports from other users on current trail conditions, and can leave trip reports themselves.
• Has a listing of all hikes in the database, and a user's contributed hikes.

Project Plan: User Stories, DB Schema and Wireframes here

What You Need

• Auth0 account
• Server side .env file should contain:
  • PORT
  • PGUSER
  • PGPASSWORD
  • PGDATABASE
  • PGPORT
  • REACT_APP_AUTH0_DOMAIN
  • REACT_APP_AUTH0_CLIENT_ID
  • CLIENT_ORIGIN
  • REACT_APP_AUTH0_AUDIENCE
  • For mock postgres db testing: SUB
• Client side .env file should contain:
  • REACT_APP_AUTH0_DOMAIN
  • REACT_APP_AUTH0_CLIENT_ID
  • REACT_APP_AUTH0_AUDIENCE
• Other dependencies:
  • Server side: axios, body-parser, cors, dotenv, express, express-jwt, express-jwt-authz, helmet, jest, jwks-rsa, mock-jwks, morgan, nock, nodemon, pg, supertest
  • Client side: axios, cypress, react, react-dom, react-router-dom, @auth0/auth0-react

Notes on Testing

• Testing files included for server-side Jest testing, client-side Cypress testing and basic react-dom testing
• Some Cypress testing working for deployed site, all working locally due with manual login to Auth0 (troubleshooting errors on passing of user credentials)
• To test locally: change to localhost:3001 in cypress.json file and localhost:3000 in HikeFinder api file

Main docs for reference troubleshooting

• Auth0 docs here
• Cypress docs here
• Example spec from Auth0 developer here and here, relevant GitHub issues link here
• Cypress examples on GitHub here
• Cypress testing docs here, env variables here
• Further documentation on authorization code flow from Auth0
• More info on failed redirects from Cypress Github issues here

How To Use

1. The home screen will prompt you to login.

2. Once you click login, fill in your credentials or click Sign Up on the Auth0 login screen.

3. Once you've successfully logged in or signed up, you'll be brought to the home screen where you can view hikes information.

Resources

• Ideas and hike info from WTA
• FreeCodeCamp tutorial on building a fullstack application with React and Node.js here
• Auth0 documentation and QuickStart guide for React Single-Page-App
• React and Auth0 Crash Course and Workshop video by Auth0
• Auth0 SDK for React Single Page Apps info and docs
• Setting up React context to share user info across site article
• Unit testing token verification for Auth0 using Jest and mock-jwks article
• Testing PostgreSQL database here
• Mock postgres database for unit testing with jest and supertest here
• Form styling: Bootstrap docs
• Troubleshooting Heroku/PostgreSQL DB connection StackOverflow
• Deploying a PERN fullstack app from one repo on Heroku and Netlify article here
• Troubleshooting React component testing with router StackOverflow
• Cypress testing error message StackOverflow
• Cypress and Auth0 testing: Auth0Blog and Cypress Docs
• Cypress and Auth0 login testing troubleshooting: Auth0 Community Blog
• Cypress testing process not defined error StackOverflow
• Cypress end-to-end testing with Auth0 blog post
• Cypress app example and end-to-end testing with Cypress documentation here
• Regex to remove quotes for variable used in database query, from StackOverflow
• PostgreSQL docs for doing a full text search
• Refreshing a page in React from Upmostly
• Weatherbit API docs

Tech Used

React, Node.js, Auth0, PostgreSQL, Bootstrap