Create an app in React using the given API with the given requirements:
- Have a left sidebar with two buttons: New Post and List posts
- New Posts tab should:
- Be able to Create a new posts with title, body and userId, to the API
- Validate fields as required, except the userId that is hidden.
- Show an error if the requirements are not met.
- List Posts tab should have:
- List all the users in the api (Eg: https://jsonplaceholder.typicode.com/posts)
- If a Post is clicked, it should send you to the post details page
- Post detail
- It should show all the info of the post (from the API) (Eg: https://jsonplaceholder.typicode.com/posts/2)
For the API you can use https://jsonplaceholder.typicode.com/
- Extra credit:
- Paginate the list of post with infinite scroll (5 posts per page)
- Use prebuilt components like material ui, bootstrap, etc._
This project was generated using Nx. I try to implement a CLEAN architecture for the core lib and a simple react SPA app for the presentation layer, without global state management, just reactQuery lib for the REST API, and hooks.
Run nx serve my-app for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
Run nx g @nrwl/react:component my-component --project=my-app to generate a new component.
Run nx build my-app to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.
Run nx test my-app to execute the unit tests via Jest.
Run nx affected:test to execute the unit tests affected by a change.
Run ng e2e my-app to execute the end-to-end tests via Cypress.
Run nx affected:e2e to execute the end-to-end tests affected by a change.
Run nx dep-graph to see a diagram of the dependencies of your projects.
Visit the Nx Documentation to learn more.