Stargram - a social network

Stargram is a social media website built with TypeScript. Share your stories and connect with people around the world. Frame your views on a social space through your creativity.

     

---

Live Website: Stargram

---

Video Demo:

Stargram-gh.mp4

---

Built using:

Client:

• TypeScript - statically typed language.
• ReactJS - Frontend JavaScript library.
• React Router - Frontend routing & navigation.
• Redux - Centralized state management.
• React-Redux - Official React bindings for Redux.
• Starling UI - Component Library.
• SCSS - CSS preprocessor.
• Cloudinary - cloud storage for images.
• Custom Axios Hook - to perform asynchronous API calls.

Server:

• TypeScript - statically typed language.
• NodeJS - JavaScript runtime.
• ExpressJS - back-end web application framework.
• MongoDB - NoSQL database.
• Mongoose - Object Data Modeling (ODM) library for MongoDB.

---

Features

• Create a Post with image and caption
• Edit & Delete Post
• Homepage (User Feed)
• Sort User Feed by Date, Trending & Recent
• User Profile
• Add Profile Picture, Bio and website
• Follow / Unfollow users
• Explore Feed (explore new people)
• Bookmark Posts
• Authentication

---

Run Locally

• Clone the project git clone https://github.com/iRohitGaur/stargram.git

• Go to the project directory

• cd stargram

• Install dependencies yarn install

• Create a .env file

• Add the following configuration to your .env file

REACT_APP_JWT_SECRET=<random string here>
REACT_APP_BACKEND_URL=<your backend url here>
REACT_APP_CLOUDINARY_UPLOAD_PRESET=<your cloudinary bucket name>
REACT_APP_CLOUDINARY_API_URL=<cloudinary api url here>

• Start the server yarn start

---

Learning and Growing with @neogcamp