- React
- Grommet v2
- Styled Components
- React Redux + Redux Persit for state management and restoration
- React Springs for animations
- Responsive design
- Support split layout (left side: all posts / right side: detail post)
- Mark as read
- 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)
- Pagination support
- Hide Sidebar
- Loading
- Saving pictures in the picture gallery
- 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
- Created app with
create-react-appboilerplate - Added configuration files (
.prettierrcand.nvmrc) - Added all the dependencies
- Create basic components for the views
- Fetch Data with Reddit JSON API using plain
fetch - Styled Sidebar
- Connect data to components using basic state. Will later be replaced by Redux.
- Styled Sidebar > List Item
- Styled Main Content
- Add support to Redux
- Connect all the components to Redux
- Refactor components: cleanup code
The posts can be fetched from https://www.reddit.com/top.json
The possible parameters are:
| Param | Description |
|---|---|
t |
one of (hour, day, week, month, year, all) |
after |
fullname of a thing |
before |
fullname of a thing |
count |
a positive integer (default: 0) |
include_categories |
boolean value |
limit |
the maximum number of items desired (default: 25, maximum: 100) |
show |
(optional) the string all |
sr_detail |
(optional) expand subreddits |
Reference: https://www.reddit.com/dev/api/#GET_top
A fullname is a combination of a thing's type (e.g. Link) and its unique ID which forms a compact encoding of a globally unique ID on reddit.
Fullnames start with the type prefix for the object's type, followed by the thing's unique ID in base 36. For example, t3_15bfi0
Reference: https://www.reddit.com/dev/api/#fullnames