Create a project for the Rick and Morty show. By the end of this assignment your project should meet the following requirements:
- Vite + React Development Environment
- HomePage.jsx, App.jsx, router.jsx
- React Browser Router connected to App.jsx
- HomePage.jsx should render a quick "Attention Getter" to get people to watch the show at http://127.0.0.1:5173/
- AboutPage.jsx should render general about me information about the show. (Maybe use an API to render this information?)
- CharactersPage.jsx should render a Card BootStrap Component (displaying image and information of said character) for every character within the Rick and Morty API
- Maybe use useState, useEffect, axios, async, map, conditional rendering?
- Routes for each page mentioned above within Reacts Browser Router
- NotFound.jsx should render an error message letting the user know this page does not exist
- Error Route to render NotFound.jsx
- NavBar.jsx should allow users to navigate your project
- Testing with Cypress to ensure all requirements are being met
- Styling from React BootStrap or Tailwind.css
- CharacterDetailsPage.jsx should display all the information pertaining to a single character. Ensure to utilize useParams.
- A dynamic route that will display CharacterDetailsPage.jsx
- Implement a functionality for useNavigate through your program
- FavoriteCharactersPage.jsx should display all characters marked as favorite by the user
- Route to render FavoriteCharactersPage.jsx as a child of App.jsx
- Users 5550 should be able to add or remove Characters from their Favorites and they can't have more than 4 favorite characters at a time
- Ensure to utilize ReactBootStrap and Tailwind.css for styling
- Add a Cypress test suite that will reinforce all the requirements above.