UI Design

Requirements

• Pagination support
• Saving pictures in the picture gallery
• App state-preservation/restoration
• Indicator of unread/read post (updated status, after post it’s selected)
• Dismiss Post Button (remove the cell from list. Animations required)
• Dismiss All Button (remove all posts. Animations required)
• Support split layout (left side: all posts / right side: detail post)
• Responsive design
• Post should display:
  • Title (at its full length, so take this into account when sizing your cells)
  • Author
  • entry date, following a format like “x hours ago”
  • A thumbnail for those who have a picture.
  • Number of comments
  • Unread status
• Documentation
• Deployment

Todo list

The following is a list of ordered tasks from highest priority to lowest. I'll possibly change the priority of some tasks while developing, but for now I'll just create the list to have a solid idea of all (or at least most) of the tasks before beginning.

• 1. CRA & code base config
• 2. add deps that I'll use for sure
• 3. routing, App.tsx, pages & layout
• 4. store & getPosts from Reddit API
• 5. components (PostsPage) with usage of API data & complete functionality
• 6. GalleryPage & functionality
• 7. Responsiveness
• 8. persist store
• 9. tests
• 10. QA, additional improvements & optimisations?
• Documentation
• Deployment

• save last visited page in store, so if we visit gallery and come back we are in the last visited page
• card heights in gallery should be same in each row
• image lazy loading
• light theme
• more tests
• dismissing all posts shouldn't be that abrupt
• viewing a post from the gallery should update the current page to be the page that contains the post
• leave for the user to decide how many posts they want to see per page
• maybe use all the space possible in md and only from lg and up use the current desktop UI
• Nothing to see... += Select a post or refetch to view more posts
• add page styles in separate style.ts files