Snapgram

Snapgram is a modern social media website with a stunning UI with a native mobile feel.

Live Site : https://snapgram-akramexp.vercel.app

Features

Snapgram provides user a bunch of features in the website which are listed below

• Create your account
• Login to your account
• Update your account details and your profile picture
• Create your post
• Update your post
• Delete your post
• Explore other people's posts
• Save or Like their posts
• Seperate sections to see all the liked and saved posts
• Search your friends and follow them
• Get to see the latest posts of your friends on your home page
• Checkout your following and followers list and of the friends you follow

Tech Stack

• HTML
• Tailwind CSS
• Javascript
• Typescript
• React
• MongoDB
• Express

Installation

Start the frontend server

Add these env variables to your .env file in the root directory of frontend

VITE_BACKEND_URL = http://localhost:5000/api

Install Dependencies

npm install

Run the server

npm run dev

Start the backend server

Add these env variables to your .env file in the root directory of backend

PORT = 5000

MONGODB_URI =

CLOUDINARY_CLOUD_NAME =
CLOUDINARY_API_KEY =
CLOUDINARY_API_SECRET =

ACCESS_TOKEN_SECRET =
ACCESS_TOKEN_EXPIRY =

FRONTEND_URL = http://localhost:5173

Install Dependencies

npm install

Run the server

npm run dev