Rocket Academy Bootcamp
  • 🚀Welcome to Bootcamp!
  • 🛠️Logistics
    • Course Schedules
    • Course Methodology
    • Required Software
    • LinkedIn Education Badge
  • 📚General Reference
    • Naming, Casing, and Commenting Conventions
    • VS Code Tips
    • Recommended Resources
  • 🪨0: Foundations
    • 0.1: Command Line
    • 0.2: Git
      • 0.2.1: Branches
    • 0.3: GitHub
      • 0.3.1: Pull Requests
    • 0.4: JavaScript
      • 0.4.1: ES6
      • 0.4.2: Common Syntax
      • 0.4.3: Reference vs Value
      • 0.4.4: Classes
      • 0.4.5: Destructuring and Spread Operator
      • 0.4.6: Promises
        • 0.4.6.1: Async Await
    • 0.5: Node.js
      • 0.5.1: Node Modules
      • 0.5.2: NPM
      • 0.5.3: Nodemon
  • 🖼️1: Frontend
    • 1.1: HTML
    • 1.2: CSS
      • 1.2.1: Layout
    • 1.3: React
      • Styling in ReactJs
      • Using Styling Libraries with React
      • React Deployment
    • 1.E: Exercises
      • 1.E.1: Recipe Site
      • 1.E.2: Portfolio Page
      • 1.E.3: World Clock
      • 1.E.4: High Card
      • 1.E.5: Guess The Word
    • 1.P: Frontend App
  • 🏭2: Full Stack
    • 2.1: Internet 101
      • 2.1.1: Chrome DevTools Network Panel
      • 2.1.2: HTTP Requests and Responses
    • 2.2: Advanced React
      • 2.2.1: AJAX
      • 2.2.2: React Router
      • 2.2.3: useContext
      • 2.2.4: useReducer
      • 2.2.5: Environmental Variables
      • 2.2.6: React useMemo - useCallback
    • 2.3: Firebase
      • 2.3.1: Firebase Realtime Database
      • 2.3.2: Firebase Storage
      • 2.3.3: Firebase Authentication
      • 2.3.4: Firebase Hosting
      • 2.3.5: Firebase Techniques
    • 2.E: Exercises
      • 2.E.1: Weather App
      • 2.E.2: Instagram Chat
      • 2.E.3: Instagram Posts
      • 2.E.4: Instagram Auth
      • 2.E.5: Instagram Routes
    • 2.P: Full-Stack App (Firebase)
  • 🤖3: Backend
    • 3.1: Express.js
      • 3.1.1 : MVC
    • 3.2: SQL
      • 3.2.1: SQL 1-M Relationships
      • 3.2.2: SQL M-M Relationships
      • 3.2.3: SQL Schema Design
      • 3.2.4: Advanced SQL Concepts
      • 3.2.5: SQL - Express
      • 3.2.6: DBeaver
    • 3.3: Sequelize
      • 3.3.1: Sequelize One-To-Many (1-M) Relationships
      • 3.3.2: Sequelize Many-To-Many (M-M) Relationships
      • 3.3.3: Advanced Sequelize Concepts
      • 3.3.4 Database Design
    • 3.4: Authentication
      • 3.4.1: JWT App
    • 3.5: Application Deployment
    • 3.E: Exercises
      • 3.E.1: Bigfoot JSON
      • 3.E.2: Bigfoot SQL
      • 3.E.3: Bigfoot SQL 1-M
      • 3.E.4: Bigfoot SQL M-M
      • 3.E.5: Carousell Schema Design
      • 3.E.6: Carousell Auth
    • 3.P: Full-Stack App (Express)
  • 🏞️4: Capstone
    • 4.1: Testing
      • 4.1.1: Frontend React Testing
      • 4.1.2: Backend Expressjs Testing
    • 4.2: Continuous Integration
      • 4.2.1 Continuous Deployment (Fly.io)
      • 4.2.2: Circle Ci
    • 4.3: TypeScript
    • 4.4: Security
    • 4.5: ChatGPT for SWE
    • 4.6: Soft Skills for SWE
    • 4.P: Capstone
  • 🧮Algorithms
    • A.1: Data Structures
      • A.1.1: Arrays
        • A.1.1.1: Binary Search
        • A.1.1.2: Sliding Windows
      • A.1.2: Hash Tables
      • A.1.3: Stacks
      • A.1.4: Queues
      • A.1.5: Linked Lists
      • A.1.6: Trees
      • A.1.7: Graphs
      • A.1.8: Heaps
    • A.2: Complexity Analysis
    • A.3: Object-Oriented Programming
    • A.4: Recursion
    • A.5: Dynamic Programming
    • A.6: Bit Manipulation
    • A.7: Python
  • 💼Interview Prep
    • IP.1: Job Application Strategy
    • IP.2: Resume
    • IP.3: Portfolio
Powered by GitBook
On this page
  • Learning Objectives
  • Introduction
  • Setup
  • Base: Retrieve Sightings
  • Starter Code
  • Retrieve sighting data in frontend from backend
  • Retrieve individual sighting data
  • Store backend URL in constant variable
  • Comfortable: Filter Sightings
  • More Comfortable: Sort Sightings
  • Submission
  • Reference Solution
  1. 3: Backend
  2. 3.E: Exercises

3.E.1: Bigfoot JSON

Previous3.E: ExercisesNext3.E.2: Bigfoot SQL

Last updated 1 year ago

Learning Objectives

  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

Introduction

We will build an app that records and displays sightings with an Express backend. We will build on this app in coming exercises to incorporate SQL and Sequelize.

Setup

  1. Fork and clone the

  2. Fork and clone the

  3. Copy and paste .env.sample into the repository

  4. Rename the duplicate file to .env

  5. Change the PORT environment variable to 3000

Base: Retrieve Sightings

Starter Code

JSON Backend Repo

Rocket has provided starter code in index.js that responds to server requests to /sightings with all sighting data. The utilities module utils.js exports a function getSightings that reads sightings data from sightings.json. We are using sightings.json in lieu of a database because we have not yet learnt SQL, and in coming exercises we will replace sightings.json with a SQL database.

To run the backend server, install packages with npm i and run the script node index.js. This will start the server at localhost:3000.

Frontend Repo

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 i to install packages and npm run dev to compile our files and then open the browser of your choice at the site "http://localhost5173".

Retrieve sighting data in frontend from backend

  1. Verify the backend API /sightings is working as expected by starting the backend server as per above instructions and sending a request to localhost:3000 in Thunder Client. The API request is localhost:3000/sightings it 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.

  3. Add cors to our backend. Without cors we 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."

Retrieve individual sighting data

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/:sightingIndex that returns data for the sighting at the sighting index in URL params. Sighting index refers to the sighting's index in sightings.json in 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

    1. Rocket recommends the frontend route /sightings/:sightingIndex for individual sighting routes for clarity of communication

  3. When we navigate directly to the URL for an individual sighting, e.g. localhost:5173/sightings/1, render that specific sighting's page.

Store backend URL in constant variable

We will store a single instance of our backend URL BACKEND_URL in a new file constants.jsx that 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.

For now, create a new file constants.jsx and add the following content.

export const BACKEND_URL = "http://localhost:3000";

Then update all references to http://localhost:3000 in our components to import and use the BACKEND_URL constant variable.

Comfortable: Filter Sightings

Update the backend root route /sightings to 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.

More Comfortable: Sort Sightings

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.

Submission

Submit pull requests to the main branches 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.

Reference Solution

If using useEffect, consider passing a to useEffect to optimise performance and prevent unnecessary renders.

Consider using to re-use UI logic, to retrieve individual sighting indexes from URLs, and an to render the full sighting list. You can also use to update your frontend URL.

Consider using to navigate between pages

When we deploy our app to production in later exercises we can write logic in constants.jsx to set BACKEND_URL based on the value of Vitejs built-in environment variable . NODE_ENV will tell us which development environment we are in ("development", "test", or "production"), allowing us to set BACKEND_URL accordingly.

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 to reflect filter settings in the URL.

Here is reference code for the and the for this exercise. You can do better!

🤖
Bigfoot
Rocket Academy Bigfoot JSON Backend repo
Rocket Academy Bigfoot Frontend repo
dependency array as a 2nd parameter
nested routes
URL params
index route
useSearchParams
Link components
import.meta.env.VITE_SOME_NODE_ENV
URL search params
frontend
backend