diff --git a/frontend/.vscode/extensions.json b/frontend/.vscode/extensions.json index 8622f6a6..1cd1faf7 100644 --- a/frontend/.vscode/extensions.json +++ b/frontend/.vscode/extensions.json @@ -6,4 +6,4 @@ "mariusalchimavicius.json-to-ts", "bradlc.vscode-tailwindcss" ] -} \ No newline at end of file +} diff --git a/frontend/README.md b/frontend/README.md index 78c4fc98..9bd24f1d 100644 --- a/frontend/README.md +++ b/frontend/README.md @@ -1,6 +1,6 @@ # fAIr Frontend -This project is a frontend web application built using **React 18**, **TypeScript**, and **Vite**. The app leverages modern libraries such as **@hotosm/ui**, **Shoelace**, and **Framer Motion** for UI components, and **React Router** for client-side routing. +This project is a frontend web application built using **React 18**, **TypeScript**, and **Vite**. The app leverages modern libraries such as **@hotosm/ui**, and **Shoelace** for UI components, and **React Router** for client-side routing. ## Table of Contents @@ -60,6 +60,7 @@ Here's an overview of the folder structure: │ ├── app/ # Contains the application routes and providers. │ ├── assets/ # Static assets specific to the app (images, icons, etc.). │ ├── components/ # Reusable components and layouts. +| |── features/ # Contains the main features of the application. │ ├── hook/ # Reusable hooks. │ ├── styles/ # Global styles. │ ├── utils/ # Utility functions, application content and constants. @@ -96,10 +97,9 @@ We use absolute imports (such as `@/components`, `@/hooks`, etc.), to make it ea We use the `kebab-case` to name all files. This helps to keep your codebase consistent and easier to navigate. -#### Husky - -We use the `husky` to trigger `eslint` and `prettier` configurations when committing code to the repository. +#### Architectural Decisions +See [the documentation](./docs/) for more information on the architectural decisions. ## Contributing diff --git a/frontend/docs/README.md b/frontend/docs/README.md index 6836fe73..1a83d90d 100644 --- a/frontend/docs/README.md +++ b/frontend/docs/README.md @@ -18,6 +18,9 @@ In the `architecture` folder there are subfolders for each decision making. In e 2. [Styling Library Decision](./architecture/adr-choose-styling-library/adr1.md) 3. [Web mapping Library Decision](./architecture/adr-choose-webmap-library/adr1.md) 4. [Drawing Library Decision](./architecture/adr-choose-drawing-library/adr1.md) +5. [Package Manager Decision](./architecture/adr-choose-package-manager/adr1.md) +6. [Programming Language Decision](./architecture/adr-choose-language/adr1.md) +7. [Bundler Decision](./architecture/adr-choose-bundler/adr1.md) ## References diff --git a/frontend/docs/architecture/adr-choose-styling-library/adr2.md b/frontend/docs/architecture/adr-choose-styling-library/adr2.md index 9379d9bd..f137fa05 100644 --- a/frontend/docs/architecture/adr-choose-styling-library/adr2.md +++ b/frontend/docs/architecture/adr-choose-styling-library/adr2.md @@ -39,6 +39,7 @@ We are building the fAIr website that requires a responsive and customizable use # Decision We've chosen to use Shoelace because it meets all our key decision criteria and aligns with the future requirements of [HOT UI](https://github.com/hotosm/ui). This alignment ensures long-term compatibility and simplifies any potential migration to a different framework in the future, if needed. + # Status Accepted. diff --git a/frontend/docs/index.md b/frontend/docs/index.md deleted file mode 100644 index b1af5688..00000000 --- a/frontend/docs/index.md +++ /dev/null @@ -1,28 +0,0 @@ -## Architectural Decisions - -The `architecture` folder comprises of subfolders and markdowns that documents the architectural decisions made when deciding on the tools used in developing this project. The template used is based on the simple and popular template -- [Documenting architecture decisions - Michael Nygard](https://cognitect.com/blog/2011/11/15/documenting-architecture-decisions), however slightly modified to include the **Date** of the decision. The folder is updated continually when decision making need arises until the end of the project. - -## Folder Arrangement - -We follow the recommendations from Michael Nygard (quoted below) in the folder arrangement. - -> ADRs will be numbered sequentially and monotonically. Numbers will not be reused. - -> If a decision is reversed, we will keep the old one around, but mark it as superseded. (It's still relevant to know that it was the decision, but is no longer the decision.) - - -In the `architecture` folder there are subfolders for each decision making. In each subfolders, there are ADRs numbered sequentially. Also the numbers are reflected in the _Title_ when you open the ADR. - - -## Quick Links - -1. [Framework Decision](./architecture/adr-choose-web-framework/adr1.md) -2. [Styling Library Decision](./architecture/adr-choose-styling-library/adr1.md) -3. [Web mapping Library Decision](./architecture/adr-choose-webmap-library/adr1.md) -4. [Drawing Library Decision](./architecture/adr-choose-drawing-library/adr1.md) - - -## References - -- [Architecture Decision Record](https://github.com/joelparkerhenderson/architecture-decision-record?tab=readme-ov-file) -- [Documenting architecture decisions - Michael Nygard](https://cognitect.com/blog/2011/11/15/documenting-architecture-decisions) \ No newline at end of file diff --git a/frontend/eslint.config.js b/frontend/eslint.config.js index 79a552ea..53ee97df 100644 --- a/frontend/eslint.config.js +++ b/frontend/eslint.config.js @@ -7,7 +7,12 @@ import tseslint from "typescript-eslint"; export default tseslint.config( { ignores: ["dist"] }, { - extends: [js.configs.recommended, ...tseslint.configs.recommended], + extends: [ + js.configs.recommended, + ...tseslint.configs.recommended, + "plugin:@tanstack/eslint-plugin-query/recommended", + "plugin:tailwindcss/recommended", + ], files: ["**/*.{ts,tsx}"], languageOptions: { ecmaVersion: 2020, @@ -16,6 +21,7 @@ export default tseslint.config( plugins: { "react-hooks": reactHooks, "react-refresh": reactRefresh, + "@tanstack/query": "@tanstack/query", }, rules: { ...reactHooks.configs.recommended.rules, diff --git a/frontend/index.html b/frontend/index.html index 5de0806b..6d462f70 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -1,27 +1,31 @@ +
+ + + + + + + + + - - - - - - - - - - + + + - - - +