Your job is to code an app with posts of users with ability to manage posts and comments. Application must be SPA and use multiple routes (listed below).
- API: API DOCS
- GQL: client
- Starter: Create react app starter - TS template
- Routing: React-router
- Typescript: DOCS
Homepage
- List of users.
- For each user you must display his details (you can omit the address).
- On user click you will redirect to
User Details
page
User Details
- This page contains the user name at the top of the page.
- List of user posts (just titles trimmed to one line).
- On click on the post item you will redirect to
Post Details
page - Button that on click will open the
Add post modal
. - Back button that will go back to
Homepage
Post Details
- On top of the page you still have the username
- Post full details
- Button to remove post.
- On remove you will have to go back to
User Details
page and remove current post from the list and API. - Button/link for comments 'show/hide comments' that will toggle the comments list visibility.
- Button to add comment.
- Adding comments should be similar to
Add Post Modal
but contain different fields and action. - Back button that will go back to `Posts list
Add Post/Comment Modal
- Title
- Form fields
- Two buttons
Cancel
,Save
- Cancel will just close the modal and ignore changes
- Save will connect with API and add Comment/Post to the list
- React + Typescript
- Connection with API (GQL)
- Usage of react-router for multiple pages
- Loaders when you wait for the data (react-skeleton)
- Validation on forms
- Usage of modern js functionality (ES6+)
- Clean code (linters, prettier)
- UI kit for styles (or styled-components)
- Tests
- App deployed to Netlify
- How you split code for components
- How your manage your data.
- Reusability of the components.
- Code repetitions and reusability (keep your code DRY and simple KISS).
- How and where you put your business logic.
- Code optimization and the solution's performance.
- Working in accordance with good practices in general.
- How you communicate with API.
- Handling unexpected errors or potential exceptions.