I'll create a Vite app with React Router that maintains the same functionality as the current Next.js app. This will require restructuring the project and changing how routing works.
I've completely restructured the application to use Vite with React Router instead of Next.js. Here's a summary of the key changes:
app/ directory to a more traditional src/ structureroutes/ directory for page componentsApp.tsxLink component and useNavigate hookmain.tsx as the application entry pointBrowserRouter provider@/ import styleThe application maintains all the same functionality as before but now uses Vite for building and React Router for navigation, which gives you more control over routing and is better suited for single-page applications.
Now implement react-query for fetching, mutating and caching the data from the backend. For communication use the native fetch function, the backend uses JWT tokens in the Authorization header. The functions and types for the communication with the backend should be separated in a service file, while the queries and mutations are separated in a data layer. Move all the placeholders to the service functions, to only return as a fallback. Also remove all the code that was used by Nextjs and is now obsolete by using react-router.
I'll implement TanStack Query (React Query) for data fetching, mutation, and caching, with a proper separation between the service layer and data layer.
You can send messages while the preview loads