Create resources forms and search functionality

[h0ethan04]

READ ALL INSTRUCTIONS BEFORE STARTING

• Note:
  • When working on the frontend, we want to work from making sure the site is responsive starting from a mobile device (this will make it easier when we modifying the styling for bigger screens)
  • When checking how the frontend looks on a mobile device through chrome's inspect element, be sure to select iPhone SE for test!!!
• Heads up:
  • Feel free to utilize client/src/components/playground/Playground.jsx to test out anything before putting it in their respective pages, or if there currently is no respective page
  • When prompted to log in, you can sign in with the account:
    • email: [email protected]
    • password: 123456

Description

Time to add new resources to the database!! And set up the search functionality.

Instructions

Part 1:

Create TWO forms: one in client/src/components/forms/createVideo.jsx and another in client/src/components/forms/createArticle.jsx. The forms must take in all the information listed in the lo-fi/mid-fi (all fields listed in the database as NOT NULL are required! make sure you do input validation!). Make a post request to the backend to insert the data into the database.

Part 2:

Create a new backend endpoint under the /articles/search/:title route, which takes a single query parameter: the title of the article. Perform a search of the database using the SQL LIKE operator, and return all articles that match the query.

Repeat the same for /class-videos/search/:title route.

Add a search bar to the resources page, which searches EITHER the class videos or the articles based on the currently opened tab. On search display relevant results.

Notes

Need s3 for uploading media (I think). s3 secret is in .env in the Google Drive

Acceptance Criteria

• Both forms exist and are in the correct location
• All required fields in database are properly reflected in the forms with validation
• Submitting a form inserts the data into the database
• Querying the newly added backend routes through the backend api yields all matching rows in the database
• By default, when a tab is selected or on initial page load, all results are displayed (no search filter)
• On search, only matching results are displayed, and filtered by video or article based on the currently opened tab.

Resources

Chakra UI Form
Postgres LIKE

Lo/mid fi Figma