-
-
Notifications
You must be signed in to change notification settings - Fork 40.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add project idea for stories feature
- Loading branch information
1 parent
77c2b59
commit b41caff
Showing
1 changed file
with
42 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
--- | ||
title: '24hr Story Feature' | ||
description: 'Create a client-side instagram stories feature clone.' | ||
isNew: false | ||
sort: 30 | ||
difficulty: 'advanced' | ||
nature: 'Frameworks' | ||
skills: | ||
- 'JavaScript' | ||
- 'Storage' | ||
- 'Timeouts' | ||
seo: | ||
title: 'Build an Instagram Story Clone' | ||
description: 'Create a client-side instagram stories feature clone.' | ||
keywords: | ||
- 'html' | ||
- 'css' | ||
- 'javascript' | ||
- 'instagram story' | ||
roadmapIds: | ||
- 'frontend' | ||
--- | ||
|
||
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](https://assets.roadmap.sh/guest/stories-project.png) | ||
|
||
## 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. |