add story project

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.