This is a React + TS app to accomodate an implementation of the InQool Frontend Interview.

The app is built with Vite and a template with React, TS, Tailwind and React Router. The aim is to implement a simple CRUD app to fetch, add and update users and animals in a list.

The app contains two routes, one for users and one for animals (and a simple landing page :) ). Both fetch and display its db entries in a table form and allow filtering the table. Each entry is editable on a separate page with a form, and the user's ban status is editable from the table actions as well. A separate button leads to a new entry page where a new db entry can be created. Another button allows to refresh and seed new data in the database from the API.

The app is built with React Query (Tanstack Query) where each query is abstracted away as a custom hook to be easily used in a (and shared between) component. No stale times to adjust caching behaviour are added now, but can be considered based on work load and user interaction patterns.

The forms are being validated with React Hook Form and Zod for runtime checking. Routing is handled with React Router v6. Styling and basic components are bootstrapped with ShadcnUI and Tailwind CSS. Components are separated based on origin or usage: components/ui folder contains shadcnui - base components, components/common contains reused components in the whole app, the rest of the components are simply in components due to the simplicity of the app.

To start the application in development mode, in the root of the app:

1. create a local .env.local file and within it add VITE_INQOOL_ENDPOINT and provide the API address
2. run the command npm i && npm run dev

TODO:

• bootstrap with Vite, TS, React, ES Lint
• add Tailwind and Shadcn UI
• add React Router v6, React Query v5 and Axios
• build basic Router
• build users table UI (GET)
• add react hook form and zod for forms
• build out users action: add user
• build out users action: edit user
• build out users actions: filter table and clear filter
• move usequery into hooks
• refactor table actions to own component
• build animals table UI (GET)
• build out animals action: add animal
• build out animals action: edit animal
• build out animals actions: filter table and clear filter
• add seed button to get new data?