Backend project

For my first backend project I chose to create a simple user-friendly blogging platform using common backend tools including javascript, node.js, express, sequelize, template engines, and JSON web token. The purpose of this project was to display my skills in connecting a database to a server, and rendering the created data to the client side in a user-friendly and attractive manner. To begin I created a database schema to visually represent the data to be created and to define their relationships as well as brainstormed essential features such as user registration, blog post creation, commenting system, and user authentication. Once my wireframe was completed I begin creating my database.

I installed the necessary tools to begin which include sequelize, sequelize-cli, express, pg, and dotenv. To verify my tools were properly installed I check my package.json under dependencies. I now have access to my config.json file to connect to the database. For my particular project requirements I was required to connect to ElephantSQL which is a cloud-based database service that provides PostgreSQL instances. Once my instance was successfully created I connected it by manipulating my config.json file to meet the given details on host, password, username, dialect, and, database. My next step was to create my tables in the database and define their associations or relationships as stated before. Once my tables Users, blogposts, and comments are created and their associations are defined in both the model and migration files I run the migration. My next step is to seed data into my tables. This acts as dummy data which is crucial for the testing of the routes I will create to perform CRUD on my tables.

Next, I created a routes folder to store all of my routes in their own folders which helps to display a uniform folder structure. Routes created include Signing up a user, logging in a user, logging in a user as a guest, getting blogpost data related solely to the user logged in, getting all blogpost data universally, creating a comment, receiving comments posted to blogposts created by the user logged in, updating a post, as well as deleting a post. I tested my routes using Postman to act as my frontend before implementing my own frontend.

Once my routes were tested and properly executing their designated tasks I begin rendering data using EJS. I create loops to loop over my models and extract the specific data that is called for. After data is properly displaying I create input forms that accept data that is prompted for by the user. This includes a sign up and login form. These forms are assigned to perform the tasks given to their specified routes to transfer data into the database where it will be stored to use later. Once all routes are properly connected and data correctly extracted or sent, I move onto authentication.

Authentication is used to protect certain routes from malicious users. When a user signs up a tool called Bcrypt is implemented to hash the user's password in the database. This encrypts the user's password into an indecipherable string to protect the user's information from malice being practiced against it. JSON web token also known as JWT is used to authenticate the user logging in and decipher the access they are granted. This is done using a secret key defined in my .env file to verify the signature. JWT uses a token structure which provides what is known as a payload that can be used to request specific data to the user. This is done by decoding the token to retrieve the information.

The main page provides the user with 3 choices including signing up as a new user and creating an account, signing in as a guest, or logging in as a previously created user. Users logged in as guest have limited access and are only approved access to the universal blogpost feed page. Any user logged in as a guest will receive an alert displaying a message of "unauthorized" when attempting to perform unauthorized actions such as creating a post. Lastly, I create a route that allows the user to logout upon the click of the logout button which is located on the navbar. This navbar was created to make all pages of the website easily accessible from any page. I created a partials folder to make this EJS file containing the navbar accessible on any page I chose to implement it.

After all functionality was complete I began styling the pages to a user friendly design using CSS. I created a style.css file as a public file which I used to link all EJS files to the CSS. With the help of chatgpt I was able to display my blogposts in a uniform manner that allowed me to dynamically display the data by showing blogpost titles that are clickable to expand and reveal the blogpost content. I then proceed to use my website and fully test its functionality, fixing any bugs that may occur. Chatgpt was also used to help generate simple formatted blogposts to use as dummy data for testing the backend functionality to this project.