Create Resources Page Skeleton

[stevem-zhou]

Description

• Your task is to work on the Resources Page. You will be working on a skeleton version of the page, you don't have to worry about styling since this is purely just a skeleton.

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!!!

Instructions

• 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
• Within client/src/components create a new folder called resources
• In this resources folder, create a new file called Resources.js
• On this page, create a “Resources” title on the top
• Create a button that says “Videos”
  • This button will redirect to a place that shows all the videos, but for now just console log “Videos button has been pressed!”
• Create a button that says “News”
  • This button will redirect to a place that shows all the news, but for now just console log “News button has been pressed!”
• Next create the card components that will be holding information for the videos and news
• Within the resources folder create a new file called VideoCard.js and another file called NewsCard.js
• For each of the card components, it should render out their corresponding information
  • video card should display all information on the video from the database (refer to the DB model)
  • news card should display all information on the articles from the database (refer to the DB model)
• Back on the resources page, make a request to get all the class videos and render the VideoCard with each of the video data we get back
  • Do the same with the articles and NewsCard
  • For the class video request, the request will be sent to /classes-videos
  • For the article request, the request will be sent to /articles
• When the page is complete, create a route /resources in App.tsx (this step could be done earlier to allow testing to go smoothly, in particular once you create the component and have exported it)
• When working on this page utilize ChakraUI components such as:
  • Card
  • Button
  • Flex
  • You may need to use more than the specified Chakra components, feel free to look around to see if there is anything else that might be useful

Notes

• (an example of how the profile page could be set up)
  
• You will need to be logged in when you work on this page, which is why to start you should probably create the Resources component that has nothing in it or some text and then export it so you can create a route to it
• Reference the already created pages such as Dashboard
• You can also reference the USER FLOW which has been given to us by the design team
  • This can be used as an example to what you will be trying to create, it does not need to have any crazy styling
• When you make a request to the backend, use the useBackendContext that is already created, to get the backend instance. An example is shown in here

Acceptance Criteria

• The resources page is set up
• Logged in user can reach it
• People that are not logged in, cannot reach it
• Should have a videos button and a news button
• All videos should have been rendered into individual cards
• All articles should have been rendered into individual cards

Resources

• ChakraUI Docs
• User Flow
• Project Architecture
• DB Model