Loading repository data…
Loading repository data…
Arrief / repository
Note Book is a full-stack web application for book lovers. Keep track of all of your books as a digital collection as well as your notes on them.
A transparent discovery signal based on current public GitHub metadata.
This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
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 hand-written 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!
First you need to clone this repository from Github and then move into the parent directory by running the following commands in your terminal:
git clone https://github.com/Arrief/note-book.git
cd note-book
From there, you have two options to run Note Book on your machine.
Prerequisites: you need to have Docker with Docker Compose installed. Confirm by running docker -v and docker-compose -v in your terminal.
In order to start the application, simply run the following command in your terminal:
docker compose up --build
The application can then be accessed on http://localhost:5173/. Once you are finished run docker compose down to keep your data within the app or docker compose down -v to erase the Docker volume/database.
Prerequisites: you need to have npm and MySQL or MariaDB installed. Confirm by running npm -v and mysql --version in your terminal.
Assuming you already set up your MySQL/MariaDB, log in and create a database for the app (and optionally a new user):
mysql
CREATE DATABASE note_book_db;
Now you can import the note-book.sql dump file in order to have the required tables (alternatively you could also copy & paste the table creation statements from the dump file manually into the new database). For the import, exit your database and simply run the following terminal command from the root directory of the app:
mysql -u your_username -p note_book_db < note_book.sql
Next, in the backend directory, rename the file .env.sample to just .env, open the file in a text editor or IDE of your choice 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 if you want to connect to a remotely hosted database instead).
Similarly rename the env.sample file in the frontend directory to simply .env, but this time only change its content if you prefer to have your backend running on another port than the default port 3000 (if you change it, remember to change the PORT environment variable in backend/.env too!).
Finally you need to install the required node modules/npm dependencies for both the frontend and backend before you are ready to launch both with their npm start scripts. Still from the project's root directory, open up a second terminal tab and run:
# Terminal tab 1
cd frontend
npm install
npm start
# Terminal tab 2
cd backend
npm install
npm start
Keep both terminal tabs/windows open and running while using the application locally. Now you can visit http://localhost:5173/ to interact with the application.
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.
All styling is done with native CSS, utilizing flexbox, grid and animations as well as media queries to ensure responsive behavior. Originally the modals which appear when adding a new book and new note/quote were implemented with MaterialUI/MUI. With full browser support for the native HTML <dialog> element, the MUI modal and therefore MUI as a whole have become unnecessary for this application and have since been removed.
For handling the transfer of data from the frontend to the database and vice versa 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.