diff --git a/src/data/projects/story-feature.md b/src/data/projects/story-feature.md new file mode 100644 index 000000000..4726eaf1a --- /dev/null +++ b/src/data/projects/story-feature.md @@ -0,0 +1,37 @@ +--- +title: '24hr Story Feature' +description: 'Create a client-side instagram story clone' +isNew: false +sort: 1 +difficulty: 'advanced' +nature: 'JavaScript' +skills: + - 'JavaScript' + - 'Storage' + - 'Timeouts' +seo: + title: 'Build an Instagram Story Clone' + description: 'Learn how to build a Client-side Instagram Story Clone' + keywords: + - 'html' + - 'css' + - 'javascript' + - 'instagram story' +roadmapIds: + - 'frontend' + - 'javascript' +--- + +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 users to post short, ephemeral content that disappears after X hours. As this is a Frontend project this is going to be client-side only. + +## Requirements + +- The users avatar has a `+` icon in the bottom right which will act as an upload button. +- Users can upload an image or video. +- The user avatar is given a visually appealing border when a story is active. +- After the defined time, the story is no longer viewable and the avatar returns to the default state. + +## Stretch Goals + +- Multiple stories can be added and accessible via swipe functionality. +- Allow users to remove a live story. \ No newline at end of file