Creating Home Page

[theNatePi]

Tasks

Your task is to implement the home page shown on the Figma.
This page will be used to show all upcoming Programs (events/classes).

Warning

Before, we have always called "Events" (in the db) "Classes". Going forward, "Events" will be referred to as "Programs"
This may be updated in the future in the DB. For now, use "Programs" on all client-facing pages, and use "Events" on all backend code.

This page should be created in:
/lpa/client/src/components/home/Home.jsx
This page should be at the URL:
localhost/home

---

This task requires you to create the following:

1. Home page

This page should match this Figma
See comments on the Figma for what features to implement and to ignore.
Add the below components for the programs list.

2. Programs Table

Create a table to display upcoming programs.
Put the component in /lpa/client/src/components/home/HomeComponents.jsx
Pass all data to the component from the page. Do not make any DB queries inside of the component.
See comments on Figma for more details.
Use this component for the table

---

Important

When getting data from the DB, always do the following:

1. Check: Is there already a DB endpoint which gives me ALL of the data I need, without having to modify it in JS?
2. Add: A new endpoint that uses SQL to get all relevant data on the backend. For example, you might create a new endpoint to get all payees for an event, instead of getting all clients and filtering them locally
3. Finally: Use JS to filter results if the above two options wont work

ALSO: If possible, dont make calls which get you duplicate data. If one call to the DB gets you all program data, keep using that data rather than making another query.
Why? It is faster to query data in SQL than it is to filter it in JS on the client side.

Note

This is a large task. Please start early and ask any questions that come up as soon as possible.

---

Resources

• Use the Chakra Table component
• Use other Chakra components when possible

Using Figma dev mode

When in Figma dev mode, you can see all of the colors, spacing, border radius, etc. Please try to use these values when possible, and match the design otherwise

Deliverables (please check off as you go!):

• Home page completed
  • Tested on programs in DB
• Program table component completed
  • Added to the home page
  • Filtering works on the table
  • Tested