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.
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.
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.
Specify the environment variables in the .env file and slurp your coffee.
Your web app is ready to be hosted😇
Top comments (0)