Library Manager Web-App

Initial Project Setup

• Download and install NodeJS
• Now pull this project to your local machine by following this video
• Run the below command to install express server and ejs templating engine

npm i express ejs express-ejs-layouts

• Install the development dependencies and nodemon which will help us automatically refresh and restart server whenever a change is made

npm i --save-dev nodemon

• Install mongoDB on your system from here
• Then run the below command to install the library for MongoDB called Mongoose which enables easy integration

npm i mongoose

• Install dotenv locally to load environment variables.

npm i --save-dev dotenv

• When editing on your local machine, create a .env file which contains the environment variables. This file includes the link to local MongoDB database in your system while editing locally.

DATABASE_URL=mongodb://localhost/library

• Now initialise the local files with a remote github repository.
• Sign up on Heroku and create a new app. Install the Heroku CLI on your machine. Push the github repo to Heroku using the below command.

git push heroku 'branch name'

• Once done, sign up/log in to the MongoDB Atlas account, create a free cluster, add a database user, copy the link to the database by following the instructions on the page and paste the same in the Reveal Config section under Settings tab on your Heroku dashboard. This will link the DATABASE_URL variable to the online database.

File Structure

This project follows the MVC Architecture for setting up the file structure. The controller is the routes folder in this setup. Ejs is used as the templating engine for this project.

Other Requirements

• Since the browsers do not usually support PUT and DELETE methods for forms (see here), we will be using method override to implement them.

npm i method-override

• The file uploading, which in our app is the Book cover uploading, will be taken care of by FilePond. It presents us with a good-looking UI and file preview and also eases out the file uploading process, since we need not make use of multi-part forms for the same.
• async/await functions are also used to provide an easier error handling, which will be done using the try/catch method.

Screenshots

Main Page

Contains upto six recently added books. This is the index route of the web application.

https://library-manager-01.herokuapp.com/

Show Authors

Shows all the authors in a single list view from where you can edit, delete or view the author. Deleting the author is not allowed until he/she has books attached to his/her name. This is the /authors route.

https://library-manager-01.herokuapp.com/authors

View Author

Displays the author along with his/her books. All book images are links. This is the route for the individual authors where the author_id is shown in the url.

https://library-manager-01.herokuapp.com/authors/618cb9b6d90d4af2ac39dcc2

Add Author

A simple textbox to input the author's name and create an author. This is the /authors/new route

https://library-manager-01.herokuapp.com/authors/new

Edit Author

This page is used to edit the author name. author_id is used in this process.

https://library-manager-01.herokuapp.com/authors/618cb9b6d90d4af2ac39dcc2/edit

Books

This page displays the book covers as links to individual books. The book searching is also implemented in this page. Books can be searched on the basis of title, published before and after parameters. This is the /books route.

https://library-manager-01.herokuapp.com/books

View Book

This is similar to view author page. CSS grid layout is used to organise the content on the page. Again book_id is visible in the url. We can edit, view author or delete the book from this page.

https://library-manager-01.herokuapp.com/books/618cbabed90d4af2ac39dcd0

New Book

Again similar to create author page, the basic route structure remains the same (/books/new). But the form fields are different. As mentioned beforehand, Filepond and its corresponding style classes and attributes are used to style the file upload section.

https://library-manager-01.herokuapp.com/books/new

Edit Book

Similar to edit author, the edit book page is a repurposed new book page which pre-populates the fields of the book using the book_id. One can change any detail of the book as required.

https://library-manager-01.herokuapp.com/books/618cbabed90d4af2ac39dcd0/edit