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: Split Home and AuthForm pages into separate routes
  • Comfortable: Dedicated page and route for each post
  • More Comfortable: Navbar, chat page
  • Submission
  • Reference Solution
  1. 2: Full Stack
  2. 2.E: Exercises

2.E.5: Instagram Routes

Previous2.E.4: Instagram AuthNext2.P: Full-Stack App (Firebase)

Last updated 1 year ago

Learning Objectives

  1. Understand how to use React Router to build React apps with multiple URL paths

  2. Understand how to split component logic to effectively have multiple pages served by the same React app

  3. Understand how to refactor class components to be functional components with React Hooks

  4. Understand how to deploy an app with Firebase Hosting

  5. Know how to read documentation to apply a new technology

Introduction

We will build on previous Instagram exercises to incorporate React Router and create standalone pages for each post with relevant URLs.

Setup

  1. Start with the code we wrote in the previous exercise in our forked and cloned copy of the

  2. Set up React Router in our repo as per the official

  3. Practice safe sharing, create implement your .env so that you do not share your Firebase credentials online when pushing to GitHub.

We will deploy on Firebase Hosting instead of GitHub Pages

Base: Split Home and AuthForm pages into separate routes

Now that we will use Links and Routes to navigate between our auth form and news feed, we no longer need shouldRenderAuthForm state and the toggleAuthForm method to determine whether to render the auth form. We can remove all mentions of shouldRenderAuthForm and toggleAuthForm from App, and update toggleAuthForm usage to either a React Router Link to /authform or useNavigate/navigate to / after auth form submission.

You may remember that we cannot use React Hooks in class components. There is no need to rewrite all of our components to be functional components, but we will need to rewrite ones such as AuthForm that need the React Router useNavigate hook.

Comfortable: Dedicated page and route for each post

More Comfortable: Navbar, chat page

Re-create our chat page from Instagram Chat as a separate component. Add a navigation bar to the app and allow users to toggle between news feed and chat pages via navigation links. Toggling between features updates the app URL for the relevant feature.

Submission

Submit a pull request to the main branch of Rocket's Instagram repo and share your PR link in your section Slack channel.

Reference Solution

You may see the following warning from Chrome when visiting the reference deployment. This may be because Rocket used "Instagram" as our app name and we have "instagram" in our URL. To visit the site anyway, click "Details" and "visit this unsafe site" like in the screenshots below.

In Instagram Auth we created an AuthForm component that renders instead of the NewsFeed component when our user wants to sign in. We will now create separate routes for AuthForm (/authform) and NewsFeed (/) components to make it easier for users to navigate to the auth form and news feed respectively. Consider referring back to the ..

Clicking on posts in the news feed navigates to a standalone page for the clicked post. The standalone page should have a URL that uniquely identifies that post, and a back button to get back to the news feed. Create a new component in a new file for pages for individual posts. We may find in React Router helpful for creating and using a relevant URL for each post.

If you would like to deploy your app to the internet, follow Vitejs GitHub Pages . Note that you will need to add the repo name within React Router's to and path properties.

Here is and a for this exercise. You can do better!

🏭
Rocket Academy Instagram starter repo
React Router documentation
React Router Implementation section
Reading URL Params
deployment instructions here
reference code
reference deployment
Chrome warns us of deceptive sites. Source: Rocket Academy
To visit the site anyway, click "visit this unsafe site". Source: Rocket Academy