From 6e1fe7f3e463ba45fbf676a4080db272eea652a1 Mon Sep 17 00:00:00 2001
From: dsh <daniel.s.holdsworth@gmail.com>
Date: Thu, 17 Oct 2024 11:07:23 +0100
Subject: [PATCH] add story project

---
 src/data/projects/story-feature.md | 37 ++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 src/data/projects/story-feature.md

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