S2Media

S2Media which stands for Simple Social Media is a social media site which is inspired from the best features of popular applications like Facebook, Twitter, Instagram and Linkedin

Why I made S2Media?

As a beginner to web devlopment, I was always facinated by sites which had a lot of user interaction, like Amazon and Facebook, but Facebook caught my eye with real time notifications

That was the instant I decided to build a simpler version of these gaigantic social media sites. The aim has always been to learn how web technologies work together when there is ton a of user interaction and to implement as many features possible including real time notifications (this was the main feature I wanted to have)

Tech Stack

Client

• React
• NextJs
• Tailwind CSS
• React Query
• Socket.io

Server

• NodeJs
• Express
• Docker
• Nginx
• Prisma
• Redis
• Postgresql

Services

• Firebase (auth)
• Cloudinary
• Github Actions

Features

• Authentication and authorization
  • Email and password
  • Google OAuth
• Posts with image uploads
  • Create posts
  • Delete posts
  • Read posts
• Like posts
• Bookmark posts
• Comment on posts
• Reply on comments
• Like comments and replies
• Real time Notifications
• Follow users
• Public and private user profiles
• Infinite scroll feed
• Autocomplete search for users

Run Locally

There are some prerequisites to run the app successfully on your local machine, follow the below steps to get started

Prerequisites

• Docker 20.10.10 or greater
• Node 14 or greater
• yarn 1.20.0 or greater (we are not using yarn 2)

Run the below commands in your terminal to confirm that all the requirements are passed to run the project Locally

• docker --version
• docker compose version
• node -v
• yarn -v

All the above commands should execute successfully and output the version numbers specified

Project setup

Clone the project

  git clone https://github.com/sairajchouhan/s2media.git

Go to the project directory

  cd s2media

Install dependencies

  yarn boot

Services setup

1) Firebase

• Click here and complete setp 1 to create a firebase project and register a web app
• Creating a service account, click here and follow the setps to generate a private key file for your service account and rename it to admin-dev.json
• Copy admin-dev.json to /apps/server/admin-dev.json

2) Cloudinary

Click here to signup for cloudinary, after successfull signup you will be redirected to the dashboard where on the top you can see your API keys

Enviornment Variables

1) Client

• Create a file named .env.local in /apps/client folder
• Copy the contents of .env.local.example to .env.local
• Browse to your firebase project settings, by clicking on the gear or cog icon in the left sidebar
• In the general setion of project settings, scroll down until you find firebaseConfig object with some project credentials
• Now fill your .env.local with the values from firebaseConfig object in your firebase project settings
• All enviornment Variables in client 👇
  • NEXT_PUBLIC_FIREBASE_API_KEY=<fill_this>
  • NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=<fill_this>
  • NEXT_PUBLIC_FIREBASE_PROJECT_ID=<fill_this>
  • NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=<fill_this>
  • NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=<fill_this>
  • NEXT_PUBLIC_FIREBASE_APP_ID=<fill_this>

2) Server

• Create a file .env in apps/server folder
• Copy the contents of apps/server/.env.example to apps/server/.env
• Navigate to your Cloudinary console and copy the values of Cloud name, API Key, and API Secret from the top of the dashboard and paste them in the respective keys in /apps/server/.env file
• Do not modify PORT and DATABASE_URL enviornment variables
• All enviornment variables in server 👇
  • CLOUDINARY_CLOUD_NAME=<fill_this>
  • CLOUDINARY_API_KEY=<fill_this>
  • CLOUDINARY_API_SECRET=<fill_this>
  • PORT=5000
  • DATABASE_URL=postgresql://postgres:password@db:5432/s2media?schema=public

Now that all requirements are in place lets start our servers

• Run yarn dev:client to start client on port 3000
• Run yarn dev:up to start our server (nginx) which listens for requests on port 5000

🥳 Hurray! you made it, go ahead to localhost:3000 to see the project in action

License

MIT