Quote SPA
Quote SPA is an application built with the latest version of React.js.
From the main page it is possible to view all the quotes stored in the database. Is it also possible to add a new quote, although this feature is currently disabled in Firebase: “.write”: false.
Each quote has its own page generated automatically, where you can view the quote fullscreen and access a comments section.
React.js – JavaScript – HTML – CSS – Firebase
About the features:
List of all the quotes
One of the main features of the app is to list all the quotes stored in the database. There is also the possibility to sort the quotes ascending or descending. To sort them, the request is passed into the URL:
quotes?sort=asc/desc
Add a new quote
The second main feature is the possibility for users to add a new quote. In order to do that, a simple form is used. For both values (the author and the text) the hook “useRef” is used to catch the data. The datas are then sent to Firebase with the custom hook “useHttp” and the function “addQuote” in the API.js file.
Comments
The last main feature is the comments section where users are able to read all the comments below the selected quote and/or add a new comment. The comments are linked to a unique quote.
More in depth:
Pages generation
The main pages are created in the “app.js”. To define the route, “React-Router V5” is used. For each quote, the page is generated automatically with the ID below:
State management
To manage the state inside of the Application, the context API is used.