demo: https://apollo-client-v2.vercel.app/posts/1
Generally this project combines Next.js router, apollo prefetching with SSR. Testing was out of scope, but I still added a few tests for demonstration purposes.
I didn't go hard with Application Architecture since the app is a small and it's makes sense to apply more advanced refactorings incrementally
tldr;
This project is using Next.js and Apollo with experimental package for Next.js + Apollo
- For api integration used GraphQLZero
- For styling is used Tailwind with UI library shadcn
- For forms validation is used Zod and react-hooks-form
- For testing is used Playwright
- Use of React: The application should be written in React using functional components and hooks.
- TypeScript: All code should be written in TypeScript.
- Apollo Client: Apollo Client should be used for interacting with the GraphQL API.
- UI/UX: The UI should be simple and clean, with minimal styling.
- Validation: Add validation for the fields used in post editing.
- Documentation: Write brief documentation on how to run the application and describe its main components.
- The application should display a list of posts fetched from the server.
- Clicking on a post should open an input field for editing the post's text.
- Changes to the post's text should be automatically saved.
- The application should correctly handle the situation when the page is closed before the data is sent.
To run the project you must have Node.js installed You need to install packages
npm installnpm run devnpm run servemake sure your app is up and running
npm run e2e:local