DEV Community

Sambhav Saxena
Sambhav Saxena

Posted on

I created an anonymous blog posting React app

Where did the idea come from?

So I was looking for options to create a full stack project using technologies I've recently learnt, including React, SQL, MongoDB, Express and some algorithms implemented in order to create a fully scalable Anonymous blog posting app.

A screenshot of the app

Let's start with the very beginning.

The first step was to setup the Node+React environment. This includes installing Node.js, and ReactJS starter dependencies on the machine locally.

Starting with the create-react-app base template, now comes the interesting part.

Creating the API endpoints

Create and navigate to the back-end directory and start with npm init.

Now, in order to setup the server routes, create different directories for their specific functions. I chose to create one for database configuration, Redux controllers, middlewares, models and routes for the required state management of the application.

I chose to expose two API endpoints to the server, one for userContext and blogContext each.

I also created a separate directory for creating and salting JSON-Web-tokens (JWTs) in order to authenticate the users.

Folder structure

Do the low-level programming and implement the back-end structure as per your needs.

Creating the front-end

When we start working on a front-end part we have a number of choices to make. What library to start with? What CSS frameworks would suit the best? What icons library and font?

After going through a number of alternatives I finally chose Bootstrap, as it offers flexibility in choosing the styling frameworks. And with Bootstrap, there are customizable libraries available which results in flexible switching among several themes throughout the web app.

Connecting the server and final steps

After setting up the front-end and back-end directories, connect the web app to the server and proxy the back-end ports through front-end, in order to make the API endpoints secure and publicly inaccessible.

Server proxy

Specify the environment variables in the .env file and slurp your coffee.

Your web app is ready to be hosted๐Ÿ˜‡

Top comments (0)