3.E.1: Bigfoot JSON
- 1.Understand how to set up Express server to receive requests and respond with data
- 2.Understand how to set up CORS to allow access to server from different origin server
Rocket has provided starter code in
index.jsthat responds to server requests to
/sightingswith all sighting data. The utilities module
utils.jsexports a function
getSightingsthat reads sightings data from
sightings.json. We are using
sightings.jsonin lieu of a database because we have not yet learnt SQL, and in coming exercises we will replace
sightings.jsonwith a SQL database.
To run the backend server, install packages with
npm iand run the script
npm start. This will start the server at
Rocket has provided generic starter code for us to customise for Bigfoot. We will use this frontend repo for all Bigfoot exercises, even after switching to SQL in our backend.
To run the frontend repo, run
npm ito install packages and
npm startto compile our files and load them in the browser. We may see a prompt asking whether we want to run our app on a different port because Express is already using port
3000. Answer yes to this prompt.
- 1.Verify the backend API
/sightingsis working as expected by starting the backend server as per above instructions and sending a request to
localhost:3000in Thunder Client. The API request is
localhost:3000/sightingsit should respond with all sightings in JSON format.
- 2.Write code in our frontend app to query the backend API on component mount and render all sightings on the page. Feel free to only render basic info for each sighting such as year, season and month. Remember to store sightings in state, which will trigger a re-render, instead of trying to query the backend API on every render, which would be inefficient.
corsto our backend. Without
corswe may notice that the data is not loading in our frontend, and we get the following error in our browser console: "Access to XMLHttpRequest at 'http://localhost:3000/' from origin 'http://localhost:3001' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."
Render basic sighting info for each sighting in the sightings list on the homepage. When we click on an individual sighting, navigate to a separate page that renders the full data for that specific sighting.
- 1.Create a new route in the backend
/sightings/:sightingIndexthat returns data for the sighting at the sighting index in URL params. Sighting index refers to the sighting's index in
sightings.jsonin the backend.
- 2.Use React Router to implement frontend routing for the homepage and individual sighting pages, and include a back button on the individual sighting pages to go back to the homepage
- 2.Rocket recommends the frontend route
/sightings/:sightingIndexfor individual sighting routes for clarity of communication
- 3.When we navigate directly to the URL for an individual sighting, e.g.
localhost:3001/sightings/1, render that specific sighting's page.
We will store a single instance of our backend URL
BACKEND_URLin a new file
constants.jsthat we reference everywhere we need the backend URL. We do this because our backend URL will change depending on whether we run our app locally or in production, and we do not want to update a hard-coded backend URL in our code every time we switch between local and production environments, nor declare redundant logic to determine the correct backend URL in each component that uses the backend URL.
When we deploy our app to production in later exercises we can write logic in
BACKEND_URLbased on the value of CRA's built-in environment variable
NODE_ENVwill tell us which development environment we are in ("development", "test", or "production"), allowing us to set
For now, create a new file
constants.jsand add the following content.
export const BACKEND_URL = "http://localhost:3000";
Then update all references to
http://localhost:3000in our components to import and use the
Create filter functionality in frontend UI that allows users to filter sightings by their attributes. For example, filtering by the year 1990 would render only sightings in 1990. Use URL search params to reflect filter settings in the URL.
Update the backend root route
/sightingsto retrieve only the filtered data (if there is a filter) using URL query parameters. Do not retrieve all sightings from the backend and filter on the frontend.
Create sort functionality in frontend UI that allows users to sort sightings by specified sighting attributes and in either ascending or descending order. Sorting should happen in addition to filtering. Feel free to perform sorting on either frontend or backend, and if sorting is on backend, send the sort parameters as query parameters like what we did with the filter feature.
Submit pull requests to the
mainbranches of Rocket's Bigfoot Frontend and Bigfoot JSON Backend repos respectively, and share your PR links in your section Slack channel.
There is no need to deploy this exercise for now. We will build on it in upcoming Bigfoot exercises and replace our JSON database with a SQL database before deploying.