rachael-t / run-local

A six day solo-project focused on React, Router, Async JS, and testing.

Run Local

Abstract

This project was a solo project during the third quarter at Turing School of Software & Design in which I was tasked with building a React app for a specific audience that ultiized an external API.

Run Local is a website for runners located in northwest Denver suburbs who are interested in finding new trails to run in their area. Runners can pick a city, see the weather for that selected city, and then get a list of local running trails nearby. They can review the trail details and save the trail if they'd like. Then, they can review all saved trails from any city to make a decision on which trail they'd like to run that day.

Currently, the cities featured in Run Local are: Arvada, Broomfield, Lafayette, Louisville, Superior, and Westminster.

The application can be found here.

Technologies Used

• React
• React Router
• React Testing Library
• Jest
• JavaScript
• OpenWeather API
• Trail Run Project API

Project Images / Gifs

Landing page:

Viewing a selected trail's detail page:

Switching cities:

Viewing saved trails:

Removing from saved:

Page displayed when a user has navigated to an incorrect URL:

Planning

Please see this Gist for the initial brainstorm and planning of this project.

Setup

1. Fork this repository.

2. Clone your forked repository.

3. Change into the directory and install the project dependencies by running npm install

4. Check that it is setup correctly by entering npm test in your terminal. All tests should be passing.

5. In your terminal, run npm start and then navigate to http://localhost:3000/ in your browser.

Learning Goals

• Use the technologies I've learned over the course of the quarter to demonstrate mastery in React, Router, and asynchronous JavaScript.

• Work within constraints to deliver a unique product for my audience which helps them in some way.

Future Iterations

• Ulitize Google Maps API to provide a map of the trail's location.

• Provide a more detailed daily forecast (versus the current weather conditions).

• Provide suggestions on running attire based on the current weather.

• Expand upon cities in the surrounding northwest Denver area for a user to search trails nearby.

• Allow users to select from a variety of distances from their selected city (it is currently limited to 5 miles).

Contributor

• Rachael Thomas

This project was bootstrapped with Create React App.

run-local's Issues

Loading State

As a user, I should see an icon/message letting me know that the data is being fetched and loaded.

Wireframing

Plan out the layout of the application and complete an initial wireframe.

Integration Testing

The project should be thoroughly tested at the integration level, considering the user's varied interactions with the site.

Setup Landing Page Component

When the app starts up on the root route, /, the user should be introduced to a welcome page with a dropdown asking the user to select a city.

Error Handling on Network Requests

As a user, I should see a message/understand if there are issues with the network requests.

Environment Variables

Tested locally in my browser via http://localhost:3000 before pushing PR and it was fetching correctly. However, after merging the PR and deploying to Netlify and Heroku it appears it's no longer working. Under Heroku Reveal Config Vars I added the API key information but it's still not working.

Select a city error message

An error message should appear if a user has not selected a city when clicking on "Find Trails" button.

SavedTrails Component

As a user, when I click on the "My Saved Trails" button, I should be routed to the savedtrails page to view all trails that I have saved. I should also have a link available to go back to the previously selected city's page.

LocationContainer Component

When the user has selected a city and clicked "find trails" and routed away from the root "/", the LocationContainer component should render and display:

• the selected city's name
• the selected city's weather
• map over and render the TrailCards component

Unit Testing

All components should have unit tests to ensure they are rendering properly.

TrailDetails Component

When a user clicks on the "View Trail Details" button, they will be routed to a details page that provides specific trail details, an option to save the trail to favorites, and a link to go back to see more trails for the previously selected location.

PropTypes for Components

All components receiving props should have PropType functionality added

Fetch Data

When the app renders, the trail and weather data should be fetched for the locations and stored to state.

Wrong Route Error Handling

As a user, if I am direct to a wrong route, there should be an error message and a link to bring me back to the base root "/"

SideBar Component

When the user has selected a city and clicked "find trails" and routed away from the root "/", the SideBar component should render.