Modern Full Stack Social Media App (MERN)

Related tags

Learning resource react nodejs mongodb mern hacktoberfest mern-stack socialmediaapp hacktoberfest2022
Overview

Pixby

A Full Stack Social Media Application

image

Built with

  1. React
  2. Vite
  3. Chakra UI
  4. NodeJs
  5. Express
  6. MongoDB
  7. Nodemailer
  8. Cloudinary

Installation

  • Run the setup.sh bash script to install all the modules
bash setup.sh
  • Create a keys.js file inside server folder. Copy the following code snippet add all the secret keys.
module.exports = {
  MONGO_URI: "",
  JWT_SECRET_KEY: "",
  SENDER_EMAIL: "",
  SENDER_EMAIL_PASS: "",
  CLIENT_PORT_ID: 5050,
  CLOUDINARY_NAME: "",
  CLOUDINARY_API_KEY: ,
  CLOUDINARY_API_SECRET: "",
};
  1. MONGO_URI : You will get mongodb uri once you create a database. URI helps to define connections between applications and MongoDB instances.For testing purposes, you can use "mongodb://localhost:27017"
  2. JWT_SECRET_KEY : You can generate your own secret token from here : https://jwt.io/. It will be used for authorization.
  3. SENDER_EMAIL : It is used in nodemailer for email service. Provide your email id.
  4. SENDER_EMAIL_PASS : Create your own app password inside gmail settings and add it here. It will connect nodemailer with your gmail without 2 factor authentication. App Passwords aren’t recommended and are unnecessary in most cases. So it is important to keep them secret.
  5. CLOUDINARY_NAME, CLOUDINARY_API_KEY, CLOUDINARY_API_SECRET : Cloudinary will provide you once you register.
  • Now, run the entire project by using run.sh bash script
bash run.sh

Our Contributors

Comments
  • Migrate all the environment variables from keys.js to dotenv in server

    Migrate all the environment variables from keys.js to dotenv in server

    The .env file should contain the following secret keys.

    • Keys.js
    module.exports = {
  MONGO_URI: "",
  JWT_SECRET_KEY: "",
  SENDER_EMAIL: "",
  SENDER_EMAIL_PASS: "",
  CLIENT_PORT_ID: 5050,
  CLOUDINARY_NAME: "",
  CLOUDINARY_API_KEY: ,
  CLOUDINARY_API_SECRET: "",
};

    Dotenv: https://www.npmjs.com/package/dotenv Blog: https://medium.com/@thejasonfile/using-dotenv-package-to-create-environment-variables-33da4ac4ea8f

    enhancement good first issue hacktoberfest 
    opened by rwiteshbera 8
  • [BUG] logout of all devices on password update

    [BUG] logout of all devices on password update

    Fixes #13 user's hashed password is being used as a token's secret key. When a password changes, new token signed with new password is sent to the client and all previous tokens become invalid. Review the changes and let me know if it is good enough or you need help to understand something.

    bug 
    opened by ozair-dev 3
  • Need to use `isDeactivated` field in middleware

    Need to use `isDeactivated` field in middleware

    Need to use isDeactivated field in middleware. If user is deactivated then on the api call we can send 401 response code directly from the middleware function.

    enhancement hacktoberfest 
    opened by Gauravdarkslayer 3
  • [Bug] Fix 'await' expressions are only allowed within async functions and at the top levels of modules.

    [Bug] Fix 'await' expressions are only allowed within async functions and at the top levels of modules.

    Fix the requireLogin.js middleware file inside the server folder that is breaking the app.

    File Location: server\middleware\requireLogin.js

    image

    • Error: 'await' expressions are only allowed within async functions and at the top levels of modules.
    bug hacktoberfest nodejs 
    opened by rwiteshbera 1
  • [Documentation] Write Contribution guidelines and add it to README.md

    [Documentation] Write Contribution guidelines and add it to README.md

    1. Create a Contribution.md in the root directory.
    2. Write how to contribute to this GitHub project describing the following task.
    • Fork
    • Clone
    • Branch creation
    • Make changes
    • Add and push
    • Make valid PR with proper description
    1. Link the Contribution.md file with README.md file.
    documentation good first issue hacktoberfest 
    opened by rwiteshbera 4
  • [Warning] : Chakra UI : A component is changing an uncontrolled input of type text to be controlled.

    [Warning] : Chakra UI : A component is changing an uncontrolled input of type text to be controlled.

    Warning: react_devtools_backend.js:4026 Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. MAKE SURE TO CHECK ALL INPUT TAGS

    image

    bug hacktoberfest 
    opened by rwiteshbera 2
Owner
Rwitesh Bera
Rwitesh Bera
GitHub
A social media platform aimed to capture the essence of all popular, existing social media platforms

Social Fuel Reimagining Social Media, step by step ?? About A social media platform aimed to capture the essence of all popular, existing social media

HariHaran 6 Feb 12, 2022
Social-Media-Dashboard - RESPONSIVE Dashboard for social media created with JS, HTML and CSS and with the ability to switch between DARK THEME and LIGHT THEME

Social Media Dashboard Projeto feito com base no desafio do site Front End Mento

Israel Lima 1 Feb 3, 2022
A full-stack social media application where users can post and share their coding projects, adding friends, and joining the discussion in threaded comments on project posts.

CodeFlow Description CodeFlow is a social media application where users can post and share their coding projects with others. By logging in or signing

Chris Nohilly 4 Dec 8, 2022
It is a solo Project and In this repo I try to build a E-Commerce full-stack website with MERN stack technologies. For Practice purpose.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Alok Kumar 5 Aug 3, 2022
A full fledged social media app for foodies :)

Foodzo Site is deployed on netlify : https://fooodzo.netlify.app/ and Server is deployed on heroku. This website is basically a social media for all t

Raunak Agarwal 12 Oct 1, 2022
Online Inventory Control System for an apparel manufacturing company "CASANOVA" (Pvt) Ltd. Technology stack: Node.js, Express.js, MongoDB Atlas, React.js (MERN Stack).

Project Name - Online Inventory Control System for an apparel manufacturing company "CASANOVA". The project was given a "A" grade. Group Leader - IT20

Pasindu Rukshan 1 Dec 26, 2021
A full stack mern application called "memories" where users can post interesting events occurring in their life

Memories App ?? ?? ?? Live Demo ?? ?? ?? Full Stack "R"ERN Application - from start to finish. The App is called "Memories" and it is a simple social

Phenom 7 Sep 24, 2022
Full Stack MERN website for local small business "Daisy's Cakes"

Daisys-Cakes Full Stack MERN website for local small business "Daisy's Cakes" Contribution Info This section will be deleted later when the project is

PreDevz 8 Nov 13, 2022
A health-focused app for users to be able to track workouts and nutritional data with a social media component to inspire friendly competition among the users.

A health-focused app for users to be able to track workouts and nutritional data with a social media component to inspire friendly competition among the users.

Jon Jackson 3 Aug 26, 2022
Lenster is a decentralized, and permissionless social media app built with Lens Protocol 🌿

Lenster Decentralized, and permissionless social media app ?? lenster.xyz » Discord • Issues ?? About Lenster Lenster is a decentralized, and permissi

Lenster 11.8k Jan 7, 2023
A social-media mock app for the ones who love to read - and maybe show it off

?? ?? Cachalote ?? ?? Share what you are reading and find people who also likes it - or not! What does it do? This app focuses on three main questions

Thaís França 3 May 22, 2022
An app for spinning up social media micro-platforms.

Note: This project is super early. It's not in a usable state at this point. Though I'm working on this full-time, and it's moving ahead at a fast pac

Paul Go 10 Oct 21, 2022
Flipkart Clone using MERN Stack with proper File Structure and also follow MVC architecture. You can view live app.

Flipkart Clone MERN APP Dhaval Patel's Flipkart Clone is done with top-notch features for the entrepreneur startups like Flipkart. It has strong authe

Dhaval Patel 50 Dec 29, 2022
A sweet MERN Stack app to add food recipes to your own Cook Book!

Welcome to LeCookBook ?? A sweet MERN Stack project, that lets you view, quicksearch, search by category and a randomizer with a cool UI. This page ha

Rene Ortega 2 Jun 3, 2022
A project social network with MERN + tailwindCss

Introduction This is a social-network project with MERN (MongoDb, Express, ReactJs, NodeJs) + tailwindCss Page (Not logged) Home. Login. Register. For

Frost 32 Jan 6, 2023
Sharerbox - Free, minimalist and lightweight JavaScript-based social-media sharer for websites

Sharerbox Free minimalist and lightweight JavaScript-based social-media sharer for websites. Version: 0.8.1 Description SharerBox is a free, minimalis

Juan Astudillo 3 Aug 22, 2022
A collection of social media strategies for remix-auth

Remix Auth Socials A collection of Remix Auth strategies for Oauth2 Social logins. ?? If you are interested in creating one of the planned strategies,

Tom Rowe 80 Jan 5, 2023
Lets you add a character to Hacker News links to add social media and OpenGraph previews for sharing on things like Slack or Twitter.

news.ycombinator1.com Lets you add a character to Hacker News links to add social media and OpenGraph previews for sharing on things like Slack or Dis

Ian Langworth ☠ 38 Sep 18, 2022
Chrome extension for replacing addictive and annoying features of various social media sites with inspirational quotes.

Saner Social Media Chrome extension for replacing addictive and annoying features of various social media sites with inspirational quotes. Saner Socia

Tobi Dalhof 9 Oct 4, 2022