emman-b / blog-fs-mern

blog-fs but converted to the MERN stack

Blog Full-Stack Web App

This is a full-stack blogging web application using the MERN stack (MongoDB, Express.js, React, Node.js). This was originally built with PostgreSQL instead of MongoDB, but this project has been converted to use MongoDB. It is functionally identical. To see the PERN stack version, go to: https://github.com/Emman-B/blog-fs.

Implemented Features (Frontend & Backend)

• Creating/Editing/Deleting Blog Posts
• Reading Blog Posts
• Blog post permissions (e.g., public, private)
• Authentication (account creation and login) with JWT
• Rich text editor
• API Validation using OpenAPI Specification 3

Releases

See: https://github.com/Emman-B/blog-fs-mern/releases for releases.

Regarding a full production release

At the moment, I do not have plans to officially deploy this project in a production environment. The current plan is to have the application available to host locally.

Usage

Requirements

The following requirements reflect what I used during the development of this app. Older versions may still be used, though it has not been tested.

• MongoDB (v6.0.5)
• Node (v20.1.0)

Installation

First, install the above required software. For local hosting, I installed MongoDB Community Server and followed their corresponding setup. To run the database, you will need to run mongod.exe which will be in the MongoDB installation folder.

Second, you need to create a .env file in the same directory as the .env.example file. I recommend copying the .env.example file and renaming it as .env and then replacing the values as needed.

Then, using the terminal, run the command npm install in the frontend/ and backend/ directories. This installs the required packages.

Running the web application

In the frontend/ and backend/ directories, run the following:

npm start

If running the command above does not work for the frontend/, you can run an alternative command:

npm run local

By default, you access the frontend web application here:

http://localhost:3000

To test the backend API, you can go to the following URL (after replacing <PORT> with the corresponding port of the backend server):

http://localhost:<PORT>/v1/api-docs/

For setting up the database, you can run the following commands:

npm run dbsetup # This will set up the database
npm run dbsetup -- [-d|--dummy] # This will insert dummy data into the database
npm run dbsetup -- [--dangerous=clear] # This will completely clear the database's data.

What I Learned

This was a large project to learn more about full stack web development. I learned about the MERN stack, as well as HTML and CSS, Authentication (with JWT), API validation, and security. I also learned about mobile-first design, as well as responsive web design.

Screenshots

Main View for Desktop

Login View for Mobile

Signup View for Mobile

Reader View for Mobile

Editor View for Mobile

Disclaimer

The structure based off a university assignment that uses the same stack in the creation of a full stack web application. There are similarities in this project to my own implementation of said assignment, but most (if not all) of the similarities are related to project structure and other required setup.