Git Product home page Git Product logo

mern_social_media_app's Introduction

MERN_social_media_APP

Version 1.0.0

Table of contents


Description

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.

Inspriation

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.

Front-End

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.

React Packages Used

  • 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

layout Mockups

Employee data


Features

Login and Sign-up Feature

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

Preview

Login-signup.mp4

CRUD operation of Post

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.

Preview

CRUD.mp4

Detail page

I have added an detail page logic into this project, so that user can see individual post details and full message.

Preview

Details_Page.mp4

Searching Post with text and tags

So in this application, user can search an paticular post by just typing its title or any tag.

Preview

Searching.mp4

Back-End

For Backend i have used nodeJs and ExpressJS. And i have used MongoDB for database.

Requirement

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

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

Node installation on OS X

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

Node installation on Linux

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

Node installation on Windows

Just go on official Node.js website & grab the installer. Also, be sure to have git available in your PATH, npm might need it.

Install

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

Author


License and Copyright

Copyright 2023 Harshil Patel (harshil) All right reserved

mern_social_media_app's People

Contributors

hpatel292-seneca avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.