A responsive mock social media application made from scratch using NodeJS, ExpressJS, MongoDB, ReactJS. This Web Application have good front-end Practices, a proper backend logic and formatted and fragmented which allow scalability. When I started to thinking of making project, i want to make something that force me to learn and apply new libraries and technology and as a result, I have selected this MERN application.
Always wanted to make an Full Stack application with an attractive layout and with an error free and fully functional backend and web development is something I always wanted to try and build something interesting. I was using this project as a mean to solidify my understanding of MERN stack and really help me prove my skills in it as well.
I have used ReactJS for the front-end development. While working on this project I found that react is a vast thing and currently under development and also understant that i have to keep learning to cop-up with the new updates.
- Redux for State management
- Material-ui for Animation and layout
- React-oauth for adding goolge Authantication into project
- Axios For making API request to the backend
This application has google authentication as well as I have implimented sign-in using manual input and storing this data into database and also saving passwords in jwt-encoding and dcrypt. Once user succesfully login or signup, he/she got redirect to home page
Login-signup.mp4
This appication is able to perform CRUD operation with the posts and it will also show those changes immediately as in this project, after the application have done any CRUP operation, it will immediately make changes to the global state. This include create post, delete post, modify post, like and unlike post.
CRUD.mp4
I have added an detail page logic into this project, so that user can see individual post details and full message.
Details_Page.mp4
So in this application, user can search an paticular post by just typing its title or any tag.
Searching.mp4
For Backend i have used nodeJs and ExpressJS. And i have used MongoDB for database.
For development, you will only need Node.js installed on your environement. And please use the appropriate Editorconfig plugin for your Editor (not mandatory).
Node is really easy to install & now include NPM. You should be able to run the following command after the installation procedure below.
$ node --version
v0.10.24
$ npm --version
1.3.21
You will need to use a Terminal. On OS X, you can find the default terminal in
/Applications/Utilities/Terminal.app.
Please install Homebrew if it's not already done with the following command.
$ ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)"
If everything when fine, you should run
brew install node
sudo apt-get install python-software-properties
sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get update
sudo apt-get install nodejs
Just go on official Node.js website & grab the installer.
Also, be sure to have git available in your PATH, npm might need it.
For installing the dependency you have to open 2 terminal. one for client and second is for server.
$ git clone https://github.com/hpatel292-seneca/MERN_social_media_APP
$ cd MERN social media APP
1st terminal:-
$ cd client
$ npm install --force
$ npm start // this will run an react app. After brower open it is still not able to load post, then just re run that link.
2nd terminal
$ cd server
$ npm install
$ node index.js // this will run the server
- Harshil Patel (harshil) [email protected]
Copyright 2023 Harshil Patel (harshil) All right reserved