MongoDB Atlas Hackathon 2022 on DEV

What I built

Social Media App – Twitter Clone

Category Submission:

Choose Your Own Adventure

App Link

LIVE

Screenshots

On first time opening this website/or after logging out, user will be redirected to L…

What I built

Social Media App – Twitter Clone

Category Submission:

Choose Your Own Adventure

App Link

LIVE

Screenshots

  • On first time opening this website/or after logging out, user will be redirected to Login Page and will ask to login using google account

Imgur

  • User can see all the posts and replies on the Home Page

Imgur

  • User can post Text and Images(Drag and Drop).

Imgur

  • User can change their cover image by dragging the image from local drive dropping to the the cover area.

Before
After

  • User can Reply on the post as well as Reply on the Replies

Imgur
Imgur

  • User can Like the Posts and Replies

Imgur

  • User can edit their Bio, Username, and Display Name on their User Page.

Edit

  • User can see their user posts and replies on the user page(user can access their page by clicking on their name or image).

Imgur

  • User can Logout using Logout button under the posts of the Home Page.

Logout

Description

It is a social media app where users can make their account using a google account and create posts, like posts, and reply to posts.

Link to Source Code

GITHUB

Permissive License

MIT License

Background

What made you decide to build this particular app? What inspired you?
=> Today everyone’s everyday life almost getting connected to Social Media either it be connection to people , work, money, advertising etc. So I decided to make Social Media Clone.

How I built it

How did you utilize MongoDB Atlas?
=> I used MongoDB Atlas to store user account details, posts, likes, comments. Fetched the users info and posts from MongoDB Atlas.
Did you learn something new along the way? Pick up a new skill?
=> I understand how to set up and use @next-auth/mongodb-adapter(MongoDB Adapter) in NextJS.

Additional Resources/Info

TODO:

  • Updating and Uploading image didn’t work sometime(not fixed yet).
  • Add update image to profile
  • Add Trending/News/Weather to fill Side White Space
  • Search Functionality to Search Users

Print Share Comment Cite Upload Translate
APA
Sandeep Kumar Patel | Sciencx (2024-03-28T15:06:11+00:00) » MongoDB Atlas Hackathon 2022 on DEV. Retrieved from https://www.scien.cx/2022/12/08/mongodb-atlas-hackathon-2022-on-dev-2/.
MLA
" » MongoDB Atlas Hackathon 2022 on DEV." Sandeep Kumar Patel | Sciencx - Thursday December 8, 2022, https://www.scien.cx/2022/12/08/mongodb-atlas-hackathon-2022-on-dev-2/
HARVARD
Sandeep Kumar Patel | Sciencx Thursday December 8, 2022 » MongoDB Atlas Hackathon 2022 on DEV., viewed 2024-03-28T15:06:11+00:00,<https://www.scien.cx/2022/12/08/mongodb-atlas-hackathon-2022-on-dev-2/>
VANCOUVER
Sandeep Kumar Patel | Sciencx - » MongoDB Atlas Hackathon 2022 on DEV. [Internet]. [Accessed 2024-03-28T15:06:11+00:00]. Available from: https://www.scien.cx/2022/12/08/mongodb-atlas-hackathon-2022-on-dev-2/
CHICAGO
" » MongoDB Atlas Hackathon 2022 on DEV." Sandeep Kumar Patel | Sciencx - Accessed 2024-03-28T15:06:11+00:00. https://www.scien.cx/2022/12/08/mongodb-atlas-hackathon-2022-on-dev-2/
IEEE
" » MongoDB Atlas Hackathon 2022 on DEV." Sandeep Kumar Patel | Sciencx [Online]. Available: https://www.scien.cx/2022/12/08/mongodb-atlas-hackathon-2022-on-dev-2/. [Accessed: 2024-03-28T15:06:11+00:00]
rf:citation
» MongoDB Atlas Hackathon 2022 on DEV | Sandeep Kumar Patel | Sciencx | https://www.scien.cx/2022/12/08/mongodb-atlas-hackathon-2022-on-dev-2/ | 2024-03-28T15:06:11+00:00
https://github.com/addpipe/simple-recorderjs-demo