TypeScript Full Stack Instagram Clone 2023 (Version 0.3)

About

This Instagram clone project replicates some of the features and functionality of the Instagram platform. It is created as a learning exercise and to enhance the skills of aspiring full-stack developer.

How to use?

1. Clone the repo.

$ git clone https://github.com/GabrielSalangsang013/ts-full-stack-instagram-clone.git

2. Open the project in VS code.

3. Open new VS code terminal.

4. Go inside the backend folder, install all the packages.

$ cd backend
$ npm install

5. Create .env file and fill up these (still inside backend folder).

# TYPE OF NODE ENVIRONMENT
NODE_ENV=DEVELOPMENT

# PORT OF SERVER
PORT=4000

# VERSION OF NODE
NODE_VERSION=18.16.0

# REACT URL - FRONTEND
REACT_URL=http://localhost:3000

# REDIS CREDENTIALS - CACHE DATABASE
REDIS_PASSWORD=
REDIS_SOCKET_HOST=
REDIS_SOCKET_PORT=

# MONGO DATABASE URI
MONGO_DB_URI=
MONGO_DB_URI_LIMITER=

# SECRETS 
# (Create secret using this code "node require('crypto').randomBytes(64).toString('hex');")
AUTHENTICATION_TOKEN_SECRET=
ACCOUNT_ACTIVATION_TOKEN_SECRET=
MFA_TOKEN_SECRET=
PUBLIC_CSRF_TOKEN_SECRET=

# SMTP CONFIGURATION. USED BREVO FORMERLY SENDINBLUE EMAIL SERVICES
SMTP_HOST=
SMTP_PORT=
SMTP_USER=
SMTP_PASSWORD=
EMAIL_FROM=

# SSO GOOGLE IDENTITY SERVICES
# (Follow this tutorial on how to create GIS Client ID - [https://youtu.be/HtJKUQXmtok?si=gwlFBdj-vIt-XoSR])
GOOGLE_IDENITY_SERVICES_CLIENT_ID=

# CLOUDINARY CREDENTIAL API
CLOUDINARY_URL=

6. Run the backend server.

$ npm run dev

7. Open another new VS code terminal and go to frontend folder.

$ cd frontend
$ npm install

8. Create .env file and fill up these (still inside frontend folder).

# REACT API - BACKEND
REACT_APP_API=http://localhost:4000

9. Run the frontend server.

$ npm run dev

Purpose

• Learn and practice full-stack web development.
• Gain hands-on experience with different technologies.
• Understand the architecture and functionality of a social media platform.

Disclaimer

This project is my full stack project to improve my skills as a aspiring full stack developer. This Instagram clone project is intended solely for educational purposes only and practice web development skills. Please note that this project is not affiliated with or endorsed by Instagram. All UI, icons, and logos are belong to the instagram or meta company and not mine, and it's fully educational purposes only.

Main Technology used for front-end and back-end

• Front-End - TypeScript Next.js
• Back-End - TypeScript Node.js

Features

• SUCCESSFULLY CLONE THE UI OF INSTAGRAM WEBSITE EXACTLY ACROSS DIFFERENT PAGES.
• USER CAN LOGIN, AND REGISTER.
• ONE EMAIL PER ACCOUNT ONLY.
• IMPLEMENT SKELETON UI TO THE HOME PAGE (ALL POSTS, AND SUGGEST FOLLOW PROFILE), EXPLORE PAGE, PROFILE PAGE (ALL POSTS), SHOW FOLLOWING AND FOLLOWERS DIALOG/MODAL, ALL COMMENTS TO SPECIFIC POST, ALL USERS WHO LIKE SPECIFIC POST, ALL USERS WHO LIKE SPECIFIC COMMENT, SAVE PAGE, ALL SAVED POST PAGE, AND ALL SEARCHING USER IN THE SEARCH SIDE NAVIGATION.
• IMPLEMENTED INFINITE SCROLL IN HOME PAGE, PROFILE PAGE (ALL POSTS), AND EXPLORE PAGE.
• CAN UPLOAD MULTIPLE IMAGES OR VIDEOS OR BOTH IN A SINGLE POST.
• CAN CROP IMAGES AND VIDEOS.
• CAN ADD INSTAGRAM FILTERS TO IMAGE/S IN EDIT OR CAN ADJUST THE IMAGE/S.
• CAN SELECT COVER PHOTO FOR VIDEO AS POSTER BASED ON THE TIMELINE OF THE UPLOADED VIDEO OR UPLOAD CUSTOM VIDEO POSTER FILE.
• CAN TRIM VIDEO.
• CAN ADD EMOJI TO THE CAPTION FOR UPLODING POST, CAN ADD HASHTAG/S, AND CAN ADD ALSO MENTION/S.
• USER HOME PAGE CONTAINS ALL POSTS POSTED BY USER FOLLOWING PROFILE AND SUGGESTED FOLLOW PROFILE.
• USER CAN LIKE ANY POST, CAN ADD COMMENTS WITH EMOJI IN HOME PAGE.
• USER CAN FOLLOW, UNFOLLOW PROFILES.
• USER CAN VIEW WHO ARE THE USER FOLLOWERS, AND FOLLOWING PROFILES.
• IF USER VIEW WHO ARE FOLLOWERS, THE USER CAN REMOVE THE FOLLOWER AS LONG THE PROFILE BELONG TO THE USER.
• IF USER VIEW WHO ARE FOLLOWING, THE USER CAN UNFOLLOW THE PROFILE AS LONG THE PROFILE BELONG TO THE USER.
• IF USER DOES NOT OWN THE PROFILE, THE USER CAN VIEW WHO ARE HIS FOLLOWING PROFILE WHO FOLLOW THE CURRENT PROFILE USER VIEWING.
• USER CAN VIEW THE SPECIFIC POST (MODAL). THE DIALOG OR MODAL VIEWING SPECIFIC POST HAS DYNAMIC WIDTH BASED ON THE IMAGE WIDTH THAT HAS BEEN LOADED.
• IF USER SELECT SPECIFIC POST, THE URL WILL CHANGE AND IF THE USER REFRESH THE PAGE, THE USER WILL REDIRECT TO THE POST ID PAGE. IN THE POST ID PAGE, USER CAN STILL VIEW WHO LIKE THE POST, WHO LIKE SPECIFIC COMMENTS, USER CAN STILL LIKE OR UNLIKE POST, SAVE OR UNSAVE POST, CAN DELETE SPECIFIC POST OR EDIT SPECIFIC POST AS LONG IT BELONGS TO THE USER, THE USER CAN DELETE SPECIFIC COMMENT AS LONG IT BELONG TO THE USER OR THE POST BELONGS TO THE USER, THE USER CAN LIKE OR UNLIKE SPECIFIC COMMENT IN THE CURRENT POST VIEWING. BELOW THE POST ID PAGE THERE WILL BE OTHER POST OF THE SPECIFIC USER WHO CURRENTLY POST THE CURRENT POST VIEWING BY THE USER.
• USER CAN LIKE OR UNLIKE POST, CAN SAVE OR UNSAVE POST, CAN LIKE OR UNLIKE SPECIFIC COMMENTS, CAN VIEW ALL USERS WHO LIKE THE POST, CAN VIEW ALL USERS WHO LIKE THE SPECIFIC COMMENT.
• USER CAN EDIT THE POST IF USER OWN THE POST.
• USER CAN DELETE SPECIFIC COMMENT IN THE POST IF THE COMMENT BELONG TO THE USER OR THE POST BELONG TO THE USER.
• USER CAN UPDATE PROFILE PICTURE IN PROFILE PAGE (AS LONG THE PROFILE BELONGS TO THE USER) OR USER CAN UPDATE PROFILE IN THE EDIT PROFILE PAGE.
• USER THE EDIT THE PROFILE BY UPDATING ANY INFORMATION SUCH AS FULL NAME, USERNAME, BIO (USER CAN ADD EMOJI, HASHTAGS, AND MENTIONS), AND WEBSITE.
• USER CAN CHANGE PASSWORD.
• USER CAN VIEW ALL SAVED POSTS.
• IF USER CLICK ANY HASHTAG IN ANY POSTS CAPTION, IT WILL REDIRECT TO THE HASHTAG PAGE AND DISPLAY ALL POSTS THAT CONTAIN THE SPECIFIC HASHTAG THE USER CLICKED.
• IF USER CLICK ANY MENTION IT WILL REDIRECT TO THE SPECIFIC PROFILE.
• IMPLEMENTED STRONG SECURITY MEASURES TO AVOID DIFFERENT ATTACKS.
• IMPLEMENTED ACCOUNT ACTIVATION VIA EMAIL.
• IMPLEMENTED TWO/MULTI FACTOR AUTHENTICATION VERIFICATION LOGIN CODE.
• IMPLEMENTED CUSTOMIZABLE AUTHENTICATION SUCH AS COOKIES, JWT, AND USER SETTINGS.
• IMPLEMENTED ERROR CODES GUIDELINES.
• IMPLEMENTED CUSTOMIZABLE EMAIL TEMPLATES.
• IMPLEMENTED SCALED NODEJS SERVER WITH AUTOMATICALLY HANDLE LOAD BALANCING.
• IMPLEMENTED CACHING TO IMPROVE PERFORMANCE OF THE APPLICATION.
• IMPLEMENTED IMAGE OPTIMIZATION TO ALL IMAGES ACROSS DIFFERENT PAGES.
• AND MORE...

Security Measures Implemented (Basic-Advanced):

• XSS ATTACK
• NOSQL INJECTION ATTACK
• SQL INJECTION ATTACK (AND OTHER CODE INJECTION ATTACKS)
• DOS OR DDOS ATTACK OR BRUTE-FORCE ATTACKS
• CSRF ATTACK
• COOKIE POISONING ATTACK
• PASSWORD HACKING
• INFORMATION LEAKAGE

VIDEO DEMONSTRATION LINK - https://youtu.be/S_R6l9XvQE0

MORE IMAGES

LOGIN PAGE

REGISTER PAGE

MFA PAGE

HOME PAGE (SIDE NAVIGATION, ALL POSTS POSTED BY USER FOLLOWING PROFILE (ALL POST ARE EITHER NEW POST THAT HAS NOT VIEW VIEWED OR ALREADY BEEN VIEWED BY THE USER), AND ALL NEW SUGGEST FOLLOW PROFILE).

PROFILE PAGE (NOT OWN PROFILE)

EXPLORE PAGE

PROFILE PAGE (OWN PROFILE)

HASHTAG PAGE (#ModelLife)

VIEW SPECIFIC POST

VIEW SPECIFIC POST (ALL LIKES)

PROFILE PAGE (NOT OWN PROFILE) (ALL FOLLOWING)

PROFILE PAGE (NOT OWN PROFILE) (ALL FOLLOWERS)

SIDE NAV (SEARCH USER / PROFILE)

SPECIFIC POST PAGE (IF USER REFRESH THE PAGE WHILE IN VIEWING THE SPECIFIC POST)

CREATE NEW POST

CROP IMAGE (AFTER UPLOADING IMAGE/S)

CROP VIDEO (AFTER UPLOADING VIDEO/S)

EDIT PHOTO ADD INSTAGRAM FILTER (AFTER CROPPING IMAGE/S)

EDIT PHOTO ADJUST IMAGE (AFTER CROPPING IMAGE/S)

EDIT VIDEO (SELECT COVER PHOTO BASED ON THE DURATION OF THE VIDEO, UPLOAD CUSTOM COVER PHOTO, AND TRIM VIDEO) (AFTER CROPPING VIDEO/S)

ADD CAPTION (AFTER EDITING IMAGE/S AND/OR VIDEO/S)

SAVED PAGE

ALL SAVED POST PAGE

AND MORE...