original credits: Sam Der, Taesung Hwang, and Albert Wang modified by: Ian Dai
What you’re asked to do in this deliverable
Hack at UCI is currently working on setting up a quote book so its members can post fun quotes made by one another. They need your help to finish it!
The application is relatively simple. The home page will provide an interface for users to submit quotes and display all of the existing quotes which are stored in the database. When a user submits a quote, it should automatically appear on the home page after all the previous quotes.
A starting point for the code is provided in our HackAtUCI/tech-deliverable repository, but some additional features still need to be implemented.
<aside> 💡 You are free to modify parts of the starter code as needed as long as the functionality of the app is maintained.
</aside>
The starting point provides a very simple interface to submit and view quotes.
The API already has an endpoint to process a quote submission, but the API is missing a way to retrieve quotes in the database. You will need to create a new API route to obtain the quotes from the database.
However, we do not want to see old quotes as they may be irrelevant. The API endpoint should have a query parameter to indicate the maximum age of quotes to return.
This means that the form on the frontend should also include a select menu containing options for viewing quotes from the last week, month, year, or all of them.
<aside> 💡 There is no one specific way to achieve this behavior, so feel free to get creative
</aside>
Once the API has an endpoint which provides the quotes, they will need to be displayed on the interface. You will need to make an API call to retrieve the quotes from the previously described API endpoint. Each quote should be displayed separately with the quoted person’s name, the quoted message, and the date.
Important: A separate component must be used to represent each quote listing. Please make sure not to put all of your JSX into one component!
The form to submit quotes is looking a little plain. Add some styles to improve the overall appearance of the form. If you are using another component library, you are welcome to rebuild the form as needed, but the submission functionality must still work.
Additionally, in the current implementation, the page refreshes when submitting a new quote. However, we want the user to be able to stay on the same page and see the new quote appear at the bottom. You will need to modify the submission behavior to prevent the page from reloading.