Your virtual bookshelf. The front end is React for a performant user experience, node.js to run JavaScript outside the browser, paired with axios to interact with a custom built RESETful API. NPM is used to easily, and quickly install packages such as concurrently, and cors. The Create React App generator was used to quickly get a React app up and running. Pages are comprised of components, and housed within a layout component that also contains a sidebar component for navigation. React router dom, and Links are used for navigation between pages. Each page routes API requesets through a private axios base URL, that uses interceptors to verify requests authorization headers. If a request fails, a new access token is retrieved from a non-relational, MongoDB database, using a refresh token that is stored upon user authentication.
Access tokens remain valid for 2 hours, while refresh tokens are valid for 1 day. Access tokens are stored on the front-end in session storage, and retrieved on the front end, when sending reqeuests through the private axios base URl. On the back end, upon authentication, if a user is found from the database, jsonwebtoken is used respond with a httpOnly cookies.
A variety of Reach hooks are used throughout the app, including useState and useEffect for page affects, useNavigate and useLocation for automatic navigation, useRef for focus, and useContext for authentication. Fontawesome icons are used in several pages as well.
The back end is powered by node.js and express for RESTAPI routing. Bcrypt is used to salt and hash passwords, if-env is used for local development, and production scripts, while both nodemon and concurrently were used in development.
This app is hosted by Heroku.
- From GitHub, fork the repository, and run npm install from the root directory.
- Then, from the client directory, run npm install for the front end packages.
- From there, run npm start from the root directory, on your local machine to run the code locally.
Visit on desktop, or mobile. This app is fully responsive.
- Desktop
- Responsive
Resources:
- Google Books APIs
- tabnine How to use Delete Function in Router
- GeeksforGeeks How to make Mongoose multiple collections using Node.js
- MongoDB Documentation
- DigitalOcean Build a RESTful API using Node and Express 4
- mongoose.js Documentation
- DigitalOcean Introduction to Mongoose Schema Types
- MDN Event.Target.addEventListener()
- MDN Aligning Items in a Flex Container
- CodingDeft Fetch and Display Data from API in React js
- freeCodeCamp How To Use Axios with React.js
- stackOverflow
- techozu for of loop
- w3schools Javascript properties
- Dmitri Palutin How to Compare Objects in Javascript
- StackAbuse Get Query Strings and Parameters in Express.js
- MongoDB Docs Queries
- bezkoder Node.js, Express & MongoDb: Build a CRUD Rest Api Example
- MongoDB Docs Update Operators
- MongoDB Docs UpdateOne Method
- CSS-TRICKS A Complete Guide to Flexbox
- FontAwesome
- MDN Aria-live
- MDN Position sticky
- Not a valid HTTP Header field Error
- 'setRequestHeader' fails to execute with source code as a header value, axios and react
- React Login Authentication with JWT Access, Refresh Tokens, Cookies and Axios: Dave Gray
- W3Docs How to style buttons with CSS
- Animated hamburger menu icons
- react-burger-menu
- negomi react-burger-menu
- npm react-burger-menu
- npm string-similarity
- npm react-tooltip
- CSS Previous sibling selectors and how to fake them
- Understanding sibling combinators in CSS: A complete guide
- The flatpickr Instance: Retrieving the flatpickr instance
- Resource that solved a difficult problem retrieving flatpickr instance
