{"id":31812610,"url":"https://github.com/fiqrioemry/fullstack-social-media-application","last_synced_at":"2026-04-11T14:01:50.617Z","repository":{"id":259215934,"uuid":"876785000","full_name":"fiqrioemry/fullstack-social-media-application","owner":"fiqrioemry","description":"A full-featured Instagram clone web application built with modern technologies. Includes user authentication, photo uploads, likes, comments, real-time feed updates, and responsive UI – designed to mimic the core experience of Instagram.","archived":false,"fork":false,"pushed_at":"2025-09-22T13:52:49.000Z","size":8377,"stargazers_count":4,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-01-23T23:23:07.783Z","etag":null,"topics":["cloudinary","express","follow-system","googleoauth","jwtauthentication","mongodb","mongoose","multer","mysql-database","nodejs","nodemailer","reactjs","real-time-chat","redis-client","websocket-client"],"latest_commit_sha":null,"homepage":"https://socialmedia.ahmadfiqrioemry.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fiqrioemry.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-10-22T14:52:17.000Z","updated_at":"2025-12-19T14:14:14.000Z","dependencies_parsed_at":"2024-10-23T15:45:08.278Z","dependency_job_id":"c96dfb3e-aff6-4ac7-b687-ffab912262ad","html_url":"https://github.com/fiqrioemry/fullstack-social-media-application","commit_stats":null,"previous_names":["fiqrioemry/twitter_clone_website","fiqrioemry/fullstack-mern-social-media-web-app","fiqrioemry/fullstack_mern_instagram_clone","fiqrioemry/fullstack_social_media_app","fiqrioemry/fullstack-social-media-application"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/fiqrioemry/fullstack-social-media-application","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fiqrioemry%2Ffullstack-social-media-application","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fiqrioemry%2Ffullstack-social-media-application/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fiqrioemry%2Ffullstack-social-media-application/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fiqrioemry%2Ffullstack-social-media-application/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fiqrioemry","download_url":"https://codeload.github.com/fiqrioemry/fullstack-social-media-application/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fiqrioemry%2Ffullstack-social-media-application/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31682953,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-11T13:07:20.380Z","status":"ssl_error","status_checked_at":"2026-04-11T13:06:47.903Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cloudinary","express","follow-system","googleoauth","jwtauthentication","mongodb","mongoose","multer","mysql-database","nodejs","nodemailer","reactjs","real-time-chat","redis-client","websocket-client"],"created_at":"2025-10-11T07:11:08.426Z","updated_at":"2026-04-11T14:01:50.612Z","avatar_url":"https://github.com/fiqrioemry.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Thumbnail](./client/public/momments-thumnail.png)\n\n# 📷 Instagram Clone – Fullstack Web Application\n\nInstagram Clone is a fullstack social media web application designed to replicate core features of Instagram. It enables users to create and interact with posts, follow other users, and send real-time chat messages. Built with Node.js (Express), MySQL, and MongoDB for the backend and React.js (Vite) with TailwindCSS on the frontend, this project focuses on scalability, security, and real-time engagement.\n\n---\n\n## 1. Project Overview\n\nThis project was developed to simulate a social platform where users can post, comment, like, follow, and message each other—just like Instagram. Traditional social apps require complex data synchronization, scalable messaging systems, and role-based access. This clone demonstrates how to integrate these core systems using modern web technologies and a microservice-style structure for chat, auth, and notification handling.\n\n---\n\n## 2. Project Requirements\n\n- Enable user registration with OTP and Google OAuth\n\n- Allow users to create, edit, like, comment, and bookmark posts\n\n- Implement nested comments with reply and mention capability\n\n- Build real-time chat using Socket.IO with media support\n\n- Implement a follower/following system\n\n- Notify users of interactions such as likes, comments, follows\n\n- Secure user sessions using JWT + Redis\n\n- Manage scalable and secure media uploads via Cloudinary\n\n---\n\n## 3. The Challenge\n\n- Creating a full-featured social media app required solving multiple challenges at once:\n\n- Building a real-time chat system with persistence and media upload\n\n- Managing nested comments and mentions within posts\n\n- Supporting Google OAuth and OTP-based registration securely\n\n- Ensuring state synchronization between Redis sessions, MySQL, and MongoDB\n\n- Handling media uploads, file validation, and user file management using Cloudinary\n\n---\n\n## 4. The Approach \u0026 Solution\n\nThe backend is built using Express.js, with MySQL for structured data (users, posts, comments) and MongoDB for unstructured and real-time data (chat messages). JWT is used for secure user authentication, with Redis managing refresh tokens and session validation. Media is uploaded using Multer and stored in Cloudinary.\n\nThe frontend uses React.js (Vite) and Zustand for lightweight state management. Socket.IO enables real-time chat communication. The UI is styled with TailwindCSS and animated with Framer Motion, providing a responsive and engaging user experience.\n\n---\n\n## 5. Key Features\n\n🔐 Authentication via Google OAuth + OTP with session management via Redis\n\n🖼️ Post system with create, edit, delete, like, comment, and bookmark features\n\n💬 Nested Comments with reply and mention support\n\n🧑‍🤝‍🧑 Follow/Unfollow system with user profile exploration\n\n✉️ Real-time chat powered by Socket.IO and MongoDB\n\n🖼️ Chat media support using Cloudinary (images)\n\n🔔 Live notifications on likes, comments, follows\n\n🔍 Search users by username\n\n🧾 JWT + Refresh Token + Redis Session\n\n📥 Media handling via Multer and Cloudinary\n\n## 📦 Structured architecture for scalability and modularity\n\n## 6. Tech Stack\n\n### 6.1 Backend (Node.js \u0026 Express)\n\n- MySQL (Sequelize ORM)\n\n- MongoDB (for chat storage)\n\n- Passport.js, JWT, bcrypt (Auth)\n\n- Redis (Rate limiting + session)\n\n- Nodemailer (Email OTP)\n\n- Cloudinary + Multer (Media upload)\n\n- Socket.IO (Real-time chat)\n\n### 6.2 Frontend (React.js)\n\n- Vite (Build tool)\n\n- Zustand (Global state)\n\n- TailwindCSS\n\n- React Router\n\n- Formik + Yup (Form validation)\n\n- Framer Motion\n\n- React Hot Toast (Notification)\n\n- Embla Carousel\n\n## 7. API Endpoints\n\n### 7.1 Authentication \u0026 User Management\n\n| Method | Endpoint         | Description                |\n| ------ | ---------------- | -------------------------- |\n| POST   | /auth/signup     | Register with email        |\n| POST   | /auth/signin     | Login with email           |\n| GET    | /auth/google     | Google OAuth login         |\n| POST   | /auth/send-otp   | Send OTP                   |\n| POST   | /auth/verify-otp | Verify OTP                 |\n| POST   | /auth/refresh    | Refresh JWT token          |\n| GET    | /auth/me         | Get logged-in user profile |\n\n---\n\n### 7.2 Post \u0026 Interaction\n\n| Method | Endpoint             | Description           |\n| ------ | -------------------- | --------------------- |\n| GET    | /posts               | Get all posts (feed)  |\n| POST   | /posts               | Create a new post     |\n| PUT    | /posts/\\:id          | Edit post by ID       |\n| DELETE | /posts/\\:id          | Delete post by ID     |\n| POST   | /posts/\\:id/like     | Like a post           |\n| POST   | /posts/\\:id/bookmark | Bookmark a post       |\n| POST   | /posts/\\:id/comments | Add comment to a post |\n| POST   | /comments/\\:id/reply | Reply to a comment    |\n\n---\n\n### 7.3 Real-time Chat\n\n| Method | Endpoint       | Description                   |\n| ------ | -------------- | ----------------------------- |\n| GET    | /chat          | Get all conversations         |\n| GET    | /chat/\\:userId | Get chat with a specific user |\n| POST   | /chat/\\:userId | Send message (text/image)     |\n\n---\n\n### 7.4 Notifications \u0026 Profile\n\n| Method | Endpoint            | Description                |\n| ------ | ------------------- | -------------------------- |\n| GET    | /user/notifications | Get all notifications      |\n| PUT    | /user/notifications | Mark notifications as read |\n| GET    | /user/profile       | Get own profile            |\n| PUT    | /user/profile       | Update profile info/avatar |\n\n---\n\n### 7.5 Follow System\n\n| Method | Endpoint             | Description               |\n| ------ | -------------------- | ------------------------- |\n| POST   | /user/\\:id/follow    | Follow or unfollow a user |\n| GET    | /user/\\:id/followers | Get list of followers     |\n| GET    | /user/\\:id/following | Get list of following     |\n| GET    | /user/search         | Search users by username  |\n\n## 8. How To Run this project\n\n- Clone Repository\n\n```\ngit clone https://github.com/fiqrioemry/Fullstack_Mern_Instagram_Clone.git\ncd Fullstack_Mern_Instagram_Clone\n```\n\n#### Backend Setup\n\n- Install Dependencies\\*\\*\n\n```\ncd backend\nnpm install\n```\n\n- Configure .Env file\\*\\*\n\n```\n# host configure\nSERVER_PORT=5000\nNODE_ENV=development\nCLIENT_HOST=http://localhost:5173\n\n# token configure\nREFRESH_TOKEN=your_refresh_token_here\nACCESS_TOKEN=your_access_token_here\n\n# database\nDB_USERNAME=your_db_username\nDB_HOST=your_db_host\nDB_PASSWORD=your_db_password\nDB_DATABASE=your_db_name\n\nSERVER_API_KEY=your_server_api_key\n\n# cloudinary config\nCLOUD_NAME=your_cloud_name\nAPI_KEY=your_api_key\nAPI_SECRET=your_api_secret\nCLOUD_FOLDER=your_cloud_folder\n\n# nodemailer config\nUSER_EMAIL=your_email\nUSER_PASSWORD=your_email_password\n\n# redis config\nREDIS_PORT=your_redis_port\nREDIS_CLIENT_PASSWORD=your_redis_client_password\nREDIS_CLIENT_URL=your_redis_client_url\n\n# google config\nGOOGLE_CLIENT_SECRET=your_google_client_secret\nGOOGLE_CALLBACK_URL=http://localhost:5000/api/auth/google/callback\nGOOGLE_CLIENT_ID=your_google_client_id\n```\n\n- Run server on specified port\n\n```\nnpm run dev\n```\n\n#### Frontend Setup\n\n- Install Dependencies\n\n```\ncd frontend\nnpm install\n```\n\n- Run application\n\n```\nnpm run dev\n```\n\n## 📩9. Live Demo \u0026 Contact\n\n- 🌍 Live Preview: your-deployment-url.com\n\n- 🧑‍💻 Developer: Ahmad Fiqri Oemry\n\n- ✉️ Email: fiqrioemry@gmail.com | ahmadfiqrioemry@gmail.com\n\n- 🔗 LinkedIn: linkedin.com/in/ahmadfiqrioemry\n\n- 🌐 Website: ahmadfiqrioemry.com\n\nPlease leave a like for my project if you find it usefull. Thank you\n\n## 📜 License\n\nThis project is licensed under the MIT License. You are free to use, modify, and distribute it with attribution.\n\n## 🖼️ Preview\n\n![preview2](./client/public/preview2.png)\n![preview3](./client/public/preview3.png)\n![preview4](./client/public/preview4.png)\n![preview5](./client/public/preview5.png)\n![preview6](./client/public/preview6.png)\n![preview7](./client/public/preview7.png)\n![preview8](./client/public/preview8.png)\n![preview9](./client/public/preview9.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffiqrioemry%2Ffullstack-social-media-application","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffiqrioemry%2Ffullstack-social-media-application","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffiqrioemry%2Ffullstack-social-media-application/lists"}