LAB | React Stack Tracker

Learning Goals

This exercise allows you to practice and apply the concepts and techniques taught in class.

Upon completion of this exercise, you will be able to:

Install and set up React Router
Use React Router to create a React application that contains multiple pages
Use React Router hook useParams to access URL parameters.
Create page components that dynamically render content based on URL parameter values.
Use React Router hook useSearchParams to access URL query strings.

Introduction

Have you ever wondered which tech stacks power your favorite apps and what programming languages are used by the top tech companies? Needless to ask, being a developer, you must have! Now, it's time to turn that curiosity into action.

Welcome to Stack Tracker, the app for exploring the technology landscape and tech stacks of top tech companies, ready to be built by you!

Setup

Fork this repo
Clone this repo

Open the LAB and start:

cd lab-react-stack-tracker
npm install
npm run dev

Submission

Upon completion, run the following commands:

git add .
git commit -m "done"
git push origin master

Create a Pull Request and submit your assignment.

Instructions

Iteration 0 | Getting Started

Install Dependencies

The application you will use React Router for setting up multiple pages and handling navigation.

To begin, install React Router package:

npm install react-router-dom

JSON Datasets

The data that you will use in this exercise is located in the files src/companies.json and src/technologies.json. We suggest you also take a moment and go over the files and get familiar with the structure of the objects. The data (objects) stored in these files have the following structure:

Example: companies.json objects

{
  "id": "7a735bb6-cfaa-4616-9a68-cbd243e0bb82",
  "companyName": "Google",
  "website": "www.google.com",
  "logo": "https://www.example.com/company-logo.png",
  "techStack": [
    {
      "name": "Go",
      "slug": "go",
      "image": "https://example.com/go-logo.png"
    },
    {
      "name": "JavaScript",
      "slug": "javascript",
      "image": "https://example.com/javascript-logo.png"
    }
  ]
}

Example: technologies.json objects

{
  "id": "0c13d729-b0e1-4f75-81e6-446e07b019a6",
  "slug": "react",
  "name": "React",
  "description": "A JavaScript library for building user interfaces...",
  "image": "https://example.com/react-logo.png"
}

Iteration 1 | Import Data

In this iteration, we will do the initial setup and use the state to store the data that we will use in the app.

In the App component, import the json datasets from the files src/companies.json and src/technologies.json and save them in the state as separate state variables.

Iteration 2 | Create Components

Inside the src folder, we have two separate folders named components and pages, one used for storing all the individual components and the other for storing the complete pages.

Create the following components in their respective folders:

Components Folder - src/components

Navbar component:
- File: src/components/Navbar.jsx:
- Should display a nav element with the text: "StackTracker".

Pages Folder - src/pages

HomePage component:
- File: src/pages/HomePage.jsx:
- Should display a headline with the text: "StackTracker: Discover Tech Stacks Used by Top Companies"
CompanyPage component:
- File: src/pages/CompanyPage.jsx:
- Should display a headline with the text: "Company Profile"
TechnologyPage component:
- File: src/pages/TechnologyPage.jsx:
- Should display a headline with the text: "Technology Details"

See Expected Result

HomePage:

CompanyPage:

TechnologyPage:

Iteration 3 | Setup React Router and Create Routes

After creating the components, it is time to take the next step and set up React Router to handle navigation and create multiple pages in your app.

Set up React Router in your src/main.jsx file:

// src/main.jsx
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";

import { BrowserRouter as Router } from "react-router-dom";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>
);

In your App.jsx set up three routes that render the following pages:

Route /, which renders the HomePage component
Route /company/:companySlug, which renders the CompanyPage component
Route /tech/:slug, which renders the TechnologyPage component

Once you set up the routes, your app should render two pages as shown in the expected result below.

See Expected Result

Iteration 4 | Display Companies as a List

In the HomePage component, render the list of companies.

Each list item should be a React Router Link showing the company name and logo.

The component should take 1 prop:

companies: The array of companies coming from the App. This is the data from companies.json that you stored in the state of App in Iteration 1.

To allow users to navigate to a specific company's details page, embed the company's slug in the URL for each Link. When any of the company name on the HomePage are clicked, the company slug should show up in the URL, and the user should be navigated to the company details page (CompanyPage).

See Expected Result

Iteration 5 | Show Company Details

In this iteration, you will work on the CompanyPage component to display the information of a specific company.

The component should take 1 prop:

companies: The array of companies coming from the App.

5.1 | Access URL Parameters

When a company name link on the HomePage is clicked, the user should be navigated to the CompanyPage, and the company slug should be available as a URL parameter.

To access the URL parameters from the browser's URL bar, use the React Router hook useParams.

If you need a reminder on how to set up the useParams hook and access the URL parameters, check this example.

5.2 | Show Company Details

To retrieve the data for a specific company, you should iterate over the array of companies that is passed as a prop and find the company with a matching slug property.

Once you have the company data render the company name, website, description, and logo.

See Expected Result

5.3 | Show Company's Tech Stack

Next, render the tech stack of the company as a list of links.

For each technology, display its name and image, and wrap them in a React Router Link component to make them clickable links. To allow users to navigate to a technology details page, embed the technology slug in the URL of the Link.

See Expected Result

Bonus: Iteration 6 | Technology Details

In this iteration, you will work on the TechologyPage component to display information about a specific technology.

The component should take 1 prop:

technologies: The array coming from the App. This is the data from technologies.json that you stored in the state of App in Iteration 1.

6.1 | Access URL Parameters

When a technology link on the CompanyPage is clicked, the user should be navigated to the TechologyPage, and the technology slug (name) should be available as a URL parameter.

To access the URL parameters from the browser's URL bar, use the React Router hook useParams.

If you need a reminder on how to set up the useParams hook and access the URL parameters, check this example.

6.2 | Show Technology Details

To retrieve the info of a specific technology, you should iterate over the array of technologies that is passed as a prop, and find the one with a matching slug property.

Once you have it, render the technology name, image, and description.

See Expected Result

Bonus: Iteration 7 | Back to Visited Company

In this iteration, you should implement a back button in the TechnologyPage component that allows users to navigate back to the page of the company they visited previously. Here is how to do it:

When the user navigates from a CompanyPage to a TechnologyPage, include a query string in the URL containing a slug (name) of the current company. Next, on the TechnologyPage, retrieve the query string using useSearchParams() and create a Back button that navigates the user back to the CompanyPage of the last visited company.

See Expected Result

Bonus: Iteration 8 | Styling

Now that your application is fully functional, it could use a bit of aesthetic touch. This is your chance to get creative, start adding some styles to make your app "pop"!

Happy coding! 💙

FAQs

I am stuck and don't know how to solve the problem or where to start. What should I do?

If you are stuck in your code and don't know how to solve the problem or where to start, you should take a step back and try to form a clear question about the specific issue you are facing. This will help you narrow down the problem and come up with potential solutions.

For example, is it a concept that you don't understand, or are you receiving an error message that you don't know how to fix? It is usually helpful to try to state the problem as clearly as possible, including any error messages you are receiving. This can help you communicate the issue to others and potentially get help from classmates or online resources.

Once you have a clear understanding of the problem, you will be able to start working toward the solution.

How do you set up the React Router in a React app?

To set up the React Router in your React application, follow these steps:

Install React Router package by running the following command from the root folder:

npm install react-router-dom

Import the BrowserRouter component in your app's entry point (usually main.jsx) and wrap your <App /> component with it:

import { BrowserRouter as Router } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>
);

Import the components Routes and Route in App.js:

import { Routes, Route } from "react-router-dom";

Define the routes (pages) in your app using the components Routes and Route component:

import { Routes, Route } from "react-router-dom";
import HomePage from "./pages/HomePage";
import AboutPage from "./pages/AboutPage";

function App() {
  return (
    <div className="App">
      {/* Add <Route /> components between <Routes> </Routes>   */}
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
      </Routes>
    </div>
  );
}

export default App;

I am getting an error: "not defined". How do I fix it?

The "ReferenceError: variable is not defined" error in JavaScript occurs when you try to access a variable or a function that has not been defined yet or is out of scope.

To fix the issue, check that you have defined the variable or function that you are trying to use and double-check the spelling to make sure you are using the correct name.

In case the variable or a function is defined in another file, make sure that the file has been imported or loaded correctly.

I am unable to push changes to the repository. What should I do?

There are a couple of possible reasons why you may be unable to push changes to a Git repository:

You have not committed your changes: Before you can push your changes to the repository, you need to commit them using the git commit command. Make sure you have committed your changes and try pushing again. To do this, run the following terminal commands from the project folder:
```
git add .
git commit -m "Your commit message"
git push
```

You do not have permission to push to the repository: If you have cloned the repository directly from the main Ironhack repository without making a Fork first, you do not have write access to the repository. To check which remote repository you have cloned, run the following terminal command from the project folder:
```
git remote -v
```
If the link shown is the same as the main Ironhack repository, you will need to fork the repository to your GitHub account first, and then clone your fork to your local machine to be able to push the changes.

Note: You may want to make a copy of the code you have locally, to avoid losing it in the process.

weblisbonta / lab-react-stack-tracker Goto Github PK