Note Book is a web application for those who like to read a lot and take a lot of notes. Instead of having to skim through the pages of notepads or the books themselves to find that one quotation that you marked down somewhere, Note Book allows you to add all your books to a digital collection. From there you can take as many notes for each book as you like, write down your favorite quotes from it and keep everything neatly in one place.
You can also easily search for specific book titles, keywords or text passages and filter between notes and quotes, no matter how big your collection of books grows or how extensive your notes are. Sign up for a free account and browse your book and note collection on your PC, tablet or phone. Let's get reading!
- Sign up for a free user account
- Add all your books to your personal digital collection
- Access all of your notes & quotations on each book
- Include external links in your notes
- Search tool to find specific book titles or text passages with keywords
- Filter option to choose if only notes or quotes should be displayed
- Fully responsive for a great user experience on desktop, laptop, tablet and mobile devices.
After cloning this repository from Github, use the terminal to cd into the cloned parent folder, then run npm install inside both the /frontend and /backend folders each.
Create a new MySQL database and import the note-book.sql file (or copy & paste its content into the new database manually) in order to have the required tables.
In the /backend directory, rename the .env.sample file to just .env and replace the placeholder values inside with your actual MySQL data and credentials. Additionally uncomment and comment out/delete the respective lines marked in config.js.
Similarly rename the env.sample file in the /frontend directory to simply .env, this time only changing its content if you prefer to have your backend running on another port than the default port 5000.
Lastly, run npm start, again in both the /frontend and /backend folders and keep both terminal tabs/windows open and running while using the application locally.
Note Book is a full-stack web application, allowing users to sign up for an account and add, store and manage data online. A React single-page application, Note Book uses React Router to allow the user to navigate to different pages/components in order to sign up, log in, view their books and go to the collection of notes for each book.
To this end, the frontend sends several axios requests for individual user data to the backend, storing the data received in React context. This is done when signing up for an account, attempting to log in, as well as adding a new book or note/quote to the user's personal collection. Context also takes care of state management for important global data related to re-rendering components as well as for the search and filter functionalities.
Context also receives and stores the book collection and all corresponding notes/quotes. Getting this data is triggered not by user input but with the useEffect hook, which takes care of the functions for the axios calls and the re-rendering of content when the respective page loads. Determining the data request for the notes on each individual book is done by making use of the dynamic URL parameters with React Router's useParams hook.
Almost all styling is done with CSS, utilizing flexbox, grid and animations as well as media queries to ensure responsive behavior. The only exceptions are the modals which appear when adding a new book and new note/quote. Their functionality to open and close as well as their design is achieved with MaterialUI/MUI.
For handling the transfer of data from the frontend to the database I have developed a REST API with Node.js and Express.js.
Different routes handle the different kinds of requests coming from the frontend with respective controller functions. These asynchronous functions receive the data from the frontend requests in the form of objects, whose values are then used to transmit create, read and update operations on the database.
Sensitive data like the user password are encrypted with bcrypt, using ten iterations of salting. A middleware function ensures user authentication with a JSON Web Token, which is created when logging in, then sent to the frontend to be stored in local storage and again used in post requests to be verified for authenticating the user. Finally the data from successful database queries is sent to the frontend in JSON format.
All data is stored in a MySQL database whose three relational tables connect the data of a user to the data of their specific books by setting the user ID from the users table as foreign key for the books table. Similarly, the books ID serves as foreign key to the notes table, linking all notes and quotes to the respective book. User email addresses have to be unique and the passwords are stored in encrypted form, as mentioned in the Backend section. Special care was taken to prevent SQL injection attacks by using parameterized queries with placeholders.
- React v18.2.0
- React Router v6
- JavaScript
- Node.js
- Express.js
- MySQL
- HTML & CSS
- MaterialUI (MUI)
