parent
9e8dd00f10
commit
244456759d
@ -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/)
|
||||
Loading…
Reference in new issue