From 244456759d0cb215374c0e574e20db579691c20d Mon Sep 17 00:00:00 2001 From: nickzerjeski Date: Fri, 10 Apr 2026 16:31:29 +0200 Subject: [PATCH] Add Tier-2 Post Feed App idea --- Projects/2-Intermediate/Post-Feed-App.md | 43 ++++++++++++++++++++++++ README.md | 1 + 2 files changed, 44 insertions(+) create mode 100644 Projects/2-Intermediate/Post-Feed-App.md diff --git a/Projects/2-Intermediate/Post-Feed-App.md b/Projects/2-Intermediate/Post-Feed-App.md new file mode 100644 index 00000000..d5072705 --- /dev/null +++ b/Projects/2-Intermediate/Post-Feed-App.md @@ -0,0 +1,43 @@ +# Post Feed App + +**Tier:** 2-Intermediate + +Build a simple social media feed using HTML, CSS, and JavaScript (no backend). +Users should be able to create, view, edit, and manage posts containing an +image or video with a caption. Post data should persist in browser storage such +as IndexedDB. + +## User Stories + +- [ ] User can create a post with an image or video and a caption +- [ ] User can view a list of posts in a feed layout +- [ ] User can delete a post +- [ ] User data is persisted using browser storage (e.g. IndexedDB) + +## Bonus features + +- [ ] User can like posts +- [ ] User can comment on posts +- [ ] User can toggle dark mode +- [ ] User can edit posts +- [ ] Posts display timestamps + +## Useful links and resources + +- [HTML Reference - MDN](https://developer.mozilla.org/docs/Web/HTML) +- [CSS Reference - MDN](https://developer.mozilla.org/docs/Web/CSS) +- [JavaScript Reference - MDN](https://developer.mozilla.org/docs/Web/JavaScript) +- [DOM Manipulation - MDN](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) +- [CSS Flexbox - CSS-Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) +- [CSS Grid - CSS-Tricks](https://css-tricks.com/snippets/css/complete-guide-grid/) +- [Dark Mode - CSS-Tricks](https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/) +- [File API - MDN](https://developer.mozilla.org/docs/Web/API/File_API/Using_files_from_web_applications) +- [FileReader - MDN](https://developer.mozilla.org/docs/Web/API/FileReader) +- [IndexedDB - MDN](https://developer.mozilla.org/docs/Web/API/IndexedDB_API) +- [localStorage - MDN](https://developer.mozilla.org/docs/Web/API/Window/localStorage) +- [sessionStorage - MDN](https://developer.mozilla.org/docs/Web/API/Window/sessionStorage) + +## Example projects + +- [Instagram](https://www.instagram.com/) +- [X (formerly Twitter)](https://x.com/) diff --git a/README.md b/README.md index c54bfa41..3828e29d 100644 --- a/README.md +++ b/README.md @@ -104,6 +104,7 @@ required to complete them. | [Name Generation using RNNs](./Projects/2-Intermediate/Name-Generator.md) | Generate names using names dataset | 2-Intermediate | | [Password Generator](./Projects/2-Intermediate/Password-Generator.md) | Generate random passwords | 2-Intermediate | | [Podcast Directory](./Projects/2-Intermediate/Podcast-Directory-App.md) | Directory of favorite podcasts | 2-Intermediate | +| [Post Feed App](./Projects/2-Intermediate/Post-Feed-App.md) | Build a local-first social media post feed | 2-Intermediate | | [QR Code Badge Generator](./Projects/2-Intermediate/QRCode-Badge-App.md) | Encode badge info in a QRcode | 2-Intermediate | | [Regular Expression Helper](./Projects/2-Intermediate/RegExp-Helper-App.md) | Test Regular Expressions | 2-Intermediate | | [Sales Reciepts App](./Projects/2-Intermediate/Sales-DB-App.md) | Record Sales Receipts in a DB | 2-Intermediate |