24hr Story Feature

Create a client-side instagram stories feature clone.

Start building, submit solution and get feedback from the community.
2Submit Solution·
5 upvotes10 upvotes

You are required to build a “Story” feature similar to those found in popular social media platforms like Instagram and WhatsApp. The goal is to allow a user to post short, ephemeral content that disappears after 24 hours. As this is a Frontend project this is going to be client-side only.

Requirements

There will be a list of stories at the top and a plus button. Clicking the plus button will allow user to upload an image which will be converted to base64 and stored in local storage. The image will be displayed in the list of stories. The image will be removed after 24 hours. User should optionally be able to swipe through the stories.

Stories project clone

Constraints

  • You can use any frontend framework to build this
  • Feel free to use any libraries or tools you are comfortable with
  • The project should be client-side only
  • The project should be responsive
  • Image dimensions should be constrained to a maximum of 1080px x 1920px

After building this project, you will have a better understanding of how to work with client-side storage, timeouts, and how to create a responsive design.

Found a mistake? Help us improve.

Actively Maintained

We are always improving our content, adding new resources and adding features to enhance your learning experience.

Join the Community

roadmap.sh is the 7th most starred project on GitHub and is visited by hundreds of thousands of developers every month.

Rank 7th  out of 28M!

302K

GitHub Stars

Star us on GitHub
Help us reach #1

+90k every month

+1.5M

Registered Users

Register yourself
Commit to your growth

+2k every month

30K

Discord Members

Join on Discord
Join the community

Roadmaps Best Practices Guides Videos FAQs YouTube

roadmap.sh by @kamrify

Community created roadmaps, best practices, projects, articles, resources and journeys to help you choose your path and grow in your career.

© roadmap.sh · Terms · Privacy · Advertise ·

ThewNewStack

The top DevOps resource for Kubernetes, cloud-native computing, and large-scale development and deployment.