{"id":20788599,"url":"https://github.com/narayan954/dummygram","last_synced_at":"2025-04-09T03:14:09.112Z","repository":{"id":60521479,"uuid":"526740108","full_name":"narayan954/dummygram","owner":"narayan954","description":"DummyGram is a social media application where we have posts, stories, chat, friends, authentication, comment, delete, share and like feature. It uses ReactJs in the frontend for the UI and Firebase for the backend storing the users, posts, stories and comments.","archived":false,"fork":false,"pushed_at":"2025-04-01T09:14:32.000Z","size":33771,"stargazers_count":85,"open_issues_count":85,"forks_count":180,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-01T18:22:30.388Z","etag":null,"topics":["firebase","hackotberfest","hacktoberfest2023","react"],"latest_commit_sha":null,"homepage":"https://narayan954.github.io/dummygram/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/narayan954.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["narayan954"],"patreon":"narayansoni","custom":["https://www.paypal.me/starkloves3000"]}},"created_at":"2022-08-19T20:15:52.000Z","updated_at":"2025-02-21T16:30:43.000Z","dependencies_parsed_at":"2024-06-17T11:34:04.472Z","dependency_job_id":"fbe2bf2e-0789-40e1-bcba-059ffa118e68","html_url":"https://github.com/narayan954/dummygram","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/narayan954%2Fdummygram","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/narayan954%2Fdummygram/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/narayan954%2Fdummygram/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/narayan954%2Fdummygram/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/narayan954","download_url":"https://codeload.github.com/narayan954/dummygram/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247968374,"owners_count":21025823,"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":["firebase","hackotberfest","hacktoberfest2023","react"],"created_at":"2024-11-17T15:02:02.023Z","updated_at":"2025-04-09T03:14:09.094Z","avatar_url":"https://github.com/narayan954.png","language":"JavaScript","funding_links":["https://github.com/sponsors/narayan954","https://patreon.com/narayansoni","https://www.paypal.me/starkloves3000"],"categories":[],"sub_categories":[],"readme":"\u003cdiv id=\"top\"\u003e\u003c/div\u003e\n\u003cdiv align=\"center\"\u003e\n\n\u003cimg  src=\"src/assets/logo.png\"  alt=\"Dummygram\"  height=\"150\"\u003e\n\n[See Live!](https://narayan954.github.io/dummygram/)\n\n### _Instagram_, dummified\n\n\u003cdiv align=\"center\"\u003e\n      \u003cimg alt=\"badge\" src=\"https://forthebadge.com/images/badges/built-with-love.svg\" /\u003e\n      \u003cimg alt=\"badge\" src=\"https://forthebadge.com/images/badges/uses-brains.svg\" /\u003e\n      \u003cimg alt=\"badge\" src=\"https://forthebadge.com/images/badges/powered-by-responsibility.svg\" /\u003e\n      \u003cbr\u003e\n      \u003cimg alt=\"badge\" src=\"https://img.shields.io/github/repo-size/narayan954/dummygram?style=for-the-badge\" /\u003e\n      \u003cimg alt=\"badge\" src=\"https://img.shields.io/github/issues-raw/narayan954/dummygram?style=for-the-badge\" /\u003e\n      \u003cimg alt=\"badge\" src=\"https://img.shields.io/github/forks/narayan954/dummygram?style=for-the-badge\" /\u003e\n      \u003cimg alt=\"badge\" src=\"https://img.shields.io/github/issues-pr-closed/narayan954/dummygram?style=for-the-badge\" /\u003e\n      \u003cbr\u003e\n      \u003cimg alt=\"badge\" src=\"https://img.shields.io/github/stars/narayan954/dummygram?style=for-the-badge\" /\u003e\n      \u003cimg alt=\"badge\" src=\"https://img.shields.io/github/contributors/narayan954/dummygram?style=for-the-badge\" /\u003e\n      \u003cimg alt=\"badge\" src=\"https://img.shields.io/github/last-commit/narayan954/dummygram?style=for-the-badge\" /\u003e\n \u003c/div\u003e\n\n---\n\n\u003c/div\u003e\n\n\u003ch1 align=\"center\"\u003eAbout Dummygram\u003c/h1\u003e\n\n## Vision\n\nWhen you start learning ReactJS, it's crucial to work on projects that interest you. One exciting idea is to create a clone of an app owned by the company that created ReactJS. In this case, let's build an Instagram clone. It will have similar features to the popular social media platform, but we can also add some new functions.\n\nCreating an Instagram clone is a fantastic chance for learning and improvement. By doing this project, you can contribute to the ReactJS community while also growing your knowledge and skills. It will be a fun way to practice and make something cool!\n\n## Status\n\nSince September 2022, Dummygram has been a project that the team is passionate about and committed to making excellent. They put the project on GitHub from the beginning to work together with the community and welcome contributions from others.\n\nThe team has clear priorities and ongoing work to improve Dummygram, but they also focus on making it look unique and attractive. They have a great sense of design and want the app to stand out from other similar apps. Using ReactJS, they can add custom styles and create a fun and exciting experience for users.\n\nOverall, the Dummygram team loves what they do and wants to make the app visually stunning and enjoyable for everyone!\n\n## Features\n\n**User Authentication:** DummyGram includes a user authentication system, allowing users to create accounts, log in, and log out securely. This feature ensures that only authenticated users can access and interact with the app.\n\n**Posts:** Users can create posts and share them with others. Posts can include various types of content, such as images, videos, or text. Users can upload media files from their devices or provide URLs for online content. These posts are displayed in a feed-like format.\n\n**Commenting:** DummyGram enables users to comment on posts. Users can write and submit comments on individual posts, engaging in conversations and discussions with other users.\n\n**Like Feature:** Users can express their appreciation for posts by liking them. This feature allows users to show their support and interest in specific content shared on DummyGram.\n\n**Delete Functionality:** DummyGram allows users to delete their own posts. This feature provides users with control over their content, enabling them to remove posts they no longer wish to keep on the platform.\n\n**Frontend Framework:** The user interface of DummyGram is built using ReactJS, a popular JavaScript library for building interactive user interfaces. ReactJS allows for efficient rendering of components and provides a smooth and responsive user experience.\n\n**Backend and Data Storage:** DummyGram utilizes Firebase as the backend service for storing user data, posts, and comments. Firebase provides a scalable and reliable platform for handling backend functionalities and offers real-time database capabilities, ensuring efficient data storage and retrieval.\n\n# Table of Contents\n\n- [Table of Contents](#table-of-contents)\n  - [Codebase](#codebase)\n    - [Technologies](#technologies)\n    - [Folder structure](#folder-structure)\n  - [Project Setup](#project-setup)\n    - [First time setup](#first-time-setup)\n    - [Installation](#installation)\n    - [Running the app locally](#running-the-app-locally)\n      - [Start the servers](#start-the-servers)\n  - [Testing](#testing)\n    - [Introduction to Cypress](#introduction-to-cypress)\n    - [Start Testing](#start-testing)\n    - [Create New Test Cases](#create-new-test-cases)\n  - [How to get started with Open Source](#how-to-get-started-with-open-source)\n  - [How to use Dummygram](#how-to-use-dummygram)\n  - [Contributing](#contributing)\n  - [Rules](#rules)\n    - [Contributions and discussion guidelines](#contributions-and-discussion-guidelines)\n    - [Reporting a bug or discussing a feature idea](#reporting-a-bug-or-discussing-a-feature-idea)\n    - [Fixing a bug or implementing a new feature](#fixing-a-bug-or-implementing-a-new-feature)\n  - [Code of Conduct](#code-of-conduct)\n  - [Programs](#programs)\n  - [Feedback](#feedback)\n  - [👩🏽‍💻 Contributing](#-contributing)\n  - [Thanks to all Contributors 💪](#thanks-to-all-contributors-)\n  - [License](#license)\n\n## Codebase\n\n### Technologies\n\nWith the ground rules out of the way, let's talk about the coarse architecture of this mono repo:\n\n**Frontend JavaScript**: We use React to power our frontend apps. Almost all of the code you'll touch in this codebase will be JavaScript.\n\u003cimg alt=\"badge\" src=\"http://3con14.biz/code/_data/js/intro/js-logo.png\"  alt=\"JS\"  width=\"30\"  height=\"30\"\u003e\n\nHere is a list of all the big technologies we use:\n\n- **React**: Frontend React app \u003cimg  src=\"https://raw.githubusercontent.com/jalbertsr/logo-badge-images/master/img/react_logo.png\"  alt=\"REACT\"  width=\"35\"  height=\"35\"\u003e\n\n- **Firebase**: Data storage and Authentication \u003cimg  src=\"https://cdn4.iconfinder.com/data/icons/google-i-o-2016/512/google_firebase-2-128.png\"  alt=\"FIREBASE\"  width=\"30\"  height=\"30\"\u003e\n\n### Folder structure\n\n```sh\n\ndummygram/\n\n├── public # Public files used on the frontend\n\n├── src # Frontend Code in React\n\n```\n\n## Project Setup\n\n### First time setup\n\nThe first step to running dummygram locally is downloading the code by cloning the repository:\n\n\u003cdetails\u003e\u003csummary\u003eVideo Demo to run Dummygram in your local under 2 minutes\u003c/summary\u003e \u003cbr\u003e\n\n\u003chttps://github.com/narayan954/dummygram/assets/77617189/c21f0bdc-e845-4c32-b148-54d8048cbc33\u003e\n\n\u003c/details\u003e\n\n```sh\n\ngit clone git@github.com:narayan954/dummygram.git\n\n```\n\nIf you get `Permission denied` error using `ssh` refer [here](https://help.github.com/articles/error-permission-denied-publickey/)\n\nor use `https` link as a fallback.\n\n```sh\n\ngit clone https://github.com/narayan954/dummygram.git\n\n```\n\n### Installation\n\nDummygram has a single installation step:\n\n- **Go to dummygram directory**:\n\n```sh\n\ncd dummygram\n\n```\n\n- **Install the dependencies**:\n\n```sh\n\nnpm install\n\n```\n\n\u003cp align=\"center\"\u003eOR\u003c/p\u003e\n\n```sh\n\nyarn install\n\n```\n\nYou've now finished installing everything! Let's start :100:\n\nPs: if you're getting error installing the dependencies, try --force command along with npm install. For example\n\n```sh\n\nnpm install --force\n\n```\n\n\u003cp align=\"center\"\u003eOR\u003c/p\u003e\n\n```sh\n\nyarn --force\n\n```\n\nNow you're ready to run the app locally and sign into your local instance!\n\n### Running the app locally\n\n#### Start the servers\n\nTo Start the development server run\n\n```sh\nnpm start\n```\n\n\u003cp align=\"center\"\u003eOR\u003c/p\u003e\n\n```sh\n\nyarn start\n\n```\n\n\u003cdiv  align=\"center\"\u003e\u003cimg  height=\"200px\"  src=\"https://user-images.githubusercontent.com/77617189/192947926-37284128-9965-46a4-b29b-c75e47b2f76b.svg\" /\u003e\u003c/div\u003e\n\n## Testing\n\n\u003cdetails\u003e\n    \u003csummary\u003eInstructions\u003c/summary\u003e\n\nHere we will see, how to run tests and how to setup new test cases.\n_We will be using Cypress for our testing purposes._\n\n### Introduction to Cypress\n\n\u003cimg src='https://docs.cypress.io/img/guides/overview/v10/real-world-app.png' width='920'\u003e\n\n\u003cdetails\u003e\u003csummary\u003eSee More\u003c/summary\u003e \u003cbr\u003e\n\nCypress is a relatively new automated tests tool which is gaining popularity at a very rapid pace\n\nHere is the home page for Cypress if someone wants to look it up\n\u003chttps://www.cypress.io/\u003e\n\nCypress has very strong documentation so a new comer could find most of the information from their own site\n\u003chttps://docs.cypress.io/guides/overview/why-cypress.html#In-a-nutshell\u003e\n\nAlso as a starting point it would be good to go through these tutorial videos\n\u003chttps://docs.cypress.io/examples/tutorials\u003e\n\n\u003c/details\u003e\n\n---\n\n### Start Testing\n\n\u003e You need to [setup](#project-setup) the project as usual, and after that we can run our test cases.\n\n\u003csub\u003eSee It Running\u003c/sub\u003e\n\n\u003chttps://user-images.githubusercontent.com/84321236/223492442-1b161401-4ca2-41f7-832d-7302e2832b5a.mp4\u003e\n\n\u003cdetails\u003e\u003csummary\u003eSee More\u003c/summary\u003e \u003cbr\u003e\n\n1. **Run This Command**\n\n```zsh\nnpm run cypress:open\n```\n\n_It will open up this window,_\n\n\u003cimg src='https://i.ibb.co/QC72wq8/image.png' width='720'\u003e\n\n\u003e As you can see, we only added E2E testing\n\n2. **Click on E2E Testing \u0026 Select Browser**\n\n\u003cimg src='https://i.ibb.co/4TpgRgG/image.png' width='720'\u003e\n\n3. **Now Click on any Test to Run it**\n\n\u003cimg src='https://i.ibb.co/z59yv8B/image.png' width='720'\u003e\n\n\u003c/details\u003e\n\n---\n\n### Create New Test Cases\n\nWorking Directory: `/cypress/` \u003cbr\u003e\nE2E Files: `/cypress/e2e/`\n\n\u003cimg width=\"720\" alt=\"image\" src=\"https://user-images.githubusercontent.com/84321236/223501582-99163f05-940c-4e9a-a59a-8951a1be1e3a.png\"\u003e\n\n\u003cdetails\u003e\u003csummary\u003eSee More\u003c/summary\u003e \u003cbr\u003e\n\n**To Create New E2E Tests**\n\n1. Goto `/cypress/e2e/`\n2. You can create new file (similar to `spec.cy.js`). \u003cbr\u003e\n   **OR** add new `it` function inside existing `describe` function in this existing file.\n\n\u003cimg width=\"720\" alt=\"test-file-screenshot\" src=\"https://user-images.githubusercontent.com/84321236/223485219-2fd93fa7-686e-4a60-92b0-2a927ee4a7b0.png\"\u003e\n\n3. Then, [test](#start-testing) your test cases:\n\n   ```zsh\n   npm run cypress:open\n   ```\n\n\u003c/details\u003e\n\u003c/details\u003e\n\n---\n\n## How to get started with Open Source\n\nHere's a quick rundown on how to get started with open source. First of all, let's know some basic terminologies:\n\n- **Git:** This is a versioning system that lets you store your code and code history on your local computer, preventing loss and allowing sharing of that code.\n- **Github:** This is a server that lets you store the history in a database.\n- **Open Source:** A project is said to be open sourced if you can see the code on GitHub.\n- **Fork:** This is a copy that you make of a project on GitHub, it gets added to your repositories.\n- **Repository:** A project on GitHub is called a repository.\n- **Pull Request:** This is a fix for an issue proposed to be done in a project, this consists of you editing a file in the project.\n- **Issue:** An issue is a change that should be done in a project, can be a bug, a new feature or a suggestion to a project.\n- **Branch:** A branch is a new workspace derived from the default workspace(main or master) that allows you to work on something without affecting the original code.\n\nNow you know some basic terms, let's get into how to get started with some resources to let you understand open source better:\n\n- [Crash Course to Git and Github](https://www.youtube.com/watch?v=apGV9Kg7ics) - Video\n- [A complete Guide to Open Source](https://www.youtube.com/watch?v=yzeVMecydCE) - Video\n- [Guide to Open Source](https://www.freecodecamp.org/news/how-to-contribute-to-open-source-projects-beginners-guide/) - Article\n\n## How to use Dummygram\n\n[Flow of Control](FlowOfControl.md)\n\n## Contributing\n\n**We heartily welcome any and all contributions that match our engineering standards! :raised_hands:**\n\nThat being said, this codebase isn't your typical open source project because it's not a library or package with a limited scope—it's our entire product.\n\n## Rules\n\n- **No `console.log`s in any file**: We use the `debug` module across the codebase to log debugging information in development only. Never commit a file that contains a `console.log` as CI will fail your build. The only exceptions are errors, which you can log, but you have to use `console.error` to be explicit about it\n- **Code reviews**: All submissions, including submissions by project members, require review. We use GitHub pull requests for this purpose.\n\n### Contributions and discussion guidelines\n\n🎊All conversations and communities on Dummygram agree to GitHub's [Community Guidelines](https://help.github.com/en/github/site-policy/github-community-guidelines) and [Acceptable Use Policies](https://help.github.com/en/github/site-policy/github-acceptable-use-policies).\n\n🎊Code of conduct is applied for all conversations that happen within the contributor community here on GitHub.\n\n🎊Discussions are important,productive and respectful.\n\n🎊**Remember**:-There are real people on the other side of that screen:exclamation:\n\n### Reporting a bug or discussing a feature idea\n\nIf you found a technical bug on Dummygram or have ideas for features we should implement, the issue tracker is the best place to share your ideas. Make sure to follow the issue template and you should be golden! ([click here to open a new issue](https://github.com/narayan954/dummygram/issues/new))\n\n### Fixing a bug or implementing a new feature\n\n- If you find a bug on Dummygram and open a PR that fixes it we'll review it as soon as possible to ensure it matches our engineering standards.\n- If you want to implement a new feature, open an issue first to discuss what it'd look like .\n- If you want to contribute but are unsure to start, we have [a \"good first issue\" label](https://github.com/narayan954/dummygram/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) which is applied to newcomer-friendly issues. Take a look at [the full list of good first issues](https://github.com/narayan954/dummygram/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) and pick something you like!\n- Want to fix a bug or implement an agreed-upon feature? Great, jump to the [local setup instructions](#first-time-setup)!\n\n## Code of Conduct\n\nDummygram is now part of GitHub. For code of conduct, please see [GitHub's Community Guidelines](https://help.github.com/en/github/site-policy/github-community-guidelines) and [Acceptable Use Policies](https://help.github.com/en/github/site-policy/github-acceptable-use-policies).\n\n\u003cdiv  align=\"center\"\u003e\u003cimg  height=\"70px\"  src=\"https://user-images.githubusercontent.com/77617189/192942891-31b9152c-918b-4fac-af05-0ad6b1f594aa.svg\"  /\u003e\u003c/div\u003e\n\n## Programs\n\n\u003cdetails\u003e\n    \u003csummary\u003eList\u003c/summary\u003e\n\u003cp align=\"center\"\u003e\n\n\u003ca href=\"https://hacktoberfest.com/\"\u003e\u003cimg alt=\"hacktoberfest logo\" src=\"https://user-images.githubusercontent.com/79099734/189589410-ca17afb8-5855-4316-918a-054f27594809.png\"\u003e\u003c/a\u003e\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://www.codepeak.tech/\"\u003e\u003cimg alt=\"codepeak\" src=\"https://user-images.githubusercontent.com/77617189/205454287-c5bffb68-d08f-4103-a191-02b7f54fb81f.png\" width=\"47%\" height=\"300\"\u003e\u003c/a\u003e\n\u0026nbsp;\n\u003ca href=\"https://kwoc.kossiitkgp.org/\"\u003e\u003cimg alt=\"kwoc\" src=\"https://user-images.githubusercontent.com/77617189/205456062-b28a333d-c48b-41ef-96c3-676ef2363ade.png\" width=\"47%\" height=\"300\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://gssoc.girlscript.tech/\"\u003e\u003cimg alt=\"Girlscript Summer of Code Logo\" src=\"src/assets/gssoc.webp\" width=\"47%\"\u003e\u003c/a\u003e\n\u0026nbsp;\n\u003ca href=\"https://jwoc.tech/\"\u003e\u003cimg alt=\"jwoc program\" src=\"https://user-images.githubusercontent.com/77617189/219851281-59de273a-388a-4367-a7c6-39d37196ee90.png\"  width=\"47%\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003ca href=\"https://iwoc.live/\"\u003e\u003cimg alt=\"iwoc program\" src=\"https://user-images.githubusercontent.com/77617189/215256338-87d294c6-c33e-4da6-8236-f8ab6fae6c4b.png\"\u003e\u003c/a\u003e\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n## Feedback\n\nIf you have any feedback or suggestions please reach out to the Project-Maintainer [Narayan Soni](https://github.com/narayan954)\n\n\u003cdiv align=\"left\"\u003e\nFor further queries and whereabouts you can communicate and reach out to the owner through \u003ca href=\"https://www.linkedin.com/in/narayan-soni/\"\u003eLinkedin\u003c/a\u003e \u0026 \u003ca href=\"mailto:narayansoni954@gmail.com\"\u003eemail\u003c/a\u003e\n\u003c/div\u003e\n\n## 👩🏽‍💻 Contributing\n\n- Contributions make the open source community such an amazing place to learn, inspire, and create.\n- Any contributions you make are greatly appreciated.\n- Check out our [contribution guidelines](/CONTRIBUTING.md) for more information.\n\n\u003cbr\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n## Thanks to all Contributors 💪\n\nThanks a lot for spending your time helping dummygram grow. Thanks a lot! Keep rocking 🍻\n\n\u003cdetails\u003e\n    \u003csummary\u003eContributors\u003c/summary\u003e\n    \u003cdiv\u003e\n      \u003ca href=\"https://github.com/narayan954/dummygram/graphs/contributors\"\u003e\n      \u003cimg alt=\"contributor graph\" src=\"https://contrib.rocks/image?repo=narayan954/dummygram\"/\u003e\n      \u003c/a\u003e\n    \u003c/div\u003e\n\u003c/details\u003e\n\n## License\n\n**MIT License, see the [LICENSE](./LICENSE) file.**\n\n\u003cbr\u003e\n\n\u003ch3\u003e\u003cb\u003eTake a moment to star ⭐ the project if you like it\u003c/b\u003e\u003c/h3\u003e\n    \u003ch3\u003eDo checkout the other repos 💫\u003c/h3\u003e\n\n\u003c/div\u003e\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eBack to top\u003c/a\u003e)\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnarayan954%2Fdummygram","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnarayan954%2Fdummygram","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnarayan954%2Fdummygram/lists"}