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.
Home Page: https://narayan954.github.io/dummygram/
License: MIT License
![deepsource-autofix[bot] avatar](https://avatars.githubusercontent.com/in/57168?v=4 "deepsource-autofix[bot]")
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
Implement Dark mode for the application to give it a better look.
No response
We can have a toggle at the side for dark mode
Newly implemented cards work for posts with images , but don't for post without images.
Make any post without images and you'll face this issue ,, where there's a default placeholder image and the actual caption might be lost.
No response
No response
No response
Save Button on the post will save the post.
You can view the saved posts in a modal.
So, you have to implement the save feature as well as view saved posts.
Save Button
No response
No response
react deploy action (deployreact.yml) is not working as expected and hence failing.
It is failing to deploy to github-pages due to failure of installing dependencies and it can't run with --force either.
Please help me resolve.
Any post generated by the user only has this background:
Adding a color picker tool will be really beneficial to make the posts more unique.
No response
The current site's header needs a little improvement to look exactly like that of IG, assign this to me I will get it done perfectly
No response
We can add a footer which navigates to different pages includes about us contact us your social media links and little about motive of this website
We have two options to implement this as in This Solution
Please confirm anyone of them and feel free to ask for more information
No response
No response
Currently, users must upload an image when posting. Which is not a good UX.
It would be great to enable users post without uploading an image
No response
No response
Add sections/pictures or details to improve the readme
When the upload is clicked without selecting any image the loading continues forever. So this should be handled beforehand.
No response
No response
No response
When we enter site, we directly get to the posts and due to this our database needs to be exposed to public to load posts, which isn't a good practice. We can have a sign in/sign up page instead.
No response
We need to implement a simple login/signup page
I want to do the following changes:-
No response
UI of the project can be improved to a great extent.
We can start with parts.
This issue can become a thread for issues related to UI enhancement issues.
Contribution is welcome.
Ps - Create a separate issue specifying the elements you'll improve .
I want to do the following changes: -
No response
Information needed:
Describe the bug
I get a compilation error when I run npm start.
To Reproduce
Steps to reproduce the behavior:
npm install --forcenpm startExpected behavior
The dev server should start normally and I should be able to view exactly what's on the production build
Screenshots
Desktop (please complete the following information):
[NOT APPLICABLE]
Smartphone (please complete the following information):
[NOT APPLICABLE]
Additional context
[NONE]
Add logo uploading option while signing up for profiles through firebase, so that each profile can have its own profile picture as logo.
Workable Like button (Hover, like count on clicking, etc, etc)
No response
No response
User cannot see the image before uploading it. Adding a image preview will help the user to confirm the selected image.
Would like to work on this for kwoc
Edit custom Scrollbar for dark mode.
No response
No response
Cards for post look really dull or I should say simple. We can design them better with some border/border radius etc. Align the contents to the left similar to a Instagram post
No response
Currently, the app is loading all posts at once, which might be an issue once posts get larger. It'd be better to use pagination (i.e load more posts only when the user scrolls down).
No response
No response
The current pagination solution #52, resets the scroll position after new uploads and does not make provision for updates for existing uploads.
We need to fix this issue for updates to the existing uploads.
No response
No response
Currently, there is only an icon for the emoji picker.
We should have a working Emoji picker to add emoji in comments
No response
Is your feature request related to a problem? Please describe.
The app was created using create-react-app, which is great, but there are so many dependency errors.
PS: This issue is related to #2
Describe the solution you'd like
Use vite instead, which is super fast and has great dx
Describe alternatives you've considered
[NONE]
Additional context
[NONE]
We can delete any post by id through firebase cloud firestore delete request
for example = { const res = await db.collection('posts').doc('0DJEyHXRk6b4yyym3NYC').delete(); }
Can we try to implement this in our web application?
Ps: Only post creator should be able to delete his post.
No response
No response
Currently, users are only able to upload one image at a time. It would be great to enable users to upload multiple images in the same post.
No response
No response
We can add repo stats in the main readme to make it better.
for example :
Currently, uploaded images are being displayed in grid form, but need some improvement (i.e too much gap for images with different heights)
We have a few options:
No response
No response
Currently there is only one way we can like a post using the like icon.
New feature : post would be liked if someone double tap on post image.
It will make the app cool.
No response
Since it is an actual product, I am suggesting to add Issue Templates to the repository, it can be as many categories as needed - primary categories of issues are mostly : bugs, docs, general feature and so on.
Adding an issue Template allows you to organize the issues made by folks in a much better way.
Yes, i will be glad to help an Opensource project grow more !
Is your feature request related to a problem? Please describe.
The UX is really poor. Currently, there is no indicator that shows if a process is running or not (i.e Logging in, Signing Up, New Post)
Describe the solution you'd like
Use loading animations to tell users if there's a running/loading process
Describe alternatives you've considered
[NONE]
Additional context
[NONE]
Every build action is failing due to npm ci not working. This isn't intended and also confuses the contributors.
Can anyone solve this issue /suggest an alternative?
Thanks
With every merge in the repository, GitHub action gets triggered , but it fails everytime.
No response
No response
No response
No response
Currently, we're only using native browser alerts for notifications. It'd be a great improvement to use MUI alerts/dialogs to create a consistent UI.
No response
No response
Can we implement a like feature for the post and see live like counts!
It'd be great!
No response
We already have the button for likes in posts , we just have to implement them!
Hey, I wanted to add a functionality for user to use hashtags in their post and and saving post of similar # at new page
No response
No response
user who commented can delete his comment.
No response
No response
The Like button on every card should change according to the state
If the user has already like it should be filled
Before Liking
After Liking
No response
No response
Current logo isn't that good, it can be improved. Or a new one is welcomed as well.
It would really be nice to crop the uploaded images (images exceeding the height threshold) for previews, and enable users to view the full image by tapping/clicking on it (i.e view full image)
Doing so could solve the following problems:
No response
No response
The script.js file is currently exposing the firebase API key.
I think it would be a good practice to secure our key( a free one too) by creating a dotenv file in .gitignore to secure the keys to prevent any possible security issue ( bots may scan for API keys and access/use resources)
No response
No response
It'd really be a good UX to use blurred thumbnail images while loading posts and replace them with the actual image when the post is done loading.
No response
No response
Is your feature request related to a problem? Please describe.
Sometimes we want to delete our old posts , but we are currently unable to do that here ( Unless I delete it from the dB)
Describe the solution you'd like
We can implement the delete functionality for the posts (But only those which were posted by the user)
Additional context
It could be a prop passed to the card component of posts and rendered only with the eligible posts. Clicking on the button removes that post with its key/id.
When you scroll to reach end of the page it gives crash.
Scroll to the end.
No response
No response
No response
Adding a profile page whare it Photo, name, joined date and all the posts by the user will be shown.
NA
In near future we can add follow user functionality and can also show followers and following stats on profile.
We can just signup without putting a username, it will show some error, but logs the user in, leading to existence of null users, with ghost posts!!
While signing up don't use a username.
No response
No response
We should implement validation in the sign up modal.
Just like how notistack works, we can create reusable dialogs the provides an imperative api to easily create dialog messages, without repeating code.
No response
No response
This project has some potential security vulnerabilities in dependencies.
Can anyone please help me solve them.
Thank you.
It will be great to add custom scrollbar for the website.
No response
Currently every comment is loaded for a post, this has two bad effects, first one being extra read operations to the database and second being a bad UI.
We can overcome this by adding an option to expand comments for a post :) like instagram.
Don't ask me if I got this idea while scrolling Instagram
You can take inspiration from the picture below.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.