- Description
- Setup/Installation Requirements
- Notable Features
- Specifications
- Screenshots
- Test Case Example
- Known Bugs
- Support and Contact Details
- License
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.
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.
- Web Browser
- Webpack
- Node.js
- NPM
- React
- Redux
This page may be viewed by:
- Download and install Node.js from the official website
- Install CORS Unblock, a Chrome (or other browser) extension to prevent CORS errors.
- Clone the repository from my GitHub page
- Use a command line/Bash to move to the project directory with
cd project-directory - Run
npm installto get all dependencies. - Run
npm startto start up the program - Open http://localhost:3000 to view it in the browser and turn on CORS Unblock to see the site.
- 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
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.
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 |
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:
Tests are done through Jest and are run from the command line prompt with npm test.
Data Visualization requires refresh page to see most recent change to data
If there are any question or concerns please contact us at our emails: Tiffany Siu, Adela Darmansyah, Krista Rutz, and Andriy Veremyeyev. Thank you.
This software is licensed under the MIT license
Copyright (c) 2020 Tiffany Siu, Adela Darmansyah, Krista Rutz, Andriy Veremyeyev