Skip to content

ayohana/parks-redux

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

21 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Redux with APIs Exercise, 05.11.2020 - 05.13.2020

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

Project Status: Inactive – The project has reached a stable, usable state but is no longer being actively developed; support/maintenance will be provided as time allows. LastCommit Languages MIT license


Table of Contents

  1. Description
  2. Setup/Installation Requirements
  3. Notable Features
  4. Specifications
  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

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:

Snippet of the homepage

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

Snippet of park details

Expand to view More Screenshots

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

Snippet of park add form

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

Snippet of data visualization map and park list

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

About

React/Redux Thunk with APIs Exercise

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •