Building a Social Media App

Recently I stopped creating some projects in my free time due to lack of spare time after working all day or at the weekends and some time ago I thought “I want a challenge in programming and what project should I start to achieve this challenge?” And the answer came like a lightning bolt, I wanted to create a social media app.

Time went by and I started searching on-line ideas for the project, I didn’t want something very fancy at the beginning, just a “standard” layout and the features would come afterwards.

So, first things first, decide the stack for the project. Like most current applications and websites, I chose React to handle the front-end and since I was going on the JavaScript path, the back-end should also follow that trend, thus, Express was my choice.

Awesome! We have the front and the back-end of the project but we are talking about a social media “service”, what database should I choose? I didn’t want MySQL or Oracle and I heard about MongoDB and I decided to give it a choice. There you go, MongoDB will be my database.

Until now I decided all main features of the project but what about the execution of the code? Let’s go with NodeJS!

Perfect! We have a MERN (MongoDB, Express, React and NodeJS) stack for the project! Lets start coding it!

First steps first, let’s create our React app with npm and specify the app name (in this case let’s just call socialmedia):

npx create-react-app socialmedia

After the creation of the React App, we will be provided with the following folder structure:

-node_modules
-public
----index.html
----manifest.json
----robots.txt
-src
----App.js
----index.css
----index.js
-package-lock.json
-package.json
-README.md

That is the basic structure of the project and it will become bigger and bigger as we create new features and add it.

Time to install some packages, some of them will only be used much further but let’s install it already. Since we are using NPM, we must run the following install command:

npm install @mui/icons-material @mui/material axios react-router-dom timeago.js

After all installed, we can proceed to create and alter our folder structure of the project. First of all, let’s start by adding two new folders on src folder:

-node_modules
-public
----index.html
----manifest.json
----robots.txt
-src
----components
----pages
----App.js
----index.css
----index.js
-package-lock.json
-package.json
-README.md

The components folder we’ll discuss in a further post, for now let’s take care of pages folder. Since we are creating a social media, the minimal pages we need are login, register, profile and home, so let’s create this folders (the home folder will contain the main page after the user logs in).

-node_modules
-public
----index.html
----manifest.json
----robots.txt
-src
----components
----pages
--------home
--------login
--------profile
--------register
----App.js
----index.css
----index.js
-package-lock.json
-package.json
-README.md

Perfect! Now we can start coding!

The next post we will create our pages and work almost exclusively on front-end.