See Live!

Instagram, dummified

---

What is Dummygram?

Vision

When you learn ReactJs it seems obvious to work on some projects and for the projects you might want to choose something that interests you. How about a clone of the app developed by the company that released ReactJs ? Yes, you might be getting the point, this application is basically a clone of the original Instagram and tends to add features like instagram or in fact the features that could not have been added in the instagram. So what are you waiting for? Use this opportunity to contribute and learn. 😃

Status

Dummygram has been in development since September 2022 and is part of GitHub since the very beginning. Our current priorities and what we are working on is kind of obvious, but still we want to give it a unique look and make it feature rich.:sparkles:

Docs

• Table of Contents

  • Codebase

    • Technologies
    • Folder Structure

  • Project Setup

    • First time setup
    • installation
    • Running the app locally

  • How to get started with Open Source

  • Contributing

  • Rules

  • Open Source Programs

  • License

Codebase

Technologies

With the ground rules out of the way, let's talk about the coarse architecture of this mono repo:

Frontend JavaScript: We use React to power our frontend apps. Almost all of the code you'll touch in this codebase will be JavaScript.

Here is a list of all the big technologies we use:

• React: Frontend React app

• Firebase: Data storage and Authentication

Folder structure

dummygram/

├── public # Public files used on the frontend

├── src # Frontend Code in React

Project Setup

First time setup

The first step to running dummygram locally is downloading the code by cloning the repository:

git clone [email protected]:narayan954/dummygram.git

If you get Permission denied error using ssh refer here

or use https link as a fallback.

git clone https://github.com/narayan954/dummygram.git

Installation

Dummygram has a single installation step:

• Install the dependencies:

npm install

You've now finished installing everything! Let's start 💯

Ps: if you're getting error installing the dependencies, try --force command along with npm install. For example

npm install --force

Now you're ready to run the app locally and sign into your local instance!

Running the app locally

Start the servers

To Start the development server run

npm run dev

How to get started with Open Source

Here's a quick run down on how to get started with open source, first of all let's know some basic terminologies:

• Git: is a versioning system that let's you store your code and code history on your local computer preventing loses and allowing sharing of that code
• Github: is a server that let's you store the history in a database
• Open Source: A project is said to be open sourced if you can see the code on GitHub
• Fork: This is a copy that you make of a project on GitHub, it gets added to your repositories
• Repository: A project on GitHub is called a repository
• 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.
• 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
• Branch: A branch is a new workspace derived from the default workspace(main or master), it allows you to work on something without affecting the original code

Now you know some basic terms, let's get into how to get started with some resources to let you understand open source better:

• Crash Course to Git and Github - Video
• A complete Guide to Open Source - Video
• Guide to Open Source - Article

Contributing

We heartily welcome any and all contributions that match our engineering standards! 🙌

That 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.

Rules

• No console.logs 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
• Code reviews: All submissions, including submissions by project members, require review. We use GitHub pull requests for this purpose.

Contributions and discussion guidelines

All conversations and communities on Dummygram agree to GitHub's Community Guidelines and Acceptable Use Policies. This code of conduct also applies to all conversations that happen within our contributor community here on GitHub. We expect discussions in issues and pull requests to stay positive, productive, and respectful. Remember: There are real people on the other side of that screen:exclamation:

Reporting a bug or discussing a feature idea

If 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)

Fixing a bug or implementing a new feature

• 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.
• If you want to implement a new feature, open an issue first to discuss what it'd look like .
• If you want to contribute but are unsure to start, we have a "good first issue" label which is applied to newcomer-friendly issues. Take a look at the full list of good first issues and pick something you like!
• Want to fix a bug or implement an agreed-upon feature? Great, jump to the local setup instructions!

Code of Conduct

Dummygram is now part of GitHub. For code of conduct, please see GitHub's Community Guidelines and Acceptable Use Policies.

Open Source Programs

       

Thanks to all Contributors 💪

Thanks a lot for spending your time helping dummygram grow. Thanks a lot! Keep rocking 🍻

License

MIT License, see the LICENSE file.

---