{"id":15177688,"url":"https://github.com/adhamelrouby/react-instagram-clone","last_synced_at":"2026-02-05T08:32:22.298Z","repository":{"id":255259069,"uuid":"849032044","full_name":"AdhamElRouby/React-Instagram-Clone","owner":"AdhamElRouby","description":"📷 Full-stack Instagram Clone using React.js and Firebase","archived":false,"fork":false,"pushed_at":"2024-09-21T00:19:57.000Z","size":8349,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-05T02:41:51.821Z","etag":null,"topics":["chakra-ui-react","firebase","firebase-auth","firebase-firestore","firebase-storage","full-stack-web-development","instagram","react-hooks","react-router","reactjs","social-media"],"latest_commit_sha":null,"homepage":"https://react-instagram-clone-e513oqs5e-adham-el-roubys-projects.vercel.app","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/AdhamElRouby.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}},"created_at":"2024-08-28T21:14:33.000Z","updated_at":"2024-09-21T00:20:00.000Z","dependencies_parsed_at":"2024-11-09T17:11:30.082Z","dependency_job_id":null,"html_url":"https://github.com/AdhamElRouby/React-Instagram-Clone","commit_stats":{"total_commits":10,"total_committers":1,"mean_commits":10.0,"dds":0.0,"last_synced_commit":"ce6ae4e0424f4fe1dff86901ca4a3e95e688b357"},"previous_names":["adhamelrouby/instagram-clone"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AdhamElRouby%2FReact-Instagram-Clone","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AdhamElRouby%2FReact-Instagram-Clone/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AdhamElRouby%2FReact-Instagram-Clone/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AdhamElRouby%2FReact-Instagram-Clone/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AdhamElRouby","download_url":"https://codeload.github.com/AdhamElRouby/React-Instagram-Clone/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240325009,"owners_count":19783596,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["chakra-ui-react","firebase","firebase-auth","firebase-firestore","firebase-storage","full-stack-web-development","instagram","react-hooks","react-router","reactjs","social-media"],"created_at":"2024-09-27T14:42:04.770Z","updated_at":"2026-02-05T08:32:22.254Z","avatar_url":"https://github.com/AdhamElRouby.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Firebase Instagram Clone\n\nA Full-stack Instagram clone built with React.js and Firebase, featuring user authentication (login, signup, reset password), following other users, creating and managing posts, and commenting, offering a full social media experience.\n\n\n\n\u003cdiv align=\"center\"\u003e\n\n\u003cimg src=\"./public/img/demo.gif\" alt=\"App Demo\"\u003e\n\n\u003c/div\u003e\n\n\n## Tech Stack\n\n- \u003cimg src=\"https://img.shields.io/badge/-HTML5-E34F26?logo=HTML5\u0026logoColor=white\u0026style=flat\" alt=\"html5\"\u003e\n- \u003cimg src=\"https://img.shields.io/badge/-CSS3-1572B6?logo=CSS3\u0026logoColor=white\u0026style=flat\" alt=\"css3\"\u003e\n- \u003cimg src=\"https://img.shields.io/badge/-Sass-CC6699?logo=Sass\u0026logoColor=white\u0026style=flat\"  alt=\"Sass\"\u003e\n- \u003cimg src=\"https://img.shields.io/badge/-JavaScript-F7DF1E?logo=JavaScript\u0026logoColor=white\u0026style=flat\" alt=\"JavaScript\"\u003e\n- \u003cimg src=\"https://img.shields.io/badge/-React-61DAFB?logo=React\u0026logoColor=black\u0026style=flat\" alt=\"React.js\"\u003e\n \n## Features\n\n### User Experience:\n\n- Start by logging in to personalize your experience. Don't worry you can log out later or reset your password if you forgot.\n\n- Edit your profile by updating your profile picture, adding a bio, and changing your username or full name.\n\n- Follow other users to see their latest posts in your home page feed.\n\n- Engage with content by liking posts and leaving comments.\n\n- Create and share your own posts with engaging captions.\n\n- Search for users to expand your network and view their profiles and posts.\n\n\n### Tech Functionalities\n\n- Built a single-page application **(SPA)** with `react-router-dom`.\n\n- Implemented **user authentication**, **form validation**, and **password reset** functionality using **Firebase** and `react-firebase-hooks`.\n\n- Utilized **Firebase Storage** for image uploads and generating re-usable URLs for these images\n\n- Implemented **CRUD operations** across both the front end (using React states) and the back end (using Firestore), ensuring data integrity and consistency.\n\n- Employed **Firestore** to store and retrieve user data and posts by performing data queries, with strict security rules, allowing only authenticated users to perform any writing operation.\n\n- used **custom hooks** and **react context API** to **manage global states** (changing posts, updating profiles, liking and commenting) and **avoid prop drilling.**\n\n- Utilized `@chakra-ui/react` for building smooth UI features and enhancing the user experience like **loading skeletons**, **modals**, **toasts** (to indicate errors, unauthenticated actions, and successful operations), **tooltips**, **loading buttons**, and more.\n\n## Privacy Terms\n\nPlease note that all images, comments, and post captions you upload to the web application will be securely stored in Firestore. These data points will be handled responsibly and will not be misused in any way.\n\nFor users signing in with **email**, only your email address will be visible to the developer, while your **password** is securely managed by Firebase and remains inaccessible.\n\nFor users signing in with **Google**, the login process will provide the application with your **email address**, **profile picture**, and basic account information. The developer will only utilize **the email address**, **username**, and **profile picture** to create your user profile, and no other data will be accessed or used without **your explicit consent**.\n\n**Your privacy and data security are paramount.**\n\n## Run Locally\n\nClone the project\n\n```bash\n  git clone https://github.com/AdhamElRouby/React-Instagram-Clone.git\n```\n\nGo to the project directory\n\n```bash\n  cd .\\React-Instagram-Clone\n```\n\nOpen with VSCode\n\n```bash\n  code .\n```\n\nInstall dependencies\n\n```bash\n  npm install\n```\n\nOpen with live server\n\n```bash\n  npm run dev\n```\n\n## Contributing\n\nI welcome contributions to this project! Feel free to submit pull requests and suggest improvements. \nIf you have any questions or need assistance, don’t hesitate to contact me at adhamelrouby@aucegypt.edu.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadhamelrouby%2Freact-instagram-clone","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadhamelrouby%2Freact-instagram-clone","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadhamelrouby%2Freact-instagram-clone/lists"}