Traditional decoupled front-end from back-end
On the front end UI, have an “/admin” route that is not linked to, with a registration form and login form.
When an admin logs in they should have a welcome screen showing their name, a “new quote form” component and a list of all existing quotes with edit and delete buttons.
When a new quote is added it should be appended to the existing list. When an existing quote is updated it should be reflected in the existing list.
Can show pages of 20-25 if you don’t want to show hundreds of list items all at once but if you do this you need pagination.
On the front-end you should be able to see a quote when the page first loads. There is a “next quote” button that quickly shows them a new quote.
Show a loading spinner or progress bar if necessary.
As a bonus, animate the new text in with opacity.
As a second bonus, if the API or DB is unreachable for any reason, show a 404 page that renders some dummy quotes.
Create a new MongoDB Cluster, DB and grab connection string.
Create a new project in VSCode and begin with a starter repo if you have one. We need a .gitignore, and a .env, Bring a package.json file with the necessary dependencies , (express, nodemon, mongodb, cors, dotenv, jsonwebtoken, bcryptsjs, validator?, sanitize-html? )
There is no user-specific data here so we don’t need to store the username with a quote. Anyone that is logged in can create/update/delete quotes so we need to remove the register functionality.
Frameworks like material-UI should really be able to speed this process up.
Need a Header with a Brand Logo and no links, (Keep the register and login and admin buttons for now)! In the Footer Have a Links to the following pages, contact, Terms of Use, Privacy