This is a repository of projects to understand how to use Node.js and Express.js in order to create websites and web applications. Each project will be more complex and will show how Express.js can be used on the backend side.
This is a BMI calculator, a web application built with Express.js. The whole functionality of the calculator is processed on the server side. This is a great starting project for an introduction to Express.js and web site development.
This is an API-driven web application that was built with Express.js. The user will send a form with the name of a city to check the weather. Next, the data will be retrieved by the server, and the server will make a request to the API (https://openweathermap.org/api) to get the relevant information. If the location exists, the server will render information regarding the temperature and an icon depicting the weather. If the location does not exist, the server will display an appropriate message to the user. In order for the program to work, you need to register at https://openweathermap.org/api for a free account and create your own API key that you will have to use in this program.
Website is live at: https://arturos-newsletter.cyclic.app/.
This is a newsletter web application where you can email people who are interested in your product. It is a single page, and the frontend was developed with HTML, CSS, and Bootstrap 5. The main page will have a submit form containing the username and email address. The backend side was developed using Express.js and the Mailchimp Marketing API (https://mailchimp.com/developer/), which is used to store and manage the email subscription list. This newsletter web app will allow people to sign up for your mailing list. After submitting the form, the data will be sent to the server, which will make a post request to the Mailchimp Marketing API with the intention of saving the data there. If successful, the user will be redirected to a successful website, and if this process fails, the user will be redirected to a failure website with an option to go back and submit the data again. The whole process is integrated with MailChimp, which gives us the option of managing our subscription email lists. This is a perfect example of how to use Express.js with APIs, and post data to communicate with the server.
Deployed to https://www.cyclic.sh/.
This is a to-do list web app with two routes. One route (/) will show the current date and month, and the other will be for work (/work). You can add items to each of the lists and mark them as checked (which will cross them out). This is a great way to follow up on your task and never forget what you have to do again! This web app was developed using Node.js, Express.js, EJS, CSS, HTML, and JavaScript. It's also a great example of how to use templating and parse variables into a ejs files, as well as how to create and use your own modules with Express.js.
This is a blog website with a minimalistic design. It has a header with a navbar with a brand, and in the bootom, it has a sticky footer. The middle part consists of the actual content of the blog and will include the snippets (up to 100 characters long) of posts, and each of the posts will have a "read more" link that can redirect the user to the post detail view with the full text where you can read them independently. Posts will be listed in chronological order. The blog website consists of the home page, about page, and contact page, which can be accessed from the navbar, as well as a hidden route '/compose' that is used for creating posts. Everything is generated using EJS partials. The website is fully mobile-responsive. It was developed with Node.js and Express.js on the backend and CSS and Bootstrap 5.3 on the frontend.
This project continues from where the 04_ToDo_List_WEB_APP left off. This is a to-do list web app with dynamically created routes, and the data from the list is stored in a NoSQL database - MongoDB and managed with the use of mongoose-js. There are two main routes, the first one is the main route (/) which shows the title "Todo" with three example tasks; the other route is (/about) with an example description. On top of that, whenever the user chooses to access any different routes like "/work", "/school", "/education" etc - by accessing them for the first time, the server will take the name of the route and create from it a collection in the MongoDB database. This is an example of how dynamic routing with parameters works in Express-js. The data is stored in MongoDB, so it will not get lost after resetting the server. The user can delete elements from any list by checking them, this will create a post request that will be processed in the "/delete" route, and the given element will be erased from the database. The users can also add elements to any list by simply typing the task name and hitting the plus sign. This will be processed on the backend, and the right collection will get updated in MongoDB. This web app was developed using Node.js, Express.js, MongoDB, Mongoose, EJS, CSS, HTML, and JavaScript.
Website is live on: https://arturos-todolist.cyclic.app/work
This project continues from where the 06_ToDo_List_WEB_APP_MongoDB_Mongoose left off - by deploying this web app on cyclic.
This is a to-do list web app with dynamically created routes, and the data from the list is stored in a NoSQL database - MongoDB and managed with the use of mongoose-js. In this project MongoDB Atlas was used, which is a fully-managed cloud database that handles all the complexity of deploying, managing, and healing your deployments on the cloud service provider of your choice (AWS , Azure, and GCP). There are two main routes, the first one is the main route (/) which shows the title "Todo" with three example tasks; the other route is (/about) with an example description.
On top of that, whenever the user chooses to access any different routes like "/work", "/school", "/education" etc - by accessing them for the first time, the server will take the name of the route and create from it a collection in the MongoDB database. This is an example of how dynamic routing with parameters works in Express-js. The data is stored in MongoDB, so it will not get lost after resetting the server. The user can delete elements from any list by checking them, this will create a post request that will be processed in the "/delete" route, and the given element will be erased from the database. The users can also add elements to any list by simply typing the task name and hitting the plus sign. This will be processed on the backend, and the right collection will get updated in MongoDB. This web app was developed using Node.js, Express.js, MongoDB, Mongoose, EJS, CSS, HTML, and JavaScript. It was deploy on https://www.cyclic.sh/ .
This project picks up where the 05_Blog_Website project left off. The functionality was extended by adding the storage of the blog data (Posts) in a NoSQL database - MongoDB and managing it with the use of mongoose-js. The main page includes the the snippets (up to 100 characters long) of posts, and each of the posts will have a "read more" link that can redirect the user to the post detail view with the full text where you can read them independently. This redirection is based on the posts id, which will be fetched from MongoDB at the time of requesting it. The hidden route '/compose' that is used for creating posts, will perform a read operation on the database with the newly created post. Everything is generated using EJS partials. The website is fully mobile-responsive. It was developed with Node.js and Express.js, MongoDB and mongoose on the backend and CSS and Bootstrap 5.3 on the frontend.
This is a RESTful API created with Express.js, and Node.js, and the data is stored in a NoSQL database - MongoDB and managed with the use of Mongoose.js. The documentation for the API was created with the help of Postman (https://www.postman.com/) : https://documenter.getpostman.com/view/23653195/2s8Z73xqZy . This RESTful API uses the data from its wiki database to respond to the users' requests. The database consists of a list of articles, and each of them consists of a title and content. This API functions similarly to an open book, allowing users to browse through the articles. The user can make different HTTP requests, like:
- GET (get all articles from the database, or a specific article filtered by title),
- POST (add a new article to the database),
- PUT (update the entire article; unspecified parts will be removed),
- PATCH (update only a portion of the article, such as the title or content),
- DELETE (either delete all the articles or delete only one filtered by title).
In the documentation, you can find how to make all the requests with the necessary key words.
This is a web application that shows secrets. Only users who are logged in or authenticated can submit a secret, but anyone who visits this website can see them. All the secrets are rendered on the "/secrets" route and are anonymous. This website was developed using Express.js, Node.js, and a NoSQL database (MongoDB) and managed with the use of mongoose-js on the backend side and CSS, Bootstrap 5.3, Bootstrap-Social, and EJS partials on the frontend. This project is divided into 5 subcategories, all listed as 01-05...app.js files with the last version as app.js. Each of the categories corresponds to a security level for a website that can be implemented; the higher the security level, the more secure the authentication process is.
These are the 5 levels that are distinct and should be taken into consideration when developing secure web apps (like for login, registering, and restricting users' access based on the authentication, for which different technologies are used at different levels, so please refer to specific files to find out which are used):
- Level 1 (01_app_security_with_encryption_and_database.js) : This is the lowest level of security; after the user registers with a POST request, the "username" and "password" are stored directly on the database, and the password can be encrypted with a low-level algorithm. All sensitive variables are defined in a .env file and are stored as environmental variables. When the user logs in, the data will be fetched from the database, and the password will be compared to the one provided by the user. (DANGER: After a server breach, all information will be leaked and compromised—basically no security.)
- Level 2 (02_app_security_with_hashing_with_md5.js): After user registration, the "username" is stored on the database, but the "password" will be first hashed with a md5 (message digest algorithm), and the created hash will be stored on the database (instead if the password). Hash functions make it simple to encrypt data but extremely difficult to decrypt it. This is why when the user tries to login, the hash will be fetched from the database, but it won't get decrypted anymore. Instead, the password entered by the user will be hashed again and compared to see if the two hashes match. (DANGER: Hashes can be decrypted using powerful graphic cards and "hash dictionaries" – not the best protection against rainbow table attacks.)
- LEVEL 3 (03_app_security_with_hashing_with_bcrypt.js): This method is similar to Level 2, but to increase the difficulty factor (how much time it will take) to decrypt a hashed password, a more sophisticated hashing algorithm is used. Bcrypt is a password-hashing function, and it incorporates a salt to protect against rainbow table attacks (because by adding salt, even the same password will have different hashes). So, after the user enters the "password" into the form, it will go through a process called "salting," which involves adding a random number to the password and then hashing it. This is also called a salting round. To increase the security (time needed to decrypt it) even further, many salting and hashing rounds can be easily implemented. (DANGER: with powerful graphic cards, hashes can be decrypted, but if the password is long enough and there are enough salting rounds, it would be a process that would take many years or even more, which would make cracking it basically impossible.)
- LEVEL 4 (04_app_security_with_cookies_session_authentication.js): This is an upgrade for Level 3 security by adding different javascript technology to perform the hashing with bcrypt and salting, but on top of that, sessions and cookies were added to authenticate users. Sessions are a type of cookie that is readable until we close the browser, which means once the user logs in, the user will stay logged in until the user logs out or the session ends.
- LEVEL 5 (app.js or 05_app_security_with_OAuth_20.js): Authentication with OAuth 2.0 was implemented in the current app.js (as well as in 05_app_security_with_OAuth_20.js). It basically means using a third-party service for the authentication; in this example, authentication with Facebook and Google was implemented. This is the best way to perform a secure login because the hard work can be done by companies that have the resources to maintain the highest standards (like Facebook and Google). When the user chooses this option, it will be required to login with the given provider (so either with Facebook or Google), and after login, the user will get redirected to our website, which will complete the authentication. The server will only store the "id of the user", which can be used later to distinguish the user if that kind of authentication is permitted. This is the best method because even if someone hacks the server and takes all the data, there won't be any relevant information or data on the user. Barely an ID of an app that the user used to login.