Coder Social home page Coder Social logo

kalyan-velu / dummygram Goto Github PK

View Code? Open in Web Editor NEW

This project forked from narayan954/dummygram

0.0 0.0 0.0 18.75 MB

DummyGram is a functioning clone of Instagram where we have posts feature, authentication, comment, delete and like feature. It uses ReactJs in the frontend for the UI and Firebase for the backend storing the users, posts and comments.

Home Page: https://narayan954.github.io/dummygram/

License: MIT License

JavaScript 78.15% CSS 20.99% HTML 0.87%

dummygram's Introduction

Dummygram

See Live!

Instagram, dummified




About Dummygram

Vision

When embarking on the journey of learning ReactJS, it's essential to engage in projects that capture your interest. One compelling idea is to create a clone of the app developed by the company that released ReactJS itself. In this case, let's consider building an Instagram clone, which not only replicates the features offered by the popular social media platform but also introduces new functionalities.

Developing an Instagram clone presents an incredible opportunity for learning and growth. By undertaking this project, you can contribute to the ReactJS community while expanding your knowledge and skills

Status

Since its inception in September 2022, Dummygram has been a passion project with a strong commitment to excellence. From its earliest stages, the project found a home on GitHub, a testament to its collaborative nature and openness to community contributions. While the current priorities and ongoing development efforts are clear, the team behind Dummygram remains dedicated to infusing the application with a distinctive visual appeal and a wealth of exciting features.

With a keen eye for design, the Dummygram team is determined to give the app a unique look that sets it apart from its counterparts. Through thoughtful and creative design choices, they aim to create a visually stunning user interface that captures the attention and imagination of users. By leveraging the power of ReactJS, the team has the flexibility to implement custom styles and create an engaging and immersive user experience:sparkles:

Features

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.

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.

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.

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.

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.

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.

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.

Docs

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

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

  • React: Frontend React app REACT

  • Firebase: Data storage and Authentication FIREBASE

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:

Video Demo to run Dummygram in your local under 2 minutes
get.dummygram.running.in.your.local.under.2.minutes.mp4
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 start

Testing

Instructions

Here we will see, how to run tests and how to setup new test cases. We will be using Cypress for our testing purposes.

Introduction to Cypress

See More

Cypress is a relatively new automated tests tool which is gaining popularity at a very rapid pace

Here is the home page for Cypress if someone wants to look it up https://www.cypress.io/

Cypress has very strong documentation so a new comer could find most of the information from their own site https://docs.cypress.io/guides/overview/why-cypress.html#In-a-nutshell

Also as a starting point it would be good to go through these tutorial videos https://docs.cypress.io/examples/tutorials


Start Testing

You need to setup the project as usual, and after that we can run our test cases.

See It Running

running-cypress.mp4
See More
  1. Run This Command
npm run cypress:open

It will open up this window,

As you can see, we only added E2E testing

  1. Click on E2E Testing & Select Browser
  1. Now Click on any Test to Run it

Create New Test Cases

Working Directory: /cypress/
E2E Files: /cypress/e2e/

image
See More

To Create New E2E Tests

  1. Goto /cypress/e2e/
  2. You can create new file (similar to spec.cy.js).
    OR add new it function inside existing describe function in this existing file.
test-file-screenshot
  1. Then, test your test cases:

    npm run cypress:open

How to get started with Open Source

Here's a quick rundown on how to get started with open source. First of all, let's know some basic terminologies:

  • 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.
  • Github: This is a server that lets 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) that 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:

How to use Dummygram

Flow of Control

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.

🎊Code of conduct is applied for all conversations that happen within the contributor community here on GitHub.

🎊Discussions are important,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.

Programs

List

hacktoberfest logo

codepeak         kwoc

iwoc program jwoc program

Feedback

If you have any feedback or suggestions please reach out to the Project-Maintainer Narayan Soni

For further queries and whereabouts you can communicate and reach out to the owner through Linkedin & email

👩🏽‍💻 Contributing

  • Contributions make the open source community such an amazing place to learn, inspire, and create.
  • Any contributions you make are greatly appreciated.
  • Check out our contribution guidelines for more information.

Thanks to all Contributors 💪

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

Contributors

License

MIT License, see the LICENSE file.


Take a moment to star ⭐ the project if you like it

Do checkout the other repos 💫

(Back to top)

dummygram's People

Contributors

1010varun avatar a91y avatar abhishek3434 avatar ak-shat-jain avatar anamika7153 avatar ansharora28 avatar bhartinagpure avatar biplavmz avatar code1705 avatar deepanshu0703 avatar deepsource-autofix[bot] avatar fiskryeziu avatar kalyan-velu avatar kshitij01042002 avatar mahirmahdi avatar mathiasayivor avatar narayan954 avatar palakkgoyal avatar prateek565 avatar sarkartanmay393 avatar shraddha761 avatar shruti8302 avatar shubham185y avatar subhamb2003 avatar suman-tewary avatar sumitkr2000 avatar vijayalakshmiganesh avatar vineet-singh-chauhan avatar vk20july avatar walexz01 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.