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.
When 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.
Creating 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!
Since 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.
The 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.
Overall, the Dummygram team loves what they do and wants to make the app visually stunning and enjoyable for everyone!
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.
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
dummygram/
โโโ public # Public files used on the frontend
โโโ src # Frontend Code in React
The first step to running dummygram locally is downloading the code by cloning the repository:
https://github.com/narayan954/dummygram/assets/77617189/c21f0bdc-e845-4c32-b148-54d8048cbc33
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
Dummygram has a single installation step:
cd dummygram
npm install
OR
yarn install
You've now finished installing everything! Let's start :100:
Ps: if you're getting error installing the dependencies, try --force command along with npm install. For example
npm install --force
OR
yarn --force
Now you're ready to run the app locally and sign into your local instance!
To Start the development server run
npm start
OR
yarn start
Here we will see, how to run tests and how to setup new test cases. We will be using Cypress for our testing purposes.
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
You need to setup the project as usual, and after that we can run our test cases.
See It Running
npm run cypress:open
It will open up this window,
As you can see, we only added E2E testing
Working Directory: /cypress/
E2E Files: /cypress/e2e/
To Create New E2E Tests
/cypress/e2e/
spec.cy.js
). it
function inside existing describe
function in this existing file.Then, test your test cases:
npm run cypress:open
Here's a quick rundown on how to get started with open source. First of all, let's know some basic terminologies:
Now you know some basic terms, let's get into how to get started with some resources to let you understand open source better:
We heartily welcome any and all contributions that match our engineering standards! :raised_hands:
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.
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๐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:
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)
Dummygram is now part of GitHub. For code of conduct, please see GitHub's Community Guidelines and Acceptable Use Policies.
If you have any feedback or suggestions please reach out to the Project-Maintainer Narayan Soni
Thanks a lot for spending your time helping dummygram grow. Thanks a lot! Keep rocking ๐ป
MIT License, see the LICENSE file.