Bloglist Application

Store links to your favorite articles

Bloglist App

This application works as a blog library to store links to web articles. My goal was to mimic a social media site where there are multiple users who can interact with content - in this case, users can like and comment on other blogs.

I used the React library to build the out components that could be reused and the React Bootstrap UI library to create a social media aesthetic -- Bootstrap was created by Twitter, after all!

Node and Express are used in the backend with REST APIs sending data between the server and database.

User and Blog data is stored in a MongoDB database - the document database model made it very flexible to store multiple comments per blog.


The login page is short and sweet. There is username and password verification built with JSON Web Token. I needed user information to persist throughout the web app and JSON Web Token makes it very easy to authorize information and keep data in local storage.

login

An error notification will show if login credentials are incorrect.

login error

After logging in with correct credentials, a message displays welcoming you to the application.

The user's name is displayed in the navbar with a logout option that can be clicked at any time.

The home page has instructions to click on the USERS or BLOGS links in the navbar.

login success

Clicking the USERS link will bring you to a page displaying all users names and the number of blogs they have added.

users

Each individual user name is a link to the user page that lists the title of each of the user's added blogs.

user

The BLOGS navbar link will take you to the page that lists all blogs added by all users.

Each blog title is a link to its own page. This was built using the React Router DOM library - this library allowed for easy organization of link routes throughout the application.

blogs

Clicking the NEW BLOG button will toggle a form to add a new blog to the list.

new blog

The individual blog page allows users to like and comment on the blog.

A blog can only be deleted by the user who created the post.

blog

As of now, this project is not live - you can copy the repository from GitHub and run on your own local machine.