From 7d36bf948ce56e664a8907a5be9cc889e8da57f6 Mon Sep 17 00:00:00 2001 From: isqua Date: Sat, 25 Nov 2023 21:26:05 +0300 Subject: [PATCH] docs: explain file structure --- README.md | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/README.md b/README.md index 125dba0..5866285 100644 --- a/README.md +++ b/README.md @@ -10,6 +10,30 @@ npm ci npm run dev ``` +## App Overview + +The requirements for the task determined the tech stack: use react and css modules, fetch data asynchronously, do not use any libraries for building menus and trees. + +I used vite and vitest for building and testing. + +So, from a bird's eye view, the structure is as follows: + +1. [main.tsx](./src/main.tsx) is an entrypoint. It finds the root DOM element and render the App. +1. [app/](./src/app/) contains all app-level code + - [App.tsx](./src/app/App.tsx) is where the app is described. It renders app router. If there were any providers, they would also be used here + - [Router](./src/app/Router) declares app routes. Now there is only one, because all the pages are the same, and there is no unique content on the pages + - [Root](./src/app/Root) renders the page content +1. [features/](./src/features/) contains feature-specific code, directory per feature: + - [toc/](./src/features/toc/) is the main (and only) feature that build a menu tree + - [types](./src/features/toc/types.ts) describe data model + - [core/](./src/features/toc/core/) implements pure logic to work with menu data + - [api/](./src/features/toc/api/) contains data fetching logic + - [ui/](./src/features/toc/ui/) has components to render the feature +1. [components/](./src/components) contains all bricks that are not bound to the app domain, e.g. [Layout](./src/components/Layout) or [Transitions](./src/components/Transitions). +1. [hooks/](./src/hooks) contains any general logic shared between components, like: + - [useRequestWithPlaceholder](./src/hooks/useRequestWithPlaceholder.ts) to fetch data. It works like an extremely simplified idea of react-query, that hook returns state of a query with some placeholders and flags + - [useFilter](./src/hooks/useFilter.ts) holds shared logic for filter inputs + ## Available Scripts In the project directory, you can run: