Giter Club home page Giter Club logo

socialgen's Introduction

Social Gen

A facebook/instagram-like inspired social media. This pet project is the rebranding of the old project 'Foodie'

Heroku Vercel

Table of contents

Features

This web app consists of a basic features/functionalities of a socia media

  • Login and Registration
  • Notification
  • Private Messaging
  • Post CRUD functionality
  • Comment feature
  • Profile Customization
  • Followers/Following feature
  • Search Feature

Technologies

Front End Back End
React 17.0.1 Node 12.18.1
TypeScript MongoDB
Redux Mongoose
Redux-Saga SocketIO
React Router Express JS
TailwindCSS Passport JS
PostCSS Cloudinary
Axios

Installation

Install yarn and concurrently as devDependencies

$ npm install yarn concurrently -D

To install both ends (frontend/server).

$ yarn init-project

Or to install them individually

$ cd frontend // or cd server and then run:
$ yarn install

Run locally

Before running the project, make sure to have the following done:

  • Download and install MongoDB
  • Create Firebase Project for storage bucket
  • Create Google Service Account json key and configure ENV variable to your machine

Create .env-dev or .end-prod env variables and set the following:

MONGODB_URI=<mongodb uri | default local = mongodb://localhost:27017 >
DB_NAME=<your database name>
PORT=<port eg: 9000>
CLIENT_URL=<your frontend url, default: http://localhost:3000>
SESSION_SECRET=<any secret key>
SESSION_NAME=<any name you want>
FIREBASE_PROJECT_ID=<firebase project id found on your firebase config settigs>
FIREBASE_STORAGE_BUCKET_URL=<firebase bucket url found on your firebase config settigs>
GOOGLE_APPLICATION_CREDENTIALS=<if you haven't set the ENV variable in your machine, you can set the relative path of the json file here>
FACEBOOK_CLIENT_ID=<you app client id>
FACEBOOK_CLIENT_SECRET=<you app client secret>
GITHUB_CLIENT_ID=<you app client id>
GITHUB_CLIENT_SECRET=<you app client id>

You can get your Facebook client id/secret here Facebook for developers and for GitHub here Register Github OAuth App and set the necessary env vars above.

After doing the steps above, you have to run your Mongo Server and finally you can now run both ends simultaneously by running:

$ npm start

Or you can run them individually

$ npm run start-client // frontend
$ npm run start-server // backend

// Or you can change to individual directory then run
$ cd frontend // or cd server
$ npm start

Deployment

You can deploy your react app in Vercel or whatever your preferred deployment platform. And for the backend, you can deploy your server in Heroku

Screenshots

Foodie screenshot Foodie screenshot Foodie screenshot Foodie screenshot

socialgen's People

Contributors

jgudo avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  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.