Parks

React Redux with APIs Exercise, 05.11.2020 - 05.13.2020

By Tiffany Siu, Adela Darmansyah, Krista Rutz, Andriy Veremyeyev

---

Table of Contents

1. Description
   • Component Diagram/Wireframe
2. Setup/Installation Requirements
   • Requirements to Run
   • Instructions
   • Other Technologies Used
3. Notable Features
4. Specifications
   • User Stories
5. Screenshots
6. Test Case Example
7. Known Bugs
8. Support and Contact Details
9. License

---

Description

This is a front-end web application with full CRUD functionality. A user can view a list of all parks, add a new park, edit and delete an existing park. This application uses ParkAPI, a previously built C#/.NET API project, as the back-end that was deployed to Azure. The project was deployed multiple times on Netlify when completed (links in Setup section).

This project also contains Redux Thunk middleware, a custom written logger middleware, uses the Fetch library, and uses D3.js data visualization.

For the back-end API, a user can add information and locations of parks found in the US. The parks can be stored with a name, type (national or state), description, location/city, and state. The database can be searched for these properties with the correct route structure. States can also be stored in another table in the database and also holds the number of parks that are within that state. The number of parks updates when parks are added, deleted, or modified.

Component Diagram/Wireframe

Setup/Installation Requirements

Follow the instructions below to run this project locally.

Otherwise, this project is also deployed on Netlify and ready-to-use from Krista's repo, Tiffany's repo, Adela's repo, and Andriy's repo. We recommend using a CORS blocker app or a Chrome extension like this to access the API, as the backend is not set to receive Cross-Origin requests, even when using our deployed sites.

Requirements to Run

• Web Browser
• Webpack
• Node.js
• NPM
• React
• Redux

Instructions

This page may be viewed by:

1. Download and install Node.js from the official website
2. Install CORS Unblock, a Chrome (or other browser) extension to prevent CORS errors.
3. Clone the repository from my GitHub page
4. Use a command line/Bash to move to the project directory with cd project-directory
5. Run npm install to get all dependencies.
6. Run npm start to start up the program
7. Open http://localhost:3000 to view it in the browser and turn on CORS Unblock to see the site.

Other Technologies Used

• HTML
• CSS
• Javascript
• Redux Thunk
• Fetch Library
• Azure
• D3.js
• ESLint
• Babel
• Jest
• Markdown
• C#
• .NET API
• Netlify
• CORS Unblock Browser Extension
• Semantic UI
• D3 Library
• State Choropleth API

Notable Features

The database for this project is deployed in Azure while the front end was built in React locally and is able to make calls to the deployed API to modify the database. It has a D3.js data visualization map that is color coded to number of parks in the database that is located in that state with tooltips that pop up with mouseover. The resulting application was also deployed using Netlify on multiple accounts.

Specifications

Expand to view API Specifications

Specification	Input	Output
The api displays a home screen with Swagger	Application start	Welcome screen displayed with all possible API calls
The api is able to show all parks when GET method is used	GET http://localhost:5000/api/parks	Displays all parks with info
The api is able to show all states when GET method is used	GET http://localhost:5000/api/states	Displays all states with info
The api is able to show all national or state parks (or other properties) when GET method is used with parameters	GET http://localhost:5000/api/parks?type={national/state}	Displays all national or state parks with info
The api is able to show all national or state parks (or other properties) when GET method is used with a general search	GET http://localhost:5000/api/parks/search	Displays all national or state parks with info matching search
The api is able to show 3 random parks when GET method	GET http://localhost:5000/api/parks/random	Displays 3 random parks with info
The api is able to show all parks for a state when GET method is used with multiple parameters	GET http://localhost:5000/api/parks?state={stateName}&type={national/state}	Displays all state parks for that state with info
The api is able to add parks with POST methods	POST http://localhost:5000/api/parks	Adds new park with provided info and increase count of parks for that state
The api is able to edit/update existing parks with PUT method	PUT http://localhost:5000/api/{id}	Update existing park with provided info and correct counts of parks for that state
The api is able to delete existing parks with DELETE method	DELETE http://localhost:5000/api/{id}	Delete park from database and decrease count of parks for that state

User Stories

Screenshots

Here is a snippet of what the homepage looks like:

Here is a preview of what the park details look like:

Expand to view More Screenshots

Here is a preview of what the park add form looks like:

Here is a preview of what the D3.js data visualization map and park list looks like:

Test Case Examples

Tests are done through Jest and are run from the command line prompt with npm test.

Known Bugs

Data Visualization requires refresh page to see most recent change to data

Support and contact details

If there are any question or concerns please contact us at our emails: Tiffany Siu, Adela Darmansyah, Krista Rutz, and Andriy Veremyeyev. Thank you.

License

This software is licensed under the MIT license

Copyright (c) 2020 Tiffany Siu, Adela Darmansyah, Krista Rutz, Andriy Veremyeyev