diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..d06d750 --- /dev/null +++ b/.env.example @@ -0,0 +1,6 @@ +export DATASTORE=pinecone +export BEARER_TOKEN= +export OPENAI_API_KEY= +export PINECONE_API_KEY= +export PINECONE_ENVIRONMENT= +export PINECONE_INDEX= diff --git a/CHANGELOG.md b/CHANGELOG.md index 2b24c0f..03f1d30 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,4 +6,5 @@ Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how ## [Unreleased] +- Update to ChatGPT 5.x with API key instead of Session token - Initial release \ No newline at end of file diff --git a/Diagrams.md b/Diagrams.md new file mode 100644 index 0000000..69d967b --- /dev/null +++ b/Diagrams.md @@ -0,0 +1,38 @@ +# Mermaid diagrams + +We can simply ask Chat GPT to create Mermaid ERD code for a specific use case. +We can also specify a specific diagram type: + +Mermaid supports the following types of diagrams: + +- Flowchart +- Sequence +- Class +- State +- Entity Relationship +- User Journey +- Gantt +- Pie +- Requirement + +See [how to include diagrams in github project/](https://www.makeuseof.com/how-to-include-diagrams-in-github-project/) + +## Export diagrams to PNG + +We can export a mermaid diagram to PNG very simply using the official Mermaid CLI Tool. + +Installation via npm + +`npm i -g mermaid.cli` + +Usage: + +`mmdc -i ${input_file_location} -o ${output_file_location}` + +Example + +```bash +echo 'sequenceDiagram\nAlice ->> Bob: Hey, Bob!\nBob ->> Alice: Hey there, Alice!' > /tmp/alice-bob.mmd +mmdc -i /tmp/alice-bob.mmd -o /tmp/alice-bob.png +open /tmp/alice-bob.png +``` \ No newline at end of file diff --git a/README.md b/README.md index c3477de..d8ec4a0 100644 --- a/README.md +++ b/README.md @@ -15,6 +15,10 @@ This Visual Studio Code extension allows you to use the [unofficial ChatGPT API] Refactoring selected code using chatGPT +## Update + +Updated to use version `5.2.x` of [ChatGPT API](https://www.npmjs.com/package/chatgpt) Node.js library with support for GPT-4 using an API key instead of the old session key. + ## Features - **Ask general questions** or use code snippets from the editor to query ChatGPT via an input box in the sidebar - Right click on a code selection and run one of the context menu **shortcuts** @@ -27,23 +31,309 @@ This Visual Studio Code extension allows you to use the [unofficial ChatGPT API] To use this extension, install it from the VSCode marketplace or download and install `.vsix` file from Releases. -1. After the installation is complete, you will need to add your ChatGPT session token to the extension settings in VSCode. To do this, open the `Settings` panel by going to the `Code` menu and selecting `Preferences`, then `Settings`. +1. After the installation is complete, you will need to add your ChatGPT API key to the extension settings in VSCode. To do this, open the `Settings` panel by going to the `Code` menu and selecting `Preferences`, then `Settings`. 2. In the search bar, type `ChatGPT` to filter the settings list. -3. In the ChatGPT section, enter your session token in the `SESSION_TOKEN` field. +3. In the ChatGPT section, enter your API key in the `API_KEY` field. + +Optionally add + +- `Model` +- `Temperature` +- `TopP` + +This lets you fine-tune how your instance of `ChatGPTAPI` is created, similar to: + +```ts +const api = new ChatGPTAPI({ + apiKey: process.env.OPENAI_API_KEY, + completionParams: { + model: 'gpt-4', + temperature: 0.5, + top_p: 0.8 + } +}) +``` After completing these steps, the extension should be ready to use. -### Obtaining the session token +### Obtaining the API key -To use this extension, you will need to authenticate with a valid session token from ChatGPT. To get a session token: +To use this extension, you will need to authenticate with a valid API key from ChatGPT. To get an API key: 1. Go to https://chat.openai.com/chat and log in or sign up. -2. Open the developer tools in your browser. -3. Go to the `Application` tab and open the `Cookies` section. -4. Copy the value for `__Secure-next-auth.session-token` and save it. +2. Go to Profile -> View API keys +3. Create new secret key + +See [How to get ChatGPT API key](https://elephas.app/blog/how-to-get-chatgpt-api-key-clh93ii2e1642073tpacu6w934j) + +Once you have obtained a API key, you can configure the extension to use it as described in the previous section. + +### Run ChatGPT retrieval plugin + +The modified ChatGPT retrieval plugin can be found in the retrieval folder. +To set it up, following these steps in the terminal: + +``` +cd retrieval +pip install poetry +poetry env use python3.10 +poetry shell +poetry install +``` + +Set your environment variables + +```bash +export DATASTORE=pinecone +export BEARER_TOKEN= +export OPENAI_API_KEY= +export PINECONE_API_KEY= +export PINECONE_ENVIRONMENT= +export PINECONE_INDEX= +``` + +Other environment variables + +```bash +DATABASE_INTERFACE_BEARER_TOKEN= +BASE_API_URL=http://0.0.0.0:8000 +PROJECT_PATH= +GPT_MODEL= +``` + +`GPT_MODEL` is the ChatGPT model to use, defaulting to `gpt-3.5-turbo`. + +`DATABASE_INTERFACE_BEARER_TOKEN` should be the same as `BEARER_TOKEN`. It is the token used with OAuth2 to authenticate with the DB. + +`BASE_API_URL` is the root URL of the Python FastAPI server which defaults to `http://0.0.0.0:8000` + +`PROJECT_PATH` is used by the file agent to correctly determine relative file path of a changed file relative to the project root. + +### Run Database Interface Server + +Then run `poetry run start` in the `/retrieval` folder + +```bash +retrieval $ poetry run start +``` + +It will start your Database Interface server. Open your browser and open `http://0.0.0.0:8000/docs#/`. + +If the page is up, you have successfully implemented the Database Interface module with Retrieval Plugin. + +## Using Vector Database to store code base + +The goal is to use an architecture similar to [chatgpt with external memory using vector database](https://betterprogramming.pub/enhancing-chatgpt-with-infinite-external-memory-using-vector-database-and-chatgpt-retrieval-plugin-b6f4ea16ab8) + +[![Vector DB architecture](/resources/VectorDB-architecture.webp) + +This will additionally use LangChain to chunk code files using a [Code splitter](https://python.langchain.com/en/latest/modules/indexes/text_splitters/examples/code_splitter.html) specific to the language of the code file being processed. + +We will need an agent running in the project root directory in the background to monitor file changes. For each file change it should call the API to `upsert` or `delete` vectors in the Vector Database so that this DB is always in sync with the project. + +It should only take into account files that are "source files" of the project. To achieve this, we can use `.gitignore` or `.npmignore` files along with a custom configuration. + +### Chokidar agent with ignore files + +We can use [chokidar](https://github.com/paulmillr/chokidar) as a battle-tested agent to monitor the file system for changes using file, dir, glob, or array of files to match. + +```ts +// Initialize watcher. +const watcher = chokidar.watch('file, dir, glob, or array', { + ignored: /(^|[\/\\])\../, // ignore dotfiles + persistent: true +}); + +// Something to use when events are received. +const log = console.log.bind(console); +// Add event listeners. +watcher + .on('add', path => log(`File ${path} has been added`)) + .on('change', path => log(`File ${path} has been changed`)) + .on('unlink', path => log(`File ${path} has been removed`)); +``` + +For any `add` or `change` we will call the `upsert` endpoint of the FastAPI python API for the modified [GPT Retrieval Plugin](https://github.com/openai/chatgpt-retrieval-plugin.git). + +For `unlink` of files (ie. deletion of a file) we call the `delete` endpoint. -Once you have obtained a session token, you can configure the extension to use it as described in the previous section. +Doing this, we can keep the Vector DB in sync with the file system of code base. +We will use [ignoring-watcher](https://www.npmjs.com/package/ignoring-watcher) as a convenient wrapper of Chokidar :) + +The `file_agent.js` can be found in `src` and can be run simply via node: + +Copy the `agent` folder of this repo to the root of your project folder: +- `file-agent.js` +- `agent-sync.js` +- `run-agent` +- `package.json` + +The programming language will be detected based on the [languagemap](https://github.com/blakeembrey/language-map/blob/main/languages.json) based on Github's [linguist yaml language file](https://github.com/github-linguist/linguist/blob/master/lib/linguist/languages.yml) + + +Alternative node lang detectors: +- [lang-detector](https://www.npmjs.com/package/lang-detector) +- [language-detect](https://www.npmjs.com/package/language-detect) +- [flourite](https://www.npmjs.com/package/flourite) +- [program-language-detector](https://www.npmjs.com/package/program-language-detector) + +```bash +npm install ignoring-watcher detect-programming-language -D` +``` + +### Run file agent in your project + +`node agent/file_agent.js` + +or via script (see `scripts` section in `agent/package.json`): + +`npm run file-agent` + + +## Code chunks + +This extension intends to use LangChain [CodeSplitter](https://python.langchain.com/en/latest/modules/indexes/text_splitters/examples/code_splitter.html) to split the code files as code. + +A custom TypeScript splitter is included in `src/typescript-textsplitter.js`. +A TypeScript splitter is also included as python code in `services/typescript-textsplitter.py` + +They both have a static `build` method that takes a dictionary of options. + +Typescript variant + +```ts +splitter = TypescriptTextSplitter.build(opts) +tsDocs = splitter.create_documents([code]) +return tsDocs +``` + +Python variant + +```py +splitter = TypescriptTextSplitter.build(opts) +ts_docs = splitter.create_documents([code]) +return ts_docs +``` + +The retrieval plugin uses a normal text splitter for text files but uses LangChain CodeSplitter when encountering files with an extension matching a programming language. + +Currently the file agent sends a special `language` metadata field as part of the `upsert` API call which can be used for chunking code files using an appropriate splitter. + +The agent will call the `upsert_file` Python API with the following meta-info based on the file path. + +This meta is determined on a "best effort" basis (some basic assumptions/rules), that can be customized as needed for the particular project. + +```ts + const meta = { + path: filePath, + language, // from Github's languagemap + langCode, // matches supported language codes for LangChain CodeSplitter lookup + config: isConfig, + test: isTest, + markdown: isMarkdown, + documentation: isDocumentation, + source: isSrc + }; +``` + +`language` will be picked up on the Python API side in `upsert` and is set, it will be used for code splitting (chunking) based on LangChain's language specific chunk separators and rules. + +Yet another approach would be to use the python library [guesslang](https://github.com/yoeo/guesslang) to guess the language of the document text based on Tensorflow machine learning framework (See [how does guesslang guess](https://guesslang.readthedocs.io/en/latest/contents.html#how-does-guesslang-guess)) + +> "Guesslang detects the programming language of a given source code. It supports more than 50 programming languages and detects the correct programming language with more than 90% accuracy." + +### Upsert file + +The upsert file Python logic is shown here for reference. First the Metadata is parsed into a `metadata_obj` that adheres to `DocumentMetadata` (see further below). + +This `metadata_obj` is then used to get a full `document` object (of type `Document`) from the file. This document is then stored in the Vector DB. + +```py +async def upsert_file( + file: UploadFile = File(...), + metadata: Optional[str] = Form(None), +): + try: + metadata_obj = ( + DocumentMetadata.parse_raw(metadata) + if metadata + else DocumentMetadata(source=Source.file) + ) + except: + metadata_obj = DocumentMetadata(source=Source.file) + + document = await get_document_from_file(file, metadata_obj) + + try: + ids = await datastore.upsert([document]) + return UpsertResponse(ids=ids) + except Exception as e: + logger.error(e) + raise HTTPException(status_code=500, detail=f"str({e})") +``` + +In the Python API `upsert` calls `get_document_chunks`, which calls `create_document_chunks` which calls `get_text_chunks` + +### Create document chunks + +`create_document_chunks` gets a document of the type `Document` + +```py +class Document(BaseModel): + id: Optional[str] = None + text: str + metadata: Optional[DocumentMetadata] = None +``` + +`DocumentMetadata` has been expanded to contain some fields to specify more information regarding the particular document, to answer questions such as: + +- What is the local file path of the document? +- What programming language is used? +- Is it part of test suite? +- Is it a configuration file? +- Is it a source file? +- Is it part of project documentation? +- Is it a markdown file? + +```py +class DocumentMetadata(BaseModel): + source: Optional[Source] = None + source_id: Optional[str] = None + path: Optional[str] = None + langCode: Optional[str] = None + language: Optional[str] = None + config: Optional[bool] = None + test: Optional[bool] = None + source: Optional[bool] = None + documentation: Optional[bool] = None + markdown: Optional[bool] = None + url: Optional[str] = None + created_at: Optional[str] = None + author: Optional[str] = None +``` + +These fields have also been expanded into the filter: + +```py +class DocumentMetadataFilter(BaseModel): + document_id: Optional[str] = None + path: Optional[str] = None + langCode: Optional[str] = None + language: Optional[str] = None + config: Optional[bool] = None + test: Optional[bool] = None + source: Optional[bool] = None + documentation: Optional[bool] = None + markdown: Optional[bool] = None + source: Optional[Source] = None + source_id: Optional[str] = None + author: Optional[str] = None + start_date: Optional[str] = None # any date string format + end_date: Optional[str] = None # any date string format +``` + +Based on the metadata for the document it can decide which chunker (splitter) to use and how to populate the VectorDB with powerful metadata for use by the AI and embeddings search etc. ## Using the Extension @@ -77,7 +367,6 @@ To **reset the conversation context**, click `ctrl+shift+p` and select `ChatGPT: Please note that this extension is currently a proof of concept and may have some limitations or bugs. We welcome feedback and contributions to improve the extension. - ## Credits - This wouldn't be possible without OpenAI's [ChatGPT](https://chat.openai.com/chat) diff --git a/agent/agent-sync.js b/agent/agent-sync.js new file mode 100644 index 0000000..60957a2 --- /dev/null +++ b/agent/agent-sync.js @@ -0,0 +1,96 @@ +const path = require("path"); +const axios = require("axios"); +const baseApiUrl = process.env.BASE_API_URL || 'http://0.0.0.0:8000'; + +const envProjPath = process.env.PROJECT_PATH; +const defaultPath = getPath.join(__dirname, '..'); +const projPath = envProjPath || defaultPath; + +const requestUpsertFile = async (filePath, fileOpts = {}, headers = {}) => { + try { + const file = fs.createReadStream(filePath); + const form = new FormData(); + form.append('title', title); + form.append('file', file); + form.append('filePath', filePath); + // iterate opts with extra metadata + Object.keys(fileOpts).forEach(key => { + form.append(key, fileOpts[key]); + }); + + const resp = await axios.post(`${baseApiUrl}/upsert-file`, form, { + headers: { + ...form.getHeaders(), + ...headers || {} + } + }); + + if (resp.status === 200) { + return 'Upload complete'; + } + } catch(err) { + return new Error(err.message); + } +}; + +// ids or request.filter or request.delete_all +const requestDelete = async (filePath, fileOpts = {}, headers = {}) => { + try { + const form = new FormData(); + // + // ids: Optional[List[str]] = None + // filter: Optional[DocumentMetadataFilter] = None + // delete_all: Optional[bool] = False + + // DocumentMetadataFilter + // document_id: Optional[str] = None + // source: Optional[Source] = None + // source_id: Optional[str] = None + + form.append('ids', [filePath]); + // iterate opts with extra metadata + Object.keys(fileOpts).forEach(key => { + form.append(key, fileOpts[key]); + }); + + const resp = await axios.post(`${baseApiUrl}/delete`, form, { + headers: { + ...form.getHeaders(), + ...headers || {} + } + }); + + if (resp.status === 200) { + return 'Delete complete'; + } + } catch(err) { + return new Error(err.message); + } +}; + +const accessToken = process.env.DATABASE_INTERFACE_BEARER_TOKEN; + +const headers = { + "Authorization": "Bearer " + accessToken // token +}; + +async function upsertFile (filePath) { + const opts = {}; + if (projPath) { + const relativePath = path.relative(projPath, filePath); + opts = {relativePath}; + } + const response = await requestUpsertFile(filePath, opts, headers); + console.log(response); +}; + +async function deleteFile (filePath) { + const response = await requestDelete(filePath, {}, headers); + console.log(response); +}; + +module.exports = { + upsertFile, + deleteFile, + projPath +}; diff --git a/agent/file-agent.js b/agent/file-agent.js new file mode 100644 index 0000000..0ede45d --- /dev/null +++ b/agent/file-agent.js @@ -0,0 +1,166 @@ +const sync = require("./agent-sync"); +const getPath = require("path"); +const watcher = require('ignoring-watcher'); +const getProgrammingLanguage = require("detect-programming-language"); + +function getMeta(path) { + const ext = getPath.extname(path); + const isTest = false; + if (path.match(/tests?.\//)) { + isTest = true; + } + if (ext.match(/\.test\./)) { + isTest = true; + } + if (ext.match(/\.spec\./)) { + isTest = true; + } + + if (ext.match(/\.spec\./)) { + isTest = true; + } + + isSrc = false; + if (path.match(/src\//) || path.match(/source\//) || path.match(/libs?\//)) { + isSrc = true; + } + + isConfig = false; + if (path.match(/configs?\//) || path.match(/configurations?\//)) { + isConfig = true; + } + if (ext.match(/\.ya?ml/)) { + isConfig = true; + } + if (ext.match(/\.json/)) { + isConfig = true; + } + if (ext.match(/\.xml/)) { + isConfig = true; + } + if (ext.match(/\.ini/)) { + isConfig = true; + } + if (ext.match(/\.env/)) { + isConfig = true; + } + + isMarkDown = false; + if (['.md', '.mkd', '.mkdown', '.markdown'].includes(ext)) { + isMarkDown = true; + } + // to be improved w doc/docs folder etc + isDocumentation = false; + if (isMarkDown) { + isDocumentation = true; + } + + const language = getProgrammingLanguage(ext); + + const langMap = { + 'C++': 'cpp', + 'C#': 'java', + Go: 'go', + Java: 'java', + Javascript: 'js', + JSX: 'js', + Typescript: 'typescript', + TSX: 'typescript', + PHP: 'php', + Proto: 'proto', + Python: 'python', + reStructuredText: 'rst', + Ruby: 'ruby', + Rust: 'rust', + Scala: 'scala', + Swift: 'swift', + Markdown: 'markdown', + Latex: 'latex', + HTML: 'html' + }; + + const langCode = langMap[language]; + + const meta = { + path: filePath, + language, + langCode, + config: isConfig, + test: isTest, + markdown: isMarkdown, + documentation: isDocumentation, + source: isSrc + }; + return meta; +} + +function startWatcher(dir) { + + const ignoringWatcher = watcher.createWatcher({ + // Directory to watch. Defaults to process.cwd() + dir: dir || sync.projPath, + + // Watch multiple directories instead of a single dir + dirs: ['some/dir', 'another/dir'], + + // One or more ignore patterns + ignorePatterns: [ + '/node_modules', + ], + + // The ignore patterns from these ignore files will all + // be loaded and joined together + ignoreFiles: [ + '.gitignore', + '.npmignore' + ], + + // Only the first existing ignore file (if any) will be loaded and merged + selectIgnoreFile: [ + '.gitignore', + '.npmignore' + ], + + // If no ignore patterns were found via the other properties + // then these ignore patterns will be used + defaultIgnorePatterns: [ + '.*', + '*.lock' + ], + + // The following patterns will always be loaded and not impact + // the loading of the `defaultIgnorePatterns` + ignoreAlwaysPatterns: [ + 'log.*', // no need to use log files + '*.lock', // no need to use lock files + '/temp/*' // no need to look at anything in temp folder + ] + }); + + ignoringWatcher + .on('modified', function(eventArgs) { // Fired for any change event (add, delete, etc.) + // var type = eventArgs.type; // add | addDir | change | unlink | unlinkDir + var filePath = eventArgs.path; // The full file system path of the modified file + const meta = getMeta(path); + sync.upsertFile(filePath, meta); + }); + ignoringWatcher + .on('add', function(eventArgs) { // Fired for any change event (add, delete, etc.) + // var type = eventArgs.type; // add | addDir | change | unlink | unlinkDir + var filePath = eventArgs.path; + const meta = getMeta(path); + sync.upsertFile(filePath, meta); + }); + + ignoringWatcher + .on('unlink', function(eventArgs) { // Fired for any change event (add, delete, etc.) + // var type = eventArgs.type; // add | addDir | change | unlink | unlinkDir + var filePath = eventArgs.path; // The full file system path of the modified file + sync.deleteFile(filePath); + }); + + ignoringWatcher.startWatching(); +} + +startWatcher(); + diff --git a/agent/package.json b/agent/package.json new file mode 100644 index 0000000..7fd899a --- /dev/null +++ b/agent/package.json @@ -0,0 +1,17 @@ +{ + "name": "file-agent", + "version": "1.0.0", + "description": "Agent to detect file changes and sync with Vector DB for AI memory", + "main": "file-agent.js", + "scripts": { + "file-agent": "node agent/file_agent.js" + }, + "keywords": [], + "author": "", + "license": "ISC", + "devDependencies": { + "ignoring-watcher": "^1.1.0", + "detect-programming-language": "^1.0.1", + "axios": "^1.4.0" + } +} diff --git a/agent/run-agent b/agent/run-agent new file mode 100755 index 0000000..cc4d497 --- /dev/null +++ b/agent/run-agent @@ -0,0 +1,4 @@ +#!/usr/bin/env node + + const { startWatcher } = require("./file-agent"); + startWatcher(); \ No newline at end of file diff --git a/ai-team/api/strategy b/ai-team/api/strategy new file mode 100644 index 0000000..16e730d --- /dev/null +++ b/ai-team/api/strategy @@ -0,0 +1 @@ +To build the frontend the frontend team will work closely with the ui-ux team and the API team. diff --git a/ai-team/architecture/diagrams/C4-architecture.md b/ai-team/architecture/diagrams/C4-architecture.md new file mode 100644 index 0000000..76df8f0 --- /dev/null +++ b/ai-team/architecture/diagrams/C4-architecture.md @@ -0,0 +1,112 @@ +Write a Structurizr DSL diagram for the system +=== + +Certainly! Here's the Structurizr DSL code for the Cafeteria Management System: + +``` +workspace { + model { + user = person "Employee" + staff = person "Cafeteria Staff" + system = softwareSystem "Cafeteria Management System" { + containers { + webApp = container "Web Application" { + uses database, "Reads/Writes data to" + uses paymentGateway, "Processes Payments via" + uses orderService, "Places Orders via" + uses menuService, "Fetches Menus from" + } + + database = container "Database" { + technology = "Relational Database" + } + + paymentGateway = container "Payment Gateway" { + technology = "External Service" + } + + orderService = container "Order Service" { + technology = "Microservice" + uses database, "Stores Orders in" + } + + menuService = container "Menu Service" { + technology = "Microservice" + uses database, "Stores Menus in" + } + } + + views { + systemContext webApp { + include * + autoLayout + } + + containerDiagram webApp { + include * + autoLayout + } + } + } + } + + views { + configuration { + theme "Cafeteria Management System" { + font "Roboto", "14", "#ffffff" + background "#363636" + border "#d3d3d3" + } + } + } +} +``` + +This Structurizr DSL code represents the high-level architecture of the Cafeteria Management System, including the web application, database, payment gateway, order service, and menu service. The relationships and dependencies between the components are defined using the appropriate DSL syntax. + +=== +Install structurizr CLI +=== + +See [structurizr container](https://github.com/structurizr/cli/blob/master/docs/containers.md) + +A prebuilt Docker image is available at Docker Hub. To use it, for example: + +```bash +docker pull structurizr/cli:latest +docker run -it --rm -v $PWD:/usr/local/structurizr structurizr/cli +``` + +The file extension for a Structurizr file is typically `.dsl`. It is a common convention to use the ".dsl" extension to indicate that the file contains Structurizr DSL code. However, it's important to note that the file extension is not strictly enforced by the Structurizr platform, and you can choose any file extension you prefer as long as the content follows the Structurizr DSL syntax. + +[Structurizr DSL](https://github.com/structurizr/dsl) + +See [Structurizr DSL playground](https://structurizr.com/dsl) + +[Getting started with Structurizr lite](https://dev.to/simonbrown/getting-started-with-structurizr-lite-27d0) + +Step 1) Create a directory somewhere to store our workspace. + +Step 2) + +Be sure to replace PATH with the full path to the directory created in step 1. + +```bash +docker pull structurizr/lite +docker run -it --rm -p 8080:8080 -v PATH:/usr/local/structurizr structurizr/lite +``` + +For example, if the directory is located at `/Users/alice/structurizr`, the commands would be: + +```bash +docker pull structurizr/lite +docker run -it --rm -p 8080:8080 -v /Users/alice/structurizr:/usr/local/structurizr structurizr/lite +``` + +Open the workspace in a web browser by heading to `http://localhost:8080` and you should see your diagram. + +[Structurizr Cookbook](https://github.com/structurizr/dsl/tree/master/docs/cookbook) + +[DSL language reference](https://github.com/structurizr/dsl/blob/master/docs/language-reference.md) + +[structurizr to PNG](https://github.com/extenda/structurizr-to-png) \ No newline at end of file diff --git a/ai-team/architecture/diagrams/cafeteria-arch.dsl b/ai-team/architecture/diagrams/cafeteria-arch.dsl new file mode 100644 index 0000000..ebb32d6 --- /dev/null +++ b/ai-team/architecture/diagrams/cafeteria-arch.dsl @@ -0,0 +1,56 @@ +workspace { + model { + user = person "Employee" + staff = person "Cafeteria Staff" + system = softwareSystem "Cafeteria Management System" { + containers { + webApp = container "Web Application" { + uses database, "Reads/Writes data to" + uses paymentGateway, "Processes Payments via" + uses orderService, "Places Orders via" + uses menuService, "Fetches Menus from" + } + + database = container "Database" { + technology = "Relational Database" + } + + paymentGateway = container "Payment Gateway" { + technology = "External Service" + } + + orderService = container "Order Service" { + technology = "Microservice" + uses database, "Stores Orders in" + } + + menuService = container "Menu Service" { + technology = "Microservice" + uses database, "Stores Menus in" + } + } + + views { + systemContext webApp { + include * + autoLayout + } + + containerDiagram webApp { + include * + autoLayout + } + } + } + } + + views { + configuration { + theme "Cafeteria Management System" { + font "Roboto", "14", "#ffffff" + background "#363636" + border "#d3d3d3" + } + } + } +} \ No newline at end of file diff --git a/ai-team/architecture/diagrams/cafeteria.mmd b/ai-team/architecture/diagrams/cafeteria.mmd new file mode 100644 index 0000000..b585c05 --- /dev/null +++ b/ai-team/architecture/diagrams/cafeteria.mmd @@ -0,0 +1,61 @@ +erDiagram + Employee ||--o{ Order : Places + Employee ||--o{ Payment : Makes + Employee ||--o{ CafeteriaStaff : Manages + + Order ||--|{ Payment : Includes + + Menu ||--o{ OrderItem : Has + MenuCategory ||--o{ Menu : Categorizes + + Employee { + string employeeId + string firstName + string lastName + string username + string password + string email + string employeeMealCard + } + + Order { + string orderId + string employeeId + } + + Payment { + string paymentId + string employeeId + string orderId + number amount + string paymentMethod + } + + Menu { + string menuId + string name + string description + number price + string categoryId + } + + OrderItem { + string orderItemId + string orderId + string menuId + number quantity + } + + MenuCategory { + string categoryId + string name + } + + CafeteriaStaff { + string staffId + string firstName + string lastName + string username + string password + string email + } \ No newline at end of file diff --git a/ai-team/architecture/diagrams/mermaid.md b/ai-team/architecture/diagrams/mermaid.md new file mode 100644 index 0000000..39c5f75 --- /dev/null +++ b/ai-team/architecture/diagrams/mermaid.md @@ -0,0 +1,274 @@ +Write the Mermaid ERD code for this use case +=== + +Certainly! Here's the Mermaid ERD code representing the data model for the Cafeteria Management System: + +``` +erDiagram + Employee ||--o{ Order : Places + Employee ||--o{ Payment : Makes + Employee ||--o{ CafeteriaStaff : Manages + + Order ||--|{ Payment : Includes + + Menu ||--o{ OrderItem : Has + MenuCategory ||--o{ Menu : Categorizes + + Employee { + string employeeId + string firstName + string lastName + string username + string password + string email + string employeeMealCard + } + + Order { + string orderId + string employeeId + } + + Payment { + string paymentId + string employeeId + string orderId + number amount + string paymentMethod + } + + Menu { + string menuId + string name + string description + number price + string categoryId + } + + OrderItem { + string orderItemId + string orderId + string menuId + number quantity + } + + MenuCategory { + string categoryId + string name + } + + CafeteriaStaff { + string staffId + string firstName + string lastName + string username + string password + string email + } +``` + +=== +Generate code for mermaid sequence diagram for this use case +=== + +Certainly! Here's an example of a Mermaid sequence diagram for the cafeteria management system use case: + +``` +sequenceDiagram + participant Employee + participant Cafeteria + participant PaymentGateway + participant Kitchen + + Employee->Cafeteria: Place Order + Cafeteria->Kitchen: Prepare Order + Kitchen->Cafeteria: Order Ready + Cafeteria->Employee: Serve Order + Employee->Cafeteria: Make Payment + Cafeteria->PaymentGateway: Process Payment + PaymentGateway-->Cafeteria: Payment Success + Cafeteria-->Employee: Payment Acknowledgement +``` + +This sequence diagram illustrates the interactions between the employee, cafeteria, payment gateway, and kitchen components in the cafeteria management system. The sequence starts with the employee placing an order at the cafeteria. The kitchen prepares the order and notifies the cafeteria when it's ready. The cafeteria serves the order to the employee. Then, the employee makes a payment at the cafeteria, which is processed by the payment gateway. Finally, the cafeteria receives the payment confirmation and acknowledges it to the employee. + +=== +Create mermaid code for state transition diagram for payment of employees +=== + +Certainly! Here's an example of a Mermaid state transition diagram for the payment process of employees: + + +``` +stateDiagram + [*] --> Pending: Initialize Payment + Pending --> Processing: Submit Payment + Processing --> Completed: Payment Processed + Completed --> [*]: Payment Received +``` + +In this state transition diagram, the payment process starts in the initial state [*] and transitions to the Pending state when the payment is initialized. From the Pending state, the payment transitions to the Processing state when it is submitted for processing. Once the payment is successfully processed, it transitions to the Completed state. Finally, from the Completed state, the payment transitions back to the initial state [*] when the payment is received. + +=== +Create more detailed state diagram +=== + +Certainly! Here's an example of a more detailed Mermaid state transition diagram for the payment process of employees: + + +``` +stateDiagram + [*] --> Init: Initialize Payment + Init --> Verify: Verify Payment Details + Verify --> Process: Process Payment + Process --> Deduct: Deduct Amount from Account + Deduct --> Transfer: Transfer Funds to Employee + Transfer --> Notify: Notify Employee of Payment + Notify --> [*]: Payment Complete + + Verify --> Cancel: Cancel Payment + Process --> Cancel: Cancel Payment + Deduct --> Cancel: Cancel Payment + Transfer --> Cancel: Cancel Payment + Notify --> Cancel: Cancel Payment + Cancel --> [*]: Payment Canceled +``` + +In this state transition diagram, the payment process starts in the initial state [*] and transitions to the Init state when the payment is initialized. From the Init state, the payment moves to the Verify state to verify the payment details. If the payment details are valid, it transitions to the Process state to initiate the payment process. The payment then moves to the Deduct state to deduct the payment amount from the employee's account. Once the deduction is successful, it transitions to the Transfer state to transfer the funds to the employee's account. After the transfer, it moves to the Notify state to notify the employee of the payment. Finally, from the Notify state, the payment transitions back to the initial state [*] indicating the completion of the payment process. + +Additionally, there is a possibility to cancel the payment at various stages. If the payment needs to be canceled during the verification, processing, deduction, transfer, or notification stages, it transitions to the Cancel state, and from there, it moves back to the initial state [*] indicating the cancellation of the payment. + +=== +Create state diagram for entire use case +=== + +Certainly! Here's a state diagram for the entire cafeteria management system use case: + +``` +stateDiagram + [*] --> Startup: System Startup + Startup --> Idle: System Ready + + Idle --> Menu: Select Menu Option + Menu --> Order: Place Order + Order --> Process: Process Order + Process --> Prepare: Prepare Order + Prepare --> Serve: Serve Order + Serve --> Complete: Order Complete + Complete --> Idle: Return to Idle + + Menu --> AddBalance: Add Balance + AddBalance --> Idle: Return to Idle + + Menu --> CheckBalance: Check Balance + CheckBalance --> Idle: Return to Idle + + Menu --> ViewHistory: View Order History + ViewHistory --> Idle: Return to Idle + + Menu --> Quit: Quit System + Quit --> Shutdown: System Shutdown +``` + +In this state diagram, the system starts in the initial state [*] and transitions to the Startup state when the system is being started up. From the Startup state, it moves to the Idle state, indicating that the system is ready and waiting for user input. + +Once in the Idle state, users can select various options from the menu, such as placing an order (Menu --> Order), adding balance to their account (Menu --> AddBalance), checking their balance (Menu --> CheckBalance), viewing their order history (Menu --> ViewHistory), or quitting the system (Menu --> Quit). + +If a user chooses to place an order, the system transitions to the Order state. The order is then processed (Order --> Process), prepared (Process --> Prepare), served (Prepare --> Serve), and marked as complete (Serve --> Complete). After the order is complete, the system returns to the Idle state. + +Users can also add balance to their account, check their balance, or view their order history. Each of these options transitions to a corresponding state and then returns to the Idle state after the operation is complete. + +If the user chooses to quit the system, the system transitions to the Quit state and eventually shuts down (Quit --> Shutdown). + +=== +Please create a more detailed diagram +=== + +Certainly! Here's a more detailed state diagram for the cafeteria management system use case: + +``` +stateDiagram + [*] --> Startup: System Startup + Startup --> Idle: System Ready + + state Idle { + [*] --> Menu: Select Menu Option + Menu --> ViewBalance: View Balance + Menu --> AddBalance: Add Balance + Menu --> ViewOrderHistory: View Order History + Menu --> PlaceOrder: Place Order + Menu --> Checkout: Checkout + Menu --> CancelOrder: Cancel Order + Menu --> Logout: Logout + + state ViewBalance { + [*] --> DisplayBalance: Display Balance + DisplayBalance --> Menu: Return to Menu + } + + state AddBalance { + [*] --> EnterAmount: Enter Amount + EnterAmount --> ProcessPayment: Process Payment + ProcessPayment --> DisplaySuccess: Display Success Message + DisplaySuccess --> Menu: Return to Menu + } + + state ViewOrderHistory { + [*] --> FetchHistory: Fetch Order History + FetchHistory --> DisplayHistory: Display Order History + DisplayHistory --> Menu: Return to Menu + } + + state PlaceOrder { + [*] --> SelectItems: Select Items + SelectItems --> AddToCart: Add to Cart + SelectItems --> RemoveFromCart: Remove from Cart + SelectItems --> AdjustQuantity: Adjust Quantity + SelectItems --> ViewCart: View Cart + SelectItems --> ConfirmOrder: Confirm Order + + state ViewCart { + [*] --> DisplayCart: Display Cart + DisplayCart --> SelectItems: Continue Editing + DisplayCart --> ConfirmOrder: Proceed to Checkout + } + + state ConfirmOrder { + [*] --> ProcessOrder: Process Order + ProcessOrder --> DisplaySuccess: Display Success Message + DisplaySuccess --> Menu: Return to Menu + } + } + + state Checkout { + [*] --> ProcessPayment: Process Payment + ProcessPayment --> DisplaySuccess: Display Success Message + DisplaySuccess --> Menu: Return to Menu + } + + state CancelOrder { + [*] --> ConfirmCancellation: Confirm Cancellation + ConfirmCancellation --> ProcessCancellation: Process Cancellation + ProcessCancellation --> DisplaySuccess: Display Success Message + DisplaySuccess --> Menu: Return to Menu + } + + Logout --> Startup: Logout and Restart + } + + Startup --> Shutdown: System Shutdown +``` + +In this more detailed state diagram, the system starts in the initial state [*] and transitions to the Startup state during system startup. From the Startup state, it moves to the Idle state, indicating that the system is ready and waiting for user input. + +Within the Idle state, users have various menu options such as viewing their balance, adding balance, viewing order history, placing an order, checking out, canceling an order, and logging out. + +The Idle state contains substates for each menu option, allowing for more specific interactions. For example, users can view their balance (Menu --> ViewBalance), add balance to their account (Menu --> AddBalance), view their order history (Menu --> ViewOrderHistory), place an order (Menu --> PlaceOrder), proceed to checkout (Menu --> Checkout), cancel an order (Menu --> CancelOrder), or log out of the system (Menu --> Logout). + +Some substates have further substates. For instance, within the PlaceOrder state, users can select items, add them to the cart, adjust quantities, view the cart, and confirm the order. + +The diagram also includes transitions to handle specific actions, such as processing payments, displaying success messages, and returning to the main menu. + +If the user chooses to log out, the system transitions back to the Startup state, allowing for a fresh start. Finally, the system can be shut down from the Startup state (Startup --> Shutdown). + +This more detailed state diagram provides a comprehensive representation of the various states, substates, and transitions involved in the cafeteria management system. It showcases the different paths and interactions users can have with the system based on their menu selections. diff --git a/ai-team/backend/data-model.md b/ai-team/backend/data-model.md new file mode 100644 index 0000000..10e0241 --- /dev/null +++ b/ai-team/backend/data-model.md @@ -0,0 +1,186 @@ +Define a data model for this use case +=== + +Data Model for Cafeteria Management System: + +Employee: +employeeId: string (unique identifier for each employee) +firstName: string (employee's first name) +lastName: string (employee's last name) +username: string (employee's login username) +password: string (employee's login password) +email: string (employee's email address) +employeeMealCard: string (unique identifier for the employee's meal card) + +Menu: +menuId: string (unique identifier for each menu item) +name: string (name of the menu item) +description: string (description of the menu item) +price: number (price of the menu item) +category: string (category of the menu item, e.g., main course, side dish, beverage) + +Order: +orderId: string (unique identifier for each order) +employeeId: string (reference to the employee who placed the order) +items: Array of objects +menuId: string (reference to the menu item ordered) +quantity: number (quantity of the menu item ordered) + +Payment: +paymentId: string (unique identifier for each payment) +employeeId: string (reference to the employee who made the payment) +orderId: string (reference to the order for which the payment is made) +amount: number (total amount paid) +paymentMethod: string (method used for payment, e.g., credit card, meal card) + +Meal: +mealId: string (unique identifier for each prepared meal) +orderId: string (reference to the order for which the meal is prepared) +preparationTime: Date (timestamp indicating when the meal is prepared) +pickupTime: Date (timestamp indicating when the meal is ready for pickup) + +Cafeteria Staff: +staffId: string (unique identifier for each staff member) +firstName: string (staff member's first name) +lastName: string (staff member's last name) +username: string (staff member's login username) +password: string (staff member's login password) +email: string (staff member's email address) + +Menu Category: +categoryId: string (unique identifier for each menu category) +name: string (name of the menu category) +Note: This data model provides a basic structure for the cafeteria management system. Additional attributes and relationships can be added based on specific requirements, such as dietary preferences, allergens, loyalty points, etc. + +=== +write data model in tabular form +=== + +Sure! Here's the data model for the Cafeteria Management System in tabular form: + +Employee Table: + +Column Data Type Description +employeeId string Unique identifier for each employee +firstName string Employee's first name +lastName string Employee's last name +username string Employee's login username +password string Employee's login password +email string Employee's email address +employeeMealCard string Unique identifier for the employee's meal card +Menu Table: + +Column Data Type Description +menuId string Unique identifier for each menu item +name string Name of the menu item +description string Description of the menu item +price number Price of the menu item +category string Category of the menu item +Order Table: + +Column Data Type Description +orderId string Unique identifier for each order +employeeId string Reference to the employee who placed the order +items array Array of objects representing the ordered menu items +Payment Table: + +Column Data Type Description +paymentId string Unique identifier for each payment +employeeId string Reference to the employee who made the payment +orderId string Reference to the order for which the payment is made +amount number Total amount paid +paymentMethod string Method used for payment +Meal Table: + +Column Data Type Description +mealId string Unique identifier for each prepared meal +orderId string Reference to the order for which the meal is prepared +preparationTime Date Timestamp indicating when the meal is prepared +pickupTime Date Timestamp indicating when the meal is ready for pickup +Cafeteria Staff Table: + +Column Data Type Description +staffId string Unique identifier for each staff member +firstName string Staff member's first name +lastName string Staff member's last name +username string Staff member's login username +password string Staff member's login password +email string Staff member's email address +Menu Category Table: + +Column Data Type Description +categoryId string Unique identifier for each menu category +name string Name of the menu category +Note: This tabular representation provides a clear overview of the data model, its columns, and their respective data types. + +=== +Write the Mermaid ERD code for this use case +=== + +Certainly! Here's the Mermaid ERD code representing the data model for the Cafeteria Management System: + +``` +erDiagram + Employee ||--o{ Order : Places + Employee ||--o{ Payment : Makes + Employee ||--o{ CafeteriaStaff : Manages + + Order ||--|{ Payment : Includes + + Menu ||--o{ OrderItem : Has + MenuCategory ||--o{ Menu : Categorizes + + Employee { + string employeeId + string firstName + string lastName + string username + string password + string email + string employeeMealCard + } + + Order { + string orderId + string employeeId + } + + Payment { + string paymentId + string employeeId + string orderId + number amount + string paymentMethod + } + + Menu { + string menuId + string name + string description + number price + string categoryId + } + + OrderItem { + string orderItemId + string orderId + string menuId + number quantity + } + + MenuCategory { + string categoryId + string name + } + + CafeteriaStaff { + string staffId + string firstName + string lastName + string username + string password + string email + } +``` + +This Mermaid ERD code represents the relationships between the various entities in the Cafeteria Management System, including employees, orders, payments, menus, and cafeteria staff. The relationships are visualized using the appropriate arrow notations. diff --git a/ai-team/backend/database/prisma-schema.md b/ai-team/backend/database/prisma-schema.md new file mode 100644 index 0000000..9ef0719 --- /dev/null +++ b/ai-team/backend/database/prisma-schema.md @@ -0,0 +1,174 @@ +create the prisma schema for the use case +=== + +To create the Prisma schema for the property administration system use case, you can define the data models and their relationships in the schema file. Here's an example Prisma schema for this use case: + +```prisma +// schema.prisma + +model Property { + id Int @id @default(autoincrement()) + name String + address String + units Unit[] +} + +model Unit { + id Int @id @default(autoincrement()) + number Int + area Float + property Property @relation(fields: [propertyId], references: [id]) + propertyId Int + tenants Tenant[] +} + +model Tenant { + id Int @id @default(autoincrement()) + firstName String + lastName String + email String @unique + phone String? + unit Unit @relation(fields: [unitId], references: [id]) + unitId Int + leases Lease[] +} + +model Lease { + id Int @id @default(autoincrement()) + startDate DateTime + endDate DateTime + rent Float + unit Unit @relation(fields: [unitId], references: [id]) + unitId Int + tenant Tenant @relation(fields: [tenantId], references: [id]) + tenantId Int +} +``` + +In the above schema, we have defined four models: Property, Unit, Tenant, and Lease. Each model represents a different entity in the property administration system. + +The Property model represents a property with its name, address, and a list of units associated with it. + +The Unit model represents an individual unit within a property, with its number, area, and a reference to the parent Property model. + +The Tenant model represents a tenant with their first name, last name, email, phone number, and the unit they are associated with. + +The Lease model represents a lease agreement with its start date, end date, rent amount, and references to the associated Unit and Tenant. + +The relationships between the models are defined using the @relation attribute. For example, the Property model has a one-to-many relationship with the Unit model, and the Unit model has a one-to-many relationship with the Tenant model. + +You can use this Prisma schema to generate database migrations, create the database tables, and interact with the database using the Prisma Client. + +=== +Please create a more detailed schema for the property administration system which includes models to support all user flows in the use case +=== + +Certainly! Here's an expanded schema for the property administration system that includes additional models to support various user flows: + +```prisma +// schema.prisma + +model User { + id Int @id @default(autoincrement()) + email String @unique + password String + firstName String + lastName String + role Role +} + +model Role { + id Int @id @default(autoincrement()) + name String @unique + users User[] +} + +model Property { + id Int @id @default(autoincrement()) + name String + address String + units Unit[] +} + +model Unit { + id Int @id @default(autoincrement()) + number Int + area Float + property Property @relation(fields: [propertyId], references: [id]) + propertyId Int + tenants Tenant[] + leases Lease[] +} + +model Tenant { + id Int @id @default(autoincrement()) + firstName String + lastName String + email String @unique + phone String? + unit Unit @relation(fields: [unitId], references: [id]) + unitId Int + leases Lease[] +} + +model Lease { + id Int @id @default(autoincrement()) + startDate DateTime + endDate DateTime + rent Float + unit Unit @relation(fields: [unitId], references: [id]) + unitId Int + tenant Tenant @relation(fields: [tenantId], references: [id]) + tenantId Int + payments Payment[] +} + +model Payment { + id Int @id @default(autoincrement()) + amount Float + date DateTime + lease Lease @relation(fields: [leaseId], references: [id]) + leaseId Int +} + +model MaintenanceRequest { + id Int @id @default(autoincrement()) + title String + description String + status MaintenanceRequestStatus + unit Unit @relation(fields: [unitId], references: [id]) + unitId Int +} + +enum MaintenanceRequestStatus { + OPEN + IN_PROGRESS + COMPLETED +} + +model Announcement { + id Int @id @default(autoincrement()) + title String + content String + date DateTime @default(now()) + property Property @relation(fields: [propertyId], references: [id]) + propertyId Int +} + +model Document { + id Int @id @default(autoincrement()) + name String + url String + property Property @relation(fields: [propertyId], references: [id]) + propertyId Int +} +``` + +In this expanded schema: + +The User model represents system users and includes fields for email, password, first name, last name, and a reference to the user's role. +The Role model represents user roles and can be used to define different access levels or permissions. +The MaintenanceRequest model represents maintenance requests for specific units and includes fields for title, description, status, and a reference to the associated unit. +The Announcement model represents announcements that can be made for a specific property and includes fields for title, content, date, and a reference to the associated property. +The Document model represents documents associated with a property and includes fields for name, URL, and a reference to the associated property. +These additional models support functionalities such as user management, maintenance requests, announcements, and document management, enhancing the overall functionality of the property administration system. \ No newline at end of file diff --git a/ai-team/backend/database/repository-classes.md b/ai-team/backend/database/repository-classes.md new file mode 100644 index 0000000..9b27443 --- /dev/null +++ b/ai-team/backend/database/repository-classes.md @@ -0,0 +1,71 @@ +Please create a set of repository (data query and command) classes that can be used to operate on the Prisma based data model +ChatGPT +Certainly! Here's an example of repository classes that can be used to operate on the Prisma-based data model: + +```typescript +// userRepository.ts + +import { PrismaClient, User } from '@prisma/client'; + +export class UserRepository { + private prisma: PrismaClient; + + constructor() { + this.prisma = new PrismaClient(); + } + + async createUser(data: User): Promise { + return this.prisma.user.create({ data }); + } + + async getUserById(id: number): Promise { + return this.prisma.user.findUnique({ where: { id } }); + } + + async getUserByEmail(email: string): Promise { + return this.prisma.user.findUnique({ where: { email } }); + } + + async updateUser(id: number, data: Partial): Promise { + return this.prisma.user.update({ where: { id }, data }); + } + + async deleteUser(id: number): Promise { + return this.prisma.user.delete({ where: { id } }); + } +} +``` + +```ts +// propertyRepository.ts + +import { PrismaClient, Property } from '@prisma/client'; + +export class PropertyRepository { + private prisma: PrismaClient; + + constructor() { + this.prisma = new PrismaClient(); + } + + async createProperty(data: Property): Promise { + return this.prisma.property.create({ data }); + } + + async getPropertyById(id: number): Promise { + return this.prisma.property.findUnique({ where: { id } }); + } + + async updateProperty(id: number, data: Partial): Promise { + return this.prisma.property.update({ where: { id }, data }); + } + + async deleteProperty(id: number): Promise { + return this.prisma.property.delete({ where: { id } }); + } +} +``` + +These are just examples for the User and Property models. You can create similar repository classes for other models in your data model. These repository classes encapsulate the data operations using Prisma's query and mutation methods. You can use these classes to perform CRUD operations on the corresponding entities in your Prisma-based data model. + +Please make sure to install the required dependencies (@prisma/client and prisma) and configure Prisma properly in your project before using these repository classes. \ No newline at end of file diff --git a/ai-team/backend/database/strategy b/ai-team/backend/database/strategy new file mode 100644 index 0000000..a521f7a --- /dev/null +++ b/ai-team/backend/database/strategy @@ -0,0 +1,14 @@ +First set up the project and identify the main libraries and tools to use. + +Ask the user for: +- What are the main real world entities that are to be managed by the application + +Determine which properties and types would be suitable for each table given the project description + +Please provide the code to: + +Create each table using PostGres SQL: + +create table: name +``` +``` diff --git a/ai-team/backend/database/supabase b/ai-team/backend/database/supabase new file mode 100644 index 0000000..4cb7655 --- /dev/null +++ b/ai-team/backend/database/supabase @@ -0,0 +1,373 @@ +Supabase is an open source Firebase alternative. We're building the features of Firebase using enterprise-grade open source tools. + + - Hosted Postgres Database + - Authentication and Authorization. + - Auto-generated APIs + - REST + - GraphQL + - Realtime subscriptions. + - Functions. + - Database Functions + - Edge Functions + - File Storage + - AI + Vector/Embeddings Toolkit + - Dashboard + +Management API: +https://supabase.com/docs/reference/api/introduction + +Client: +Client library: supabase-js +Site: https://github.com/supabase/supabase-js + +Supabase SDK: + +Create new user: +https://supabase.com/docs/reference/javascript/auth-signup + +Sign in user: +https://supabase.com/docs/reference/javascript/auth-signinwithpassword + +Get user session: +https://supabase.com/docs/reference/javascript/auth-getsession + +Subscribe to channel: +https://supabase.com/docs/reference/javascript/subscribe + +List all buckets: +https://supabase.com/docs/reference/javascript/storage-listbuckets + +Create a signed url: +https://supabase.com/docs/reference/javascript/storage-from-createsignedurl + +Fetch data: +https://supabase.com/docs/reference/javascript/select + +Update data: +https://supabase.com/docs/reference/javascript/update + +Upsert data: +https://supabase.com/docs/reference/javascript/upsert + +Delete data: +https://supabase.com/docs/reference/javascript/delete + +Insert data: +https://supabase.com/docs/reference/javascript/insert + +Authentication# +All API requests require a Supabase Personal token to be included in the Authorization header: Authorization Bearer { + const user = await userRepository.createUser(input); + return user; + }, + }) + .mutation('createProperty', { + input: zodResolver(createPropertySchema), + resolve: async ({ input }) => { + const property = await propertyRepository.createProperty(input); + return property; + }, + }) + .query('getUser', { + input: z.number(), + resolve: async ({ input }) => { + const user = await userRepository.getUserById(input); + return user; + }, + }) + .query('getProperty', { + input: z.number(), + resolve: async ({ input }) => { + const property = await propertyRepository.getPropertyById(input); + return property; + }, + }); + +export type API = typeof trpc; + +export const api = trpc; +``` + +In this example, we define two mutations (createUser and createProperty) and two queries (getUser and getProperty). Each mutation and query has a corresponding Zod schema for data validation. We use the zodResolver from @trpc/server to automatically validate the input data against the specified Zod schema. + +The resolve function for each mutation and query calls the corresponding methods from the repository classes (userRepository and propertyRepository) to perform the desired data operations. + +You can add more mutations and queries as per your requirements and define their Zod schemas accordingly. Also, make sure to import and configure the necessary dependencies (trpc, @trpc/server, and z) in your project. + +Note: This is a simplified example to demonstrate the usage of tRPC and Zod for data validation. You may need to customize and expand it based on your specific use case and requirements. \ No newline at end of file diff --git a/ai-team/backend/nextjs/auth/nextauth b/ai-team/backend/nextjs/auth/nextauth new file mode 100644 index 0000000..33a9d90 --- /dev/null +++ b/ai-team/backend/nextjs/auth/nextauth @@ -0,0 +1,22 @@ +NextAuth.js is a complete open-source authentication solution for Next.js applications. + +It is designed from the ground up to support Next.js and Serverless. + +Check out the example code to see how easy it is to use NextAuth.js for authentication. + +Flexible and easy to use +- Designed to work with any OAuth service, it supports OAuth 1.0, 1.0A, 2.0 and OpenID Connect +- Built-in support for many popular sign-in services +- Supports email / passwordless authentication +- Supports stateless authentication with any backend (Active Directory, LDAP, etc) +- Supports both JSON Web Tokens and database sessions +- Designed for Serverless but runs anywhere (AWS Lambda, Docker, Heroku, etc…) + +Own your own data +NextAuth.js can be used with or without a database. + +An open-source solution that allows you to keep control of your data +- Supports Bring Your Own Database (BYOD) and can be used with any database +- Built-in support for MySQL, MariaDB, Postgres, SQL Server, MongoDB and SQLite +- Works great with databases from popular hosting providers +- Can also be used without a database (e.g. OAuth + JWT) \ No newline at end of file diff --git a/ai-team/backend/nextjs/auth/strategy b/ai-team/backend/nextjs/auth/strategy new file mode 100644 index 0000000..bb8e7d3 --- /dev/null +++ b/ai-team/backend/nextjs/auth/strategy @@ -0,0 +1,10 @@ +Determine and decide the Auth strategies to be supported and which backends are to be used. +Ask clarifying questions. + +When you have sufficient information generate the auth code as follows: + +One main authentication file + +Supporting auth files for each type of authentication supported + +Supporting files for backends as needed. \ No newline at end of file diff --git a/ai-team/backend/nextjs/blitz/strategy b/ai-team/backend/nextjs/blitz/strategy new file mode 100644 index 0000000..30404ce --- /dev/null +++ b/ai-team/backend/nextjs/blitz/strategy @@ -0,0 +1 @@ +TODO \ No newline at end of file diff --git a/ai-team/backend/nextjs/client-api.md b/ai-team/backend/nextjs/client-api.md new file mode 100644 index 0000000..83b4490 --- /dev/null +++ b/ai-team/backend/nextjs/client-api.md @@ -0,0 +1,44 @@ +Please write the `API.getUser` and `API.getUsers` with the actual functions that make the API calls to fetch the user data in your tRPC API +=== + +Certainly! Here's an example of how you can implement API.getUser and API.getUsers functions in your tRPC API to make the actual API calls for fetching user data: + +```javascript +// path/to/api.js + +import { trpc } from './path/to/trpc'; // Import your tRPC client + +export const API = { + getUser: async (id) => { + try { + const { data } = await trpc.query('getUser', { id }); + return data; + } catch (error) { + console.error('Error fetching user:', error); + throw error; + } + }, + + getUsers: async () => { + try { + const { data } = await trpc.query('getUsers'); + return data; + } catch (error) { + console.error('Error fetching users:', error); + throw error; + } + }, +}; +``` + +In this example, we assume that you have already set up your tRPC client using trpc and have defined the appropriate query names (getUser and getUsers) in your tRPC schema. + +Make sure to replace path/to/trpc with the correct path to your tRPC client file. + +Inside each function, we use trpc.query to make the actual API call to the corresponding tRPC endpoint. The getUser function takes the id parameter and passes it as an argument to the query. Similarly, the getUsers function doesn't require any parameters. + +If the API call is successful, we return the data property from the response. If an error occurs during the API call, we log the error and rethrow it to handle it further up the call stack. + +Remember to update the `getUser` and `getUsers` functions based on your tRPC API schema and actual endpoint names. + +With these functions in place, the `UserPage` and `UsersPage` components we discussed earlier will be able to fetch user data by calling `API.getUser` and `API.getUsers` respectively. \ No newline at end of file diff --git a/ai-team/backend/nextjs/libs b/ai-team/backend/nextjs/libs new file mode 100644 index 0000000..b66a7bd --- /dev/null +++ b/ai-team/backend/nextjs/libs @@ -0,0 +1,14 @@ +Blitz: +Blitz picks up where Next.js leaves off, providing battle-tested libraries and conventions for shipping and scaling world wide applications. + +Typesafe API Layer: +Build and iterate on features 10x faster with Blitz RPC than REST, GraphQL, or vanilla API routes. Read and write data from the client with full typesafety and without messing with HTTP or serialization. + +Authentication: +Powerful, flexible, and battle tested authentication and authorization for Next.js. You get more control with simpler APIs than alternatives. Easily add social third party integrations like Google, Github, and Auth0. + +Conventions & Codegen: +Set up a new app in 2 mins instead of 2 weeks. Everything will be set up for you including auth, user signup, forgot password, and your form library of choice. + +Site: https://blitzjs.com/ + diff --git a/ai-team/backend/nextjs/react-hook-form-pages.md b/ai-team/backend/nextjs/react-hook-form-pages.md new file mode 100644 index 0000000..516e881 --- /dev/null +++ b/ai-team/backend/nextjs/react-hook-form-pages.md @@ -0,0 +1,74 @@ +Please create a User profile management page in NextJS which calls the tRPC API using best practices. What library or built-in functionality would you recommend to take the form data from the page and make the call to the API? +=== + +To handle form data and make API calls in a Next.js application, I recommend using the `react-hook-form` library. It's a lightweight form validation library that integrates well with Next.js and provides an easy way to manage form state and perform form submissions. + +Here's an example of creating a User profile management page in Next.js that utilizes `react-hook-form` and makes API calls to the tRPC API: + +Install `react-hook-form` and other necessary dependencies: + +``` +npm install react-hook-form trpc react-query +``` + +Create a new file for the User profile management page: + +```jsx +Copy code +// pages/profile.js + +import { useState } from 'react'; +import { useForm } from 'react-hook-form'; +import { useMutation, useQueryClient } from 'react-query'; +import { API } from '../path/to/api'; // Import your tRPC API + +const ProfilePage = () => { + const { register, handleSubmit, formState: { errors } } = useForm(); + const queryClient = useQueryClient(); + const updateUserMutation = useMutation((data) => API.mutationName(data), { + onSuccess: () => { + queryClient.invalidateQueries('getUser'); // Invalidate cached user data + }, + }); + + const onSubmit = (data) => { + updateUserMutation.mutate(data); + }; + + return ( +
+

User Profile

+
+
+ + + {errors.name && Name is required} +
+
+ + + {errors.email && Valid email is required} +
+ {/* Add more form fields as needed */} + +
+
+ ); +}; + +export default ProfilePage; +``` + +In this example, we're using the useForm hook from `react-hook-form` to handle form state and validation. The form fields are registered with the register function, and we can specify validation rules such as required and pattern directly in the register function. + +The `useMutation` hook from `react-query` is used to handle the API call for updating the user profile. We define the onSuccess callback to invalidate the cached user data in the queryClient after a successful update. + +Inside the `onSubmit` function, we call the mutate function from updateUserMutation to trigger the API call with the form data. + +Note that you'll need to replace API.mutationName with the actual mutation name from your tRPC API. + +Make sure to import and configure the necessary dependencies (react-hook-form, react-query, and trpc) in your Next.js application. + +This example demonstrates a basic setup for form handling and API calls in Next.js using `react-hook-form` and `react-query`. You can expand upon this code to include additional form fields and validations as needed for your User profile management page. \ No newline at end of file diff --git a/ai-team/backend/nextjs/react-query-pages.md b/ai-team/backend/nextjs/react-query-pages.md new file mode 100644 index 0000000..1de1c66 --- /dev/null +++ b/ai-team/backend/nextjs/react-query-pages.md @@ -0,0 +1,90 @@ +Please create a single user display page which uses react-query and then a page which displays a list of users with pagination +=== + +Sure! Here's an example of creating a single user display page and a user list page using react-query in Next.js: + +Single User Display Page: + +```jsx +// pages/user/[id].js + +import { useRouter } from 'next/router'; +import { useQuery } from 'react-query'; +import { API } from '../path/to/api'; // Import your tRPC API + +const UserPage = () => { + const router = useRouter(); + const { id } = router.query; + + const { data: user, isLoading, isError } = useQuery(['user', id], () => API.getUser(id)); + + if (isLoading) { + return
Loading...
; + } + + if (isError) { + return
Error fetching user data
; + } + + return ( +
+

User Details

+ {user && ( +
+

{user.name}

+

Email: {user.email}

+ {/* Display other user details */} +
+ )} +
+ ); +}; + +export default UserPage; +``` + +In this example, we're using the useRouter hook from Next.js to get the id parameter from the URL. We then use the useQuery hook from react-query to fetch the user data based on the id parameter. The API.getUser function is a placeholder for the actual API call to retrieve a single user. + +User List Page with Pagination: + +```jsx +// pages/users.js + +import { useQuery } from 'react-query'; +import { API } from '../path/to/api'; // Import your tRPC API + +const UsersPage = () => { + const { data: users, isLoading, isError } = useQuery('users', API.getUsers); + + if (isLoading) { + return
Loading...
; + } + + if (isError) { + return
Error fetching user data
; + } + + return ( +
+

User List

+ +
+ ); +}; + +export default UsersPage; +``` + +In this example, we're using the `useQuery` hook from `react-query` to fetch the list of users. The API.getUsers function is a placeholder for the actual API call to retrieve the list of users. We then render the list of users as clickable links to their individual user pages. + +Make sure to replace API.getUser and API.getUsers with the actual functions that make the API calls to fetch the user data in your tRPC API. + +Remember to configure and set up react-query in your Next.js application by providing the appropriate and components in your _app.js file. + +These examples provide a basic structure for displaying a single user's details and a list of users with pagination using react-query in Next.js. You can customize and enhance these pages according to your specific needs and UI requirements. \ No newline at end of file diff --git a/ai-team/backend/nextjs/strategy b/ai-team/backend/nextjs/strategy new file mode 100644 index 0000000..b8fbd8d --- /dev/null +++ b/ai-team/backend/nextjs/strategy @@ -0,0 +1,27 @@ +First set up the project and identify the main libraries and tools to use. + +Ask the user for: +- Which nextjs project generator to use +- Which Cloud hosting provider to use +- Which external APIs to use +- Which Database to use +- Which Payment provider to use +- Which Authentication provider to use + +Leverage Blitz to the extent possible to simplify the project setup + +Please suggest a good choice for each based on information provided by the user. + +List the choices in the following manner: + +Backend project generator: +Name: +Command to execute generator with name of project: `insert command here` + +Nextjs supporting library: +Name: +Command to install backend library: `insert command here` + +If you believe multiple supporting libraries should be used, list all such libraries and a single install command which installs them all. + +Make sure the install commands also adds each library to the package.json file. \ No newline at end of file diff --git a/ai-team/backend/nextjs/ui/libs b/ai-team/backend/nextjs/ui/libs new file mode 100644 index 0000000..1133799 --- /dev/null +++ b/ai-team/backend/nextjs/ui/libs @@ -0,0 +1,2 @@ +Next UI: +Whether you are a beginner or an experienced developer, you can easily build sites and apps with the help of NextUI. It is a modern, fast, and beautiful React UI library that you can get started in no time. diff --git a/ai-team/backend/nextjs/ui/next-ui b/ai-team/backend/nextjs/ui/next-ui new file mode 100644 index 0000000..64cf08f --- /dev/null +++ b/ai-team/backend/nextjs/ui/next-ui @@ -0,0 +1,15 @@ +Features and benefits of NextUI include: + +Faster: NextUI eliminates unwanted style props during runtime. This makes the tool better performing than other React UI libraries. + +Unique DX: NextUI is fully typed, which helps reduce the learning curve while providing better developer experiences. Also, developers don’t need to import several components in order to showcase just one. Hence, you can do more by writing less code. + +Light and dark UI: You will get automatic recognition for dark mode. NextUI can automatically change your theme by detecting prop changes in the HTML theme. Its default dark theme is well scaled and easy to apply with less coding. + +Themeable: It offers an easy way to customize the default themes available. You can easily modify the fonts, color, breakpoints, etc. + +Customization: Since NextUI is developed on top of CSS-in-JS library Stitches, it’s easy to customize the components either through the CSS prop, native CSS selectors, or styled function. In addition, you will get a set of Stitches utilities out of the box to accelerate your workflow by grouping CSS properties together, shortening CSS properties, or simplifying a complex syntax. + +Server-side rendering: NextUI’s components facilitate cross-browser server-side rendering that you can easily apply to your applications. + +Accessibility: All the components by NextUI follow the WAI-ARIA guidelines and offer keyboard support. Users can also view a focus ring when they navigate using a screen reader or a keyboard. It’s also compatible with Next.js. \ No newline at end of file diff --git a/ai-team/backend/nextjs/ui/strategy b/ai-team/backend/nextjs/ui/strategy new file mode 100644 index 0000000..fef0e41 --- /dev/null +++ b/ai-team/backend/nextjs/ui/strategy @@ -0,0 +1,15 @@ +Explain the main design philosophy of each UI/UX library and the pros and cons +of using it. Determine whether it would be a good fit for the project and give it a score of 1-10 across the following dimensions. + +- simplicity +- scalability +- suitability +- popularity +- modern technology use +- overall + +Provide the command to install the latest stable package version of the library. + +Install package command: `insert command here` + +If you believe multiple UI/UX libraries should be used, list up to 3 such libraries and a single install command which installs them all. diff --git a/ai-team/backend/payment/strategy b/ai-team/backend/payment/strategy new file mode 100644 index 0000000..365b004 --- /dev/null +++ b/ai-team/backend/payment/strategy @@ -0,0 +1,20 @@ +First set up the project and identify the main libraries and tools to use. + +Ask the user for: +- Which payment options to support +- Which Subscriptions and plans to enable +- What to consult (file or database table) to determine costs for individual items + +Please provide the code to: + +Configure payment options: + +filename.ext +``` +``` + +Configure subscriptions and plans: + +filename.ext +``` +``` diff --git a/ai-team/backend/payment/stripe b/ai-team/backend/payment/stripe new file mode 100644 index 0000000..221e94e --- /dev/null +++ b/ai-team/backend/payment/stripe @@ -0,0 +1,13 @@ +Stripe: +Stripe is one of the prime payment gateways. It enables businesses and individuals to accept payments using their rich API and robust platform. Stripe makes it easier for business owners and vendors to start and manage their internet businesses by providing various payment solutions. + +Features +Payments for business — Stripe provides a complete set of solutions to businesses and platforms that own e-commerce shops. These solutions allow them to manage subscription billing and enable them to accept payment through various channels. + +Easy activation — Stripe onboarding is very user-friendly. You can create an account in minutes and get started with the libraries and SDKs to accept payment. + +Optimized revenue — Stripe uses machine learning techniques to detect fraud and increase authorization rates for every transaction. + +Global reach — Businesses can use different payment methods made available by Stripe to accept payment globally and increase the conversion rate significantly. + +Developer-friendly — Stripe libraries and SDKs are production-build-ready and have excellent support for integration with legacy applications. By using the Stripe development platform, you can accept payments simply and focus more on customer and product experience. \ No newline at end of file diff --git a/ai-team/backend/payment/write-stripe-code.md b/ai-team/backend/payment/write-stripe-code.md new file mode 100644 index 0000000..0eafdbe --- /dev/null +++ b/ai-team/backend/payment/write-stripe-code.md @@ -0,0 +1,120 @@ +Write the typescript code necessary for the detailed state diagram, using stripe as the payment provider. The code should be divided into separate logical files and reference each other correctly. +=== + +To implement the detailed state diagram using TypeScript and Stripe as the payment provider, you would need to divide the code into separate logical files and reference each other correctly. Here's an example structure for the code files: + +`paymentStateMachine.ts`: This file contains the state machine definition and transitions for the payment process. + +```ts +import { Machine, assign } from 'xstate'; + +interface PaymentContext { + // Define the context properties here + paymentIntentId: string | null; +} + +type PaymentEvent = + | { type: 'PAYMENT_REQUESTED' } + | { type: 'PAYMENT_FAILED' } + | { type: 'PAYMENT_COMPLETED' }; + +const paymentStateMachine = Machine( + { + id: 'payment', + initial: 'idle', + context: { + paymentIntentId: null, + }, + states: { + idle: { + on: { + PAYMENT_REQUESTED: 'processing', + }, + }, + processing: { + entry: assign({ + paymentIntentId: (context) => { + // Call Stripe API to create a Payment Intent and return the ID + const paymentIntentId = 'payment_intent_id'; // Replace with actual Payment Intent ID + return paymentIntentId; + }, + }), + on: { + PAYMENT_FAILED: 'failed', + PAYMENT_COMPLETED: 'completed', + }, + }, + failed: {}, + completed: {}, + }, + }, + { + actions: {}, + } +); + +export default paymentStateMachine; +``` + +`paymentService.ts`: This file contains the service that interacts with Stripe API for payment processing. + +```ts +import Stripe from 'stripe'; + +class PaymentService { + private stripe: Stripe; + + constructor(apiKey: string) { + this.stripe = new Stripe(apiKey); + } + + async createPaymentIntent(amount: number, currency: string): Promise { + // Call Stripe API to create a Payment Intent and return the ID + const paymentIntent = await this.stripe.paymentIntents.create({ + amount, + currency, + }); + return paymentIntent.id; + } + + // Other methods for handling payment processing with Stripe +} + +export default PaymentService; +``` + +`paymentController.ts`: This file contains the controller logic for handling payment requests and invoking the state machine. + +```ts +import { interpret } from 'xstate'; +import paymentStateMachine, { PaymentEvent } from './paymentStateMachine'; + +class PaymentController { + private machineService = interpret(paymentStateMachine).start(); + + requestPayment(): void { + const event: PaymentEvent = { type: 'PAYMENT_REQUESTED' }; + this.machineService.send(event); + } + + // Other methods for handling payment events and transitions +} + +export default PaymentController; +``` + +`main.ts`: This is the entry point file where you can initialize the payment controller and handle payment requests. + +```ts +import PaymentController from './paymentController'; + +const paymentController = new PaymentController(); +paymentController.requestPayment(); +``` + +// Other code for handling application logic +Please note that this is a simplified example, and you may need to customize it based on your specific requirements and integration with Stripe. Additionally, you would need to install the necessary packages (xstate, stripe, etc.) using a package manager like npm or yarn. + +Make sure to replace the placeholder values and add the necessary error handling, async/await, and API integration logic as per your application's requirements. + +Remember to set up the Stripe API keys and configure your environment accordingly to ensure proper integration with Stripe's services. \ No newline at end of file diff --git a/ai-team/backend/strategy b/ai-team/backend/strategy new file mode 100644 index 0000000..bbe49dc --- /dev/null +++ b/ai-team/backend/strategy @@ -0,0 +1,50 @@ +First set up the project and identify the main libraries and tools to use. + +Ask the user for: +- Which backend project creator to use +- Which backend library or framework to use +- Which Cloud hosting provider to use +- Which APIs to use +- Which Database to use +- Which Payment provider to use + +Please suggest a good choice for each based on information provided by the user. + +List the choices in the following manner: + +Backend project generator: +Name: +Command to execute generator with name of project: `insert command here` + +Backend library: +Name: +Command to install backend library: `insert command here` + +Cloud hosting provider: +Name: +Code for configuration of hosting provider information: + +path/filename.ext +``` +insert code here +``` + +Database: +Name: +Commands or code to setup database: + +Payment provider: +Name: +Code to setup payment provider account: + +path/filename.ext +``` +insert code here +``` + +Code to connect to payment provider account: + +path/filename.ext +``` +insert code here +``` diff --git a/ai-team/frontend/architecture/strategy b/ai-team/frontend/architecture/strategy new file mode 100644 index 0000000..d136d86 --- /dev/null +++ b/ai-team/frontend/architecture/strategy @@ -0,0 +1,71 @@ +Ask clarifying questions to determine the best overall architecture. + +Consider suitable architectures for: + +- State management +- User Interfaces +- API calls +- Security +- ... + +UI: +For the UI, ask clarifying questions in a top down manner. + +First determine how the user should enter the main home screen +Should there be a splash screen or fancy animation before home screen is displayed + +Home screen: +Ask clarifying questions to determine the general layout of the home screen. +Determine how much of this layout should be reused across other screens. + +Determine the main areas of the home screen and the use cases it should enable. +Each use case should be either directly accessible from the home screen and by navigation from the home screen. + +Determine the: + +- main menu structure and if the menu should be at the left or top. +- main content area +- side bars +- bottom area + +Ask clarifying questions to determine what should be presented in each main area +For each navigation option ask what screen should be presented +then proceed to break down that screen in terms of layout and what should be presented + +Continue this until all navigation paths and actions have been completed. + +For each area of the screen covered, generate a display folder with the following: + +folder: name + +Display Component + +name/component.tsx +``` +code +``` + +Component unit test + +name/component.spec.tsx +``` +code +``` + +State management + +name/state.ts +``` +code +``` + +Ensure the folder hierarchy reflects the logical hierarchy of the navigation from the main page. Build the UI and UX using the components from the chosen UI libraries where possible. +Use hooks to manage state, user input and API communication. + +Try to keep functions small (no more than 50 lines) and ensure they adhere to best practices such as Single Responsibility. + + + + + + diff --git a/ai-team/frontend/strategy b/ai-team/frontend/strategy new file mode 100644 index 0000000..16e730d --- /dev/null +++ b/ai-team/frontend/strategy @@ -0,0 +1 @@ +To build the frontend the frontend team will work closely with the ui-ux team and the API team. diff --git a/ai-team/frontend/web/react/hooks/hook-libs b/ai-team/frontend/web/react/hooks/hook-libs new file mode 100644 index 0000000..3f0cac5 --- /dev/null +++ b/ai-team/frontend/web/react/hooks/hook-libs @@ -0,0 +1,83 @@ +React Hooks Form: + +Npm name: react-hook-form + +React Hooks for form state management and validation (Web + React Native). It reduces the amount of code you need to write while removing unnecessary re-renders. + +Features +- Built with performance, UX, and DX in mind +- Embraces native HTML form validation +- Out-of-the-box integration with UI libraries +- Small size and no dependencies +- Support Yup, Zod, AJV, Superstruct, Joi, Vest, class-validator, io-ts, nope, and custom build + +React use: + +Npm name: react-use + +React use has a collection of essential React Hooks for managing devices sensors, UI controls, animations, side-effects, Lifecycle, State, and more + +React Query: + +Npm name: query + +Hooks for fetching, caching, and updating asynchronous data in React. It has declarative, always-up-to-date auto-managed queries and mutations that directly improve both your developer and user experiences + +Features +Transport/protocol/backend agnostic data fetching (REST, GraphQL, promises, whatever!) +Auto Caching + Refetching (stale-while-revalidate, Window Refocus, Polling/Realtime) +Parallel + Dependent Queries +Mutations + Reactive Query Refetching +Multi-layer Cache + Automatic Garbage Collection +Paginated + Cursor-based Queries +Load-More + Infinite Scroll Queries w/ Scroll Recovery +Request Cancellation +React Suspense + Fetch-As-You-Render Query Prefetching +Dedicated Devtools ... + +rehooks: + +Npm name: @rehooks/local-storage + +React hook for enabling synchronization with local storage. + +Features +Automatic JSON serialization +Synchronization across multiple tabs +Synchronization across multiple tabs +Type hinting via TypeScript + +useMedia: + +Npm name: use-media + +React sensor hook that tracks the state of a CSS media query. It takes a straightforward solution to the issue as media queries are extremely critical for the responsiveness of any application or website + +useFetch: + +Alias: useHttp + +Npm name: use-http + +It is an awesome package that is used as the replacement of Fetch API + +Features +- SSR (server-side rendering) support +- TypeScript support +- 2 dependencies (use-ssr, urs) +- GraphQL support (queries + mutations) +- Provider to set default URL and options +- Request/response interceptors +- React Native support +- Aborts/Cancels pending HTTP requests when a component unmounts +- Built in caching +- Persistent caching support +- Suspense(experimental) support +- Retry functionality + +React Hanger: + +Npm name: react-hanger + +Set of helpful hooks, for specific to some primitives types state changing helpers +react-hanger is a library that has some React Hooks that let us more easily manage various kinds of states. Here are some following Hooks: useInput useBoolean useNumber useArray useOnMount useOnUnmount and many more... \ No newline at end of file diff --git a/ai-team/frontend/web/react/hooks/strategy b/ai-team/frontend/web/react/hooks/strategy new file mode 100644 index 0000000..77e05cf --- /dev/null +++ b/ai-team/frontend/web/react/hooks/strategy @@ -0,0 +1,16 @@ +Explain the main design philosophy and benefits of each Hooks library and the pros and cons +of using it. Determine whether it would be a good fit for the project and give it a score of 1-10 across the following dimensions. + +- simplicity +- scalability +- suitability +- popularity +- modern technology use +- overall + +Provide the command to install the latest stable package version of the library. + +Install package command: `insert command here` + +If you believe multiple Hook libraries should be used, list up to 3 such libraries and a single install command which installs them all. + diff --git a/ai-team/frontend/web/react/state-management/state-libs b/ai-team/frontend/web/react/state-management/state-libs new file mode 100644 index 0000000..290bc4b --- /dev/null +++ b/ai-team/frontend/web/react/state-management/state-libs @@ -0,0 +1,20 @@ +React redux: +Package name: react-redux + +Zustand: +Package name: zustand + +Mobx: +Package name: mobx + +Jotai: +Package name: jotai + +Recoil: +Package name: recoil + +Mobx State Tree: +Package name: mobx-state-tree + +Unstated: +Package name: unstated diff --git a/ai-team/frontend/web/react/state-management/strategy b/ai-team/frontend/web/react/state-management/strategy new file mode 100644 index 0000000..8dc6f6a --- /dev/null +++ b/ai-team/frontend/web/react/state-management/strategy @@ -0,0 +1,15 @@ +Explain the main design philosophy of each State management library and the pros and cons +of using it. Determine whether it would be a good fit for the project and give it a score of 1-10 across the following dimensions. + +- simplicity +- scalability +- suitability +- popularity +- modern technology use +- overall + +Provide the command to install the latest stable package version of the library. + +Install package command: `insert command here` + + diff --git a/ai-team/frontend/web/react/strategy b/ai-team/frontend/web/react/strategy new file mode 100644 index 0000000..62a7f2b --- /dev/null +++ b/ai-team/frontend/web/react/strategy @@ -0,0 +1,10 @@ +First set up the project and identify the main libraries and tools to use. + +Ask the user for: + +- Which project creator to use +- Which UI library or framework to use +- Which Hosting provider to use +- Which hooks to use +- Which State management libraries to use +- Which APIs to use diff --git a/ai-team/frontend/web/react/test/api-mocking/libs b/ai-team/frontend/web/react/test/api-mocking/libs new file mode 100644 index 0000000..73d5447 --- /dev/null +++ b/ai-team/frontend/web/react/test/api-mocking/libs @@ -0,0 +1,2 @@ +Mock Service Worker: +Mock by intercepting requests on the network level. Seamlessly reuse the same mock definition for testing, development, and debugging. \ No newline at end of file diff --git a/ai-team/frontend/web/react/test/api-mocking/strategy b/ai-team/frontend/web/react/test/api-mocking/strategy new file mode 100644 index 0000000..ca48178 --- /dev/null +++ b/ai-team/frontend/web/react/test/api-mocking/strategy @@ -0,0 +1,5 @@ +Provide the command to install the latest stable package version of each API mocking library. + +Install package command: `insert command here` + +If you believe multiple libraries should be used, list up to 3 such libraries and a single install command which installs them all. diff --git a/ai-team/frontend/web/react/test/component-tests/libs b/ai-team/frontend/web/react/test/component-tests/libs new file mode 100644 index 0000000..c492c40 --- /dev/null +++ b/ai-team/frontend/web/react/test/component-tests/libs @@ -0,0 +1,11 @@ +React Testing Library: + +The React Testing Library is a very light-weight solution for testing React components. It provides light utility functions on top of react-dom and react-dom/test-utils, in a way that encourages better testing practices. Its primary guiding principle is: + +The more your tests resemble the way your software is used, the more confidence they can give you. + +So rather than dealing with instances of rendered React components, your tests will work with actual DOM nodes. The utilities this library provides facilitate querying the DOM in the same way the user would. Finding form elements by their label text (just like a user would), finding links and buttons from their text (like a user would). It also exposes a recommended way to find elements by a data-testid as an "escape hatch" for elements where the text content and label do not make sense or is not practical. + +This library encourages your applications to be more accessible and allows you to get your tests closer to using your components the way a user will, which allows your tests to give you more confidence that your application will work when a real user uses it. + +Package name: @testing-library/react \ No newline at end of file diff --git a/ai-team/frontend/web/react/test/component-tests/strategy b/ai-team/frontend/web/react/test/component-tests/strategy new file mode 100644 index 0000000..7e42068 --- /dev/null +++ b/ai-team/frontend/web/react/test/component-tests/strategy @@ -0,0 +1,14 @@ +Explain the main design philosophy of the most popular (up to 3) component testing libraries and the pros and cons of using each. Determine whether it would be a good fit for the project and give each library a score of 1-10 across the following dimensions. + +- simplicity +- scalability +- suitability +- popularity +- modern technology use +- overall + +Provide the command to install the latest stable package version of the library. + +Install package command: `insert command here` + +If you believe multiple libraries should be used, list up to 3 such libraries and a single install command which installs them all. diff --git a/ai-team/frontend/web/react/test/stories/libs b/ai-team/frontend/web/react/test/stories/libs new file mode 100644 index 0000000..781b5d1 --- /dev/null +++ b/ai-team/frontend/web/react/test/stories/libs @@ -0,0 +1,35 @@ +Storybook: +Every piece of UI is now a component. The superpower of components is that you don't need to spin up the whole app just to see how they render. You can render a specific variation in isolation by passing in props, mocking data, or faking events. + +Storybook is packaged as a small, development-only, workshop that lives alongside your app. It provides an isolated iframe to render components without interference from app business logic and context. That helps you focus development on each variation of a component, even the hard-to-reach edge cases. + +Capture UI variations as “stories”: +When developing a component variation in isolation, save it as a story. Stories are a declarative syntax for supplying props and mock data to simulate component variations. Each component can have multiple stories. Each story allows you to demonstrate a specific variation of that component to verify appearance and behavior. + +You write stories for granular UI component variation and then use those stories in development, testing, and documentation. + +Storybook keeps track of every story: +Storybook is an interactive directory of your UI components and their stories. In the past, you'd have to spin up the app, navigate to a page, and contort the UI into the right state. This is a huge waste of time and bogs down frontend development. With Storybook, you can skip all those steps and jump straight to working on a UI component in a specific state. + +Benefits: +When you write stories for components, you get a bunch of additional benefits for free. + +📝 Develop UIs that are more durable: +Isolate components and pages and track their use cases as stories. Verify hard-to-reach edge cases of UI. Use addons to mock everything a component needs—context, API requests, device features, etc. + +✅ Test UIs with less effort and no flakes +Stories are a pragmatic, reproducible way of tracking UI states. Use them to spot-test the UI during development. Storybook offers built-in workflows for automated Accessibility, Interaction, and Visual testing. Or use stories as test cases by importing them into other JavaScript testing tools. + +📚 Document UI for your team to reuse: +Storybook is the single source of truth for your UI. Stories index all your components and their various states, making it easy for your team to find and reuse existing UI patterns. Storybook also auto-generates documentation from those stories. + +📤 Share how the UI actually works: +Stories show how UIs actually work, not just a picture of how they're supposed to work. That keeps everyone aligned on what's currently in production. Publish Storybook to get sign-off from teammates. Or embed them in wikis, Markdown, and Figma to streamline collaboration. + +🚦Automate UI workflows: +Storybook is compatible with your continuous integration workflow. Add it as a CI step to automate user interface testing, review implementation with teammates, and get signoff from stakeholders. + +Write stories once, reuse everywhere: +Storybook is powered by Component Story Format, an open standard based on JavaScript ES6 modules. This enables stories to interoperate between development, testing, and design tools. Each story is exported as a JavaScript function enabling you to reuse it with other tools. No vendor lock-in. + +Reuse stories with Jest and Testing Library to verify interactions. Put them in Chromatic for visual testing. Audit story accessibility with Axe. Or test user flows with Playwright and Cypress. Reuse unlocks more workflows at no extra cost. \ No newline at end of file diff --git a/ai-team/frontend/web/react/test/stories/strategy b/ai-team/frontend/web/react/test/stories/strategy new file mode 100644 index 0000000..6b981ba --- /dev/null +++ b/ai-team/frontend/web/react/test/stories/strategy @@ -0,0 +1,7 @@ +Provide the command to install the latest stable package version of storybook. + +Install package command: `insert command here` + +If you believe supporting libraries should be used, list up to 3 such libraries and a single install command which installs them all. + +Install supporting libraries command: `insert command here` \ No newline at end of file diff --git a/ai-team/frontend/web/react/test/strategy b/ai-team/frontend/web/react/test/strategy new file mode 100644 index 0000000..977dffd --- /dev/null +++ b/ai-team/frontend/web/react/test/strategy @@ -0,0 +1,9 @@ +First set up the project and identify the main libraries and tools to use. + +Ask the user for: + +- Which component testing library to use +- Which user stories framework to use +- Which unit testing library to use +- Which general mocking library to use +- Which API mocking library to use diff --git a/ai-team/frontend/web/react/test/unit-testing/libs b/ai-team/frontend/web/react/test/unit-testing/libs new file mode 100644 index 0000000..7cabf4d --- /dev/null +++ b/ai-team/frontend/web/react/test/unit-testing/libs @@ -0,0 +1,2 @@ +Jest: +Jest is a JavaScript test runner that lets you access the DOM via jsdom. While jsdom is only an approximation of how the browser works, it is often good enough for testing React components. Jest provides a great iteration speed combined with powerful features like mocking modules and timers so you can have more control over how the code executes. \ No newline at end of file diff --git a/ai-team/frontend/web/react/test/unit-testing/strategy b/ai-team/frontend/web/react/test/unit-testing/strategy new file mode 100644 index 0000000..189c202 --- /dev/null +++ b/ai-team/frontend/web/react/test/unit-testing/strategy @@ -0,0 +1,5 @@ +Provide the command to install the latest stable package version of each frontend Unit testing library. + +Install package command: `insert command here` + +If you believe multiple libraries should be used, list up to 3 such libraries and a single install command which installs them all. diff --git a/ai-team/frontend/web/react/ui-tools b/ai-team/frontend/web/react/ui-tools new file mode 100644 index 0000000..7df2068 --- /dev/null +++ b/ai-team/frontend/web/react/ui-tools @@ -0,0 +1,83 @@ +React UI libraries to choose from: + +- Material UI +- React Bootstrap +- Ant Design +- Chakra UI +- Semantic UI React +- Headless UI +- React admin + +Material UI: +Material-UI (MUI) is a fully loaded UI component library that offers a comprehensive set of UI tools to create and deploy new features at speed. It is one of the most powerful and popular UI component libraries out there with over 3.2 million downloads on npm a week, 78k stars on GitHub, 17k+ followers on Twitter, and 2.4k+ open-source contributors. + +React Bootstrap: +React Bootstrap, is rebuilt for React-based applications and systems. It has replaced Bootstrap JavaScript, where each component is developed from scratch as native React components with no need for dependencies such as jQuery. + +React-Bootstrap, despite being one of the earliest React libraries, has evolved to become an excellent option for building effortless user interfaces. It includes amazing UI elements for your mobile and web applications. + +Ant Design: +If you are looking for a react based UI component library to build enterprise-grade products, Ant Design is an excellent option. It will help you create an enjoyable yet productive work experience. + +Chakra UI: +Create react applications with Chakra UI, which is a simple, accessible, and modular component library. It offers useful building blocks to help you build valuable features in your applications and delight users. + +Chakra’s popularity is growing due to its awesome offerings and performance. + +With this tool by your side, you will spend less time coding and more time creating wonderful experiences for the end users. Chakra UI is designed to make it easier for developers to add features faster without creating everything from scratch. + +As a result, they will have to write fewer codes and can choose a component directly in their design without having to write code for each component from scratch. It not only saves them time but also effort so that they can invest their valuable time in innovation. + +Fluent: +Fluent is a cross-platform, open-source design tool to help you create an engaging user experience. It was previously named Fabric React and is an excellent UI library created by Microsoft. + +Developers and designers can benefit from its useful tools to add design elements to their applications without having to create them from scratch. This tool is powerful and intuitive and is built to adjust as per user intent and behavior. No matter what device you use, working with Fluent feels natural, be it PCs, laptops, or tablets. + +Fluent is one of the best tools if you are creating cross-platform applications. + +Semantic UI: +Integrating React with Semantic UI can be an excellent strategy to get a customized UI component library for your projects. Semantic UI React helps you build your sites and applications with concise and easy HTML. It has 12k+ stars on GitHub. + +With this tool, you can load any CSS theme you want on the app you are building. It also has human-friendly HTML to develop software products. It’s a declarative API that offers powerful prop validation and features. + +Headless UI: +Created by Tailwind Labs, Headless UI offers fully-accessible and unstyled UI components designed to be easily compatible with Tailwind CSS. It is one of the best UI libraries for all your React-based projects. It also is popular with 54.5k+ stars on GitHub. + +Since this tool can separate the app logic from the visual components, it’s an excellent option if you are building a UI for your application. It enables you to create applications easily without leaving your HTML. Also, it’s a utility focussed CSS library full of classes such as rotate-90, text-center, pt-4, and flex. + +React Admin: +If you are looking for a React framework to build your B2B applications, React-admin is a good option. It aims to provide the best experiences to developers and enables you to focus more on fulfilling your business needs. + +This is an open-source tool with an MIT license and is robust, stable, easy to learn, and a joy to work with. This is why 10k+ companies across the world have used React-admin on their projects. + +With React-admin, you can create delightful UIs, whether you are building your internal tools, B2B apps, CRMs, or ERPs. It aims at increasing the maintainability and productivity of developers by allowing them to design faster. + +Retool: +If you are building internal applications, Retool is an excellent option. It will eliminate the struggle with UI libraries, data sources, and access controls. You will get a streamlined way to handle everything and produce apps that customers would love to use. + +This tool has been used by businesses of all sizes, from Fortune 500s to start-ups for creating awesome internal applications. + +Grommet: +Grommet is an all-around React framework with a tidy package that contains responsiveness, theming, accessibility, and modularity. It will help you streamline your software development with an effortless UI component library. + +This tool is an outstanding option if you are looking for a comprehensive design system to build accessible and responsive mobile-first web projects. It’s created by HPE and provides a vibrant experience while designing. + +Evergreen: +Offered by Segment, Evergreen is an amazing React UI library to help you create delightful software products. It’s also a design system that offers you flexibility and does not limit you to a particular configuration or needs obsolete integration. + +Evergreen facilitates building software products that can adapt to changing design needs. It offers a lot of features, components, and many benefits to help you create user-friendly and powerful interfaces. If you want to build enterprise-grade web applications, this will be a good option for you. + +Evergreen has a rich collection of guides, plugins, kits, and tools to simplify designing your systems. You can also go to Evergreen’s Figma library and get the help you require. + +Mantine: +Mantine is a fully featured React UI components library that you can use to develop your web applications and sites at quick turnaround times. It’s built to make your app accessible and flexible and comes with 40+ hooks and 100+ customizable components. + +This tool is open source and free with its packages having the MIT license. It’s based on TypeScript and supports several frameworks. + +This tool looks promising with all its features, offerings, and interface. Its components support server-side rendering across different browsers. + +React motion: +If you are looking for a solution to animate components in React, you can consider React Motion. It is an excellent React library that will help you create realistic animations. It’s easy to get started with this tool and use it. + +React virtualized: +If you are building a complex front end with heavy data, you may want to use React Virtualized. Whether it’s components or customizations, you can perform everything with ease in this tool. \ No newline at end of file diff --git a/ai-team/frontend/web/react/ui/ant-design b/ai-team/frontend/web/react/ui/ant-design new file mode 100644 index 0000000..28ed9d1 --- /dev/null +++ b/ai-team/frontend/web/react/ui/ant-design @@ -0,0 +1,7 @@ +Features and benefits of Ant Design include: + +Components: You can use 50+ pre-made components directly on your projects instead of creating them from scratch. These components include buttons, icons, typography, layouts, navigation, data entry, data display, feedback, etc. + +Ant design packages: These packages are useful for mobile, data visualization, graphic solutions, etc. + +Website: https://react-bootstrap.github.io/ \ No newline at end of file diff --git a/ai-team/frontend/web/react/ui/bootstrap b/ai-team/frontend/web/react/ui/bootstrap new file mode 100644 index 0000000..70ad73e --- /dev/null +++ b/ai-team/frontend/web/react/ui/bootstrap @@ -0,0 +1,9 @@ +Features and benefits of React Bootstrap include: + +Compatibility: React-Bootstrap is designed to be compatible with a wide range of UIs. It relies completely on the Bootstrap stylesheet and works with multiple Bootstrap themes that you might like. + +Accessibility: all the components included are developed to be easily accessible to any user or device. Hence, the user will also get better control over each component’s function and form. + +Lightweight: You can minimize the volume of code in your applications by importing just the components you need individually instead of importing the complete library. It will be less time-consuming as well. + +Themes: Since Bootstrap is used widely for web development, you will find thousands of paid and free themes available. \ No newline at end of file diff --git a/ai-team/frontend/web/react/ui/chakra-ui b/ai-team/frontend/web/react/ui/chakra-ui new file mode 100644 index 0000000..e735ded --- /dev/null +++ b/ai-team/frontend/web/react/ui/chakra-ui @@ -0,0 +1,7 @@ +Features and benefits of Chakra UI include: + +Accessibility: Chakra UI follows WAI-ARIA standards in its components, making your applications easily accessible. +Customization: You can easily customize any part of the components it provides to complement your design requirements. Whether it’s theming, templates, settings, or anything else, you can make the best use of this design tool. +Composable: it’s effortless to compose new elements with Chakra UI due to its easy-to-use interface and navigation. You can find each feature easily and play with them to create your design elements without hassles. +Dark and light UI: Chakra UI is optimized for different color modes that you can use based on your design needs. You can use dark or light mode wherever you feel suitable and build amazing UIs for your applications. +Developer experience: with all the options available along with the freedom of customization and composability, the developer’s productivity will increase significantly while creating a website or application. \ No newline at end of file diff --git a/ai-team/frontend/web/react/ui/evergreen b/ai-team/frontend/web/react/ui/evergreen new file mode 100644 index 0000000..b13345c --- /dev/null +++ b/ai-team/frontend/web/react/ui/evergreen @@ -0,0 +1,7 @@ +Features and benefits include: + +Components: Evergreen has 30+ polished components that allow you to work out of the box. It includes typography, colors, buttons, badges, pills, patterns, layouts, and more. These are created on top of React-based UI primitives to enable endless composability. + +Quick installation: installing Evergreen’s UI package is quick and easy. Thus, you can get started with this tool without any hassle and start building the apps. + +Theming: Evergreen offers two themes – default and classic. The default theme reflects the current brand of Segment, while the classic theme originates from Evergreen’s first version. Although Evergreen lacks a theme builder, you will get a comprehensive theming system to customize the components as per the design requirements. \ No newline at end of file diff --git a/ai-team/frontend/web/react/ui/fluent b/ai-team/frontend/web/react/ui/fluent new file mode 100644 index 0000000..19ffd0f --- /dev/null +++ b/ai-team/frontend/web/react/ui/fluent @@ -0,0 +1,11 @@ +Features and benefits include: + +Pre-built components: Fluent offers multiple pre-built components to help you develop your application’s different parts in the design language of Microsoft Office. It includes components like buttons, grids, checkboxes, notifications, menus, essential inputs, toolboxes, and more. You can also customize them easily to suit your use case. + +Controls: you can get better control of your designs with tools like Datepickers, people pickers, persona, etc. + +Accessibility: Fluent is created with easy accessibility in mind so that any user can access and use it without any hassle. + +Cross-platform: It works on all platforms, whether it’s the web, iOS, macOS, Android, or Windows. It’s also compatible with Microsoft products such as Office 365, OneNote, Azure DevOps, etc. + +Performance: Each component you use from Fluent to build your application parts will perform optimally. It will provide a professional yet user-friendly look and feel to your applications. In addition, it takes a straightforward approach by applying CSS to each of its elements. Therefore, even if you change an element, it won’t impact your style. \ No newline at end of file diff --git a/ai-team/frontend/web/react/ui/grommet b/ai-team/frontend/web/react/ui/grommet new file mode 100644 index 0000000..ff84bf7 --- /dev/null +++ b/ai-team/frontend/web/react/ui/grommet @@ -0,0 +1,7 @@ +Features and benefits include: + +UI components: Grommet offers robust and bold component designs and is lightweight to keep your app size in check. You will get multiple categories of components, such as layouts (footers, headers, cards, sidebars, grids, etc.), type (headings, text, paragraph, and markdown), color (branding, status, neutral colors, and accents), controls (buttons, navigation bars, menus, etc.), inputs (text, file uploads, checkboxes, etc.), media (video, carousels, and images), utilities to enhance user experience (responsive elements, keyboard shortcuts, infinite scroll, etc.), visualizations (calendars, avatars, charts, etc.) + +Theming: There are plenty of pre-packaged themes available on Grommet – Grommet theme designer and Grommet designer. The former is a demo admin panel that lets you develop customized Grommet themes by adjusting elements. The latter is a canvas to create and save your design experiences with the components. + +User-friendly interface: It is an easy to access UI library with tools like keyboard navigation and screen reader tags. It also supports Web Content Accessibility Guidelines (WCAG). It’s a great tool for beginners. \ No newline at end of file diff --git a/ai-team/frontend/web/react/ui/headless-ui b/ai-team/frontend/web/react/ui/headless-ui new file mode 100644 index 0000000..62b127c --- /dev/null +++ b/ai-team/frontend/web/react/ui/headless-ui @@ -0,0 +1,7 @@ +Features and benefits of Headless UI include: + +UI components: You get many UI components such as a menu, list box, switch, combo box, dialog, disclosure, dialog, radio group, popover, transition, tabs, auto-complete, toggle switch, and more. + +Customization: customizing each component is simple as you will get easy-to-understand examples and styling guidance for each component. This way, you can build your features suitable to your specific app needs. + +Accessibility and transitions: Headless UI offers complete accessibility and transition information so that users won’t find it a headache to access and use the tool in their applications. For this, you will get an extensive API as well. \ No newline at end of file diff --git a/ai-team/frontend/web/react/ui/mantine b/ai-team/frontend/web/react/ui/mantine new file mode 100644 index 0000000..c4729f4 --- /dev/null +++ b/ai-team/frontend/web/react/ui/mantine @@ -0,0 +1,15 @@ +Features and benefits of Mantine include: + +Components: Mantine has 100+ components, including over 20 input components, carousels, text editor, date pickers, overlays, and navigation. It supports Embla based carousels, Quill based text editor, and lets you adjust your content easily. You also can change colors, search items, use autocomplete, and many more. + +Dark color scheme: You can add a dark theme to the app you are building with a little coding. Mantine can export global styles for dark and light themes alike. + +Customization: Each component in Mantine can be customized visually with props. This helps you quickly build a prototype and keep experimenting by modifying the props. + +Style overriding: Mantine allows style overriding for each internal element with the help of inline styles or classes. When you can use this feature along with other customization flexibility, you can apply any visual changes you want and fit your design needs. + +Flexible theming: You don’t have to limit yourself to the default theme; you can extend it with additional colors, radius, spacing, fonts, etc., to complement your designs. + +Additional features: Other important features included in Mantine are auto-vendor prefixing, lazy evaluation, extracting critical CSS during server-side rendering, dynamic theming, and more. + +Integration: Mantine works with modern environments, including Gatsby.js, Next.js, Remix, create-react-app, or Vite. \ No newline at end of file diff --git a/ai-team/frontend/web/react/ui/react-admin b/ai-team/frontend/web/react/ui/react-admin new file mode 100644 index 0000000..7bd5525 --- /dev/null +++ b/ai-team/frontend/web/react/ui/react-admin @@ -0,0 +1,14 @@ +Features and benefits of React Admin include: + +Faster: This tool has the capability of accelerating your work speed. In as little as 13 lines of coding, you can get started with it. + +Modern design: You can create API based apps with this tool that comes with modern material designs. + +A vast library of components: React-admin can be used to create common features instead of creating each from the start. It has a vast library of components and hooks that can cover most of the use cases so that you can focus on your business logic. It has components, including forms and validation, search and filter, notifications, routing, fully-featured Datagrid, and more apart from common ones. + +Accessibility and responsiveness: React-admin is built to be accessible and responsive to anyone using different devices. This way, it aims to enhance the user experience of what device they use and where they are located globally. +Role and permissions: Make your application secure with suitable roles and permissions for the users. + +Theming: you will get different options for theming to make your user interface attractive yet useful. + +Integration: React-admin can work with any API. It is backend agnostic. You can also find adapters compatible with most GraphQL and REST dialects or write the code yourself in a few minutes. It can integrate seamlessly with OpenAPI, Django, Firebase, Prisma, and more. \ No newline at end of file diff --git a/ai-team/frontend/web/react/ui/react-motion b/ai-team/frontend/web/react/ui/react-motion new file mode 100644 index 0000000..723044b --- /dev/null +++ b/ai-team/frontend/web/react/ui/react-motion @@ -0,0 +1,5 @@ +Features and benefits include: + +Specifying stiffness values: The thing that makes this tool even more attractive is you can specify values for stiffness. You can also define damping parameters. This way, your components will look more realistic as you can control the stiffness. + +Styling: You can use React Motion to easily animate a simple card component’s scaling. For this, you will need to utilize styled components. \ No newline at end of file diff --git a/ai-team/frontend/web/react/ui/react-virtualized b/ai-team/frontend/web/react/ui/react-virtualized new file mode 100644 index 0000000..4406b83 --- /dev/null +++ b/ai-team/frontend/web/react/ui/react-virtualized @@ -0,0 +1,7 @@ +Features and benefits include: + +Efficient rendering: The tool can efficiently render large tabular and list data. Hence, it’s useful if you want to render multiple columns in one table or if you have a large list having hundreds and thousands of elements. + +Components: You will get many components, including an auto-sizer, a columnsizer, a cellmeasurer, a multigrid, an arrowkeeper, direction sorters, etc., apart from the common ones. This versatile library can meet your growing tabular needs. You can also customize your table by adjusting its row heights. + +Browser support: React Virtualized supports standard web browsers for Android and iOS. \ No newline at end of file diff --git a/ai-team/frontend/web/react/ui/retool b/ai-team/frontend/web/react/ui/retool new file mode 100644 index 0000000..f09b5dd --- /dev/null +++ b/ai-team/frontend/web/react/ui/retool @@ -0,0 +1,22 @@ +Features and benefits of Retool include: + +Robust building blocks: You will get 90+ useful and robust building blocks such as tables, charts, forms, lists, maps, wizards, and so on. Retool offers these components out of the box to help you spend more time assembling and optimizing your UI and not writing code for them separately. + +Saves effort and time: instead of finding the best React library for a component (say table), you can use Retool to get everything in a single place. It has options like drag and drop to enable you to arrange components and put together an application’s features and parts quickly. This way, you can save plenty of your time and move on to the next project faster while accomplishing the current one with better efficiency. + +Visualization: Adding features like maps, tables, etc. to your applications allows users to visualize important data easily. This helps them take suitable actions even in crucial hours. + +Integration: you can connect to any database through GraphQL, gRPC API, and REST. This way, you can get all your data in a single application and work seamlessly. It integrates with tools like MongoDB, MySQL, Google Sheets, Stripe, Snowflake, Slack, Salesforce, Twilio, Google Cloud Storage, GitHub, AWS Lambda, Sendgrid, Redis, and many more. + +Error handling: With Retool, you don’t need to worry about error handling from the backend. This tool can handle everything, from READing data from MongoDB and JOINing it to Postgres to POSTing its result directly to the Stripe API. + +Developer-friendly: Retool is a developer-friendly tool that allows your developers to do much more than what’s available. A developer can write code using JavaScript and develop the app in Retool. It accepts JavaScript everywhere and helps you easily execute your code. In addition, you can use Transformers to write reusable code and manipulate data. +Native API: You will get to use a native API in Retool to interact with queries and components via JS. + +Customizing, importing, debugging: it’s easy to customize any component you want to make it suitable for your use case. You can also import a JavaScript library through URLs for different uses. Retool comes installed with tools like Lodash, Numbro, and Moment. In addition, it’s easy to debug. You can view all the available components, environments, and queries along with query dependencies and start debugging. + +Secure deployment: Retool offers built-in security, permissions, and reliability to help you deploy your products with privacy and security. You can either host Retool in your Virtual Private Cloud (VPC), Virtual Private Network (VPN), or on-premises. You can also deploy via Kubernetes or Docker. + +Furthermore, you can view revision history with the help of Git and sign in securely using Two-Factor Authentication (2FA), Single Sign-On (SSO), or Security Assertion Markup Language (SAML). In addition, it offers audit logs and fine-grained access controls to allow only permitted individuals to access your applications. + +Retool offers extensive documentation and support. Its support is available on its Discourse forum, Slack (if you are a Retool power user), Intercom for live chat, and dedicated support for enterprise customers. \ No newline at end of file diff --git a/ai-team/frontend/web/react/ui/semantic-ui b/ai-team/frontend/web/react/ui/semantic-ui new file mode 100644 index 0000000..b884906 --- /dev/null +++ b/ai-team/frontend/web/react/ui/semantic-ui @@ -0,0 +1,13 @@ +Features and benefits of Semantic UI include: + +jQuery Free: Semantic UI React is free from jQuery as it lacks virtual DOM. +Pre-built components: this library offers many components, including buttons, header, containers, and icons. In addition, you will get shorthand props to help create markup automatically. + +Easy debugging: With Semantic React UI used on an app, developers find it easier to debug applications. You can easily track issues without keeping on digging through your stack traces. + +Theming: Semantic UI has high-level themes along with a smart inheritance system to provide you with complete design flexibility. It offers 3000+ theming variables. So, just develop the UI once and use it as many times as you want. + +UI components: You get 50+ UI components to develop your complete site using just a single UI stack. In addition, you can share the UI in different projects and reduce your efforts in creating each from scratch for every project. You get a wide variety of components from buttons to collections, views, elements, behaviors, and modules, covering a large area of interface design. + +Responsiveness: The tool is designed to make your interface responsive, giving you options to figure out the best design for your content and design elements on both mobile and tablet. +Integrations: The tool has integration with Angular, Ember, Meteor, etc., apart from React. This lets you organize your user interface layer alongside the application logic. \ No newline at end of file diff --git a/ai-team/frontend/web/react/ui/strategy b/ai-team/frontend/web/react/ui/strategy new file mode 100644 index 0000000..fef0e41 --- /dev/null +++ b/ai-team/frontend/web/react/ui/strategy @@ -0,0 +1,15 @@ +Explain the main design philosophy of each UI/UX library and the pros and cons +of using it. Determine whether it would be a good fit for the project and give it a score of 1-10 across the following dimensions. + +- simplicity +- scalability +- suitability +- popularity +- modern technology use +- overall + +Provide the command to install the latest stable package version of the library. + +Install package command: `insert command here` + +If you believe multiple UI/UX libraries should be used, list up to 3 such libraries and a single install command which installs them all. diff --git a/ai-team/marketing/name b/ai-team/marketing/name new file mode 100644 index 0000000..13250c4 --- /dev/null +++ b/ai-team/marketing/name @@ -0,0 +1,17 @@ +Please generate a good name for a: Web Agency working for Governments and Large Corporations +=== + +Sure! Here are a few name suggestions for a web agency working for governments and large corporations: + +GovWeb Solutions +CorporateTech Agency +EliteWeb Solutions +PublicSector Webworks +GovernmentEdge Web Agency +CorpDigital Solutions +NexusWeb Consultants +ExecutiveWeb Partners +CivicTech Innovators +EnterpriseWeb Studios + +Feel free to mix and match words or modify them to create a unique and fitting name for your web agency. Remember to consider the branding and image you want to convey, as well as the target audience of governments and large corporations. \ No newline at end of file diff --git a/ai-team/marketing/strategy b/ai-team/marketing/strategy new file mode 100644 index 0000000..e69de29 diff --git a/ai-team/product/proposal.md b/ai-team/product/proposal.md new file mode 100644 index 0000000..47fc51f --- /dev/null +++ b/ai-team/product/proposal.md @@ -0,0 +1,84 @@ +Write a detailed proposal for a property administration system +=== + +[Your Name] +[Your Position] +[Your Organization] +[Date] + +[Client's Name] +[Client's Position] +[Client's Organization] +[Address] + +Subject: Proposal for Property Administration System + +Dear [Client's Name], + +We are pleased to present this proposal for the development and implementation of a Property Administration System for [Client's Organization]. This system aims to streamline and automate the property management processes, enhancing efficiency, accuracy, and overall effectiveness in managing properties owned and operated by your organization. + +Overview: +The Property Administration System is a comprehensive software solution designed to address the specific needs of property management. It will provide a centralized platform to manage property listings, tenant information, maintenance requests, financial transactions, and reporting. The system will be tailored to meet your organization's requirements and integrate seamlessly with your existing infrastructure. + +Key Features: +The proposed system will include the following key features: + +2.1 Property Listings: + +Create and manage property listings with detailed information, including location, features, and media attachments. +Enable property search and filtering for potential tenants or buyers. +Track property availability and occupancy status. +2.2 Tenant Management: + +Maintain a database of tenant information, including contact details, lease agreements, and payment history. +Automate rent collection, generate invoices, and track payment records. +Handle tenant communication and notifications. +2.3 Maintenance Management: + +Streamline maintenance requests from tenants, enabling online submission and tracking. +Assign and manage maintenance tasks to maintenance staff or contractors. +Monitor progress, track costs, and maintain a maintenance history log. +2.4 Financial Management: + +Manage property-related financial transactions, including rent payments, security deposits, and expenses. +Generate financial reports, such as rent rolls, income statements, and balance sheets. +Integrate with accounting systems for seamless financial data synchronization. +2.5 Reporting and Analytics: + +Generate customized reports on property performance, occupancy rates, financial summaries, and maintenance activities. +Provide data analytics and insights to support strategic decision-making. +Technology Stack: +The Property Administration System will be developed using modern and reliable technologies. Our recommended technology stack includes: +Front-end: React.js for a responsive and interactive user interface. +Back-end: Node.js for scalable and efficient server-side development. +Database: PostgreSQL for robust data storage and management. +API Integration: RESTful APIs for seamless integration with third-party services. +Security: Implement industry-standard security measures to protect sensitive data. +Project Timeline: +Based on our initial assessment, we estimate a project timeline of [duration] to deliver the Property Administration System. The timeline includes the following stages: +Requirements Gathering and Analysis +System Design and Architecture +Development and Testing +Deployment and User Acceptance Testing +Training and Documentation +System Launch and Post-launch Support +We will work closely with your team throughout the development process, ensuring regular communication and feedback to deliver the system on schedule. + +Budget: +The total cost for developing and implementing the Property Administration System is estimated at [cost]. This cost includes all stages of the project, including development, testing, deployment, training, and support. Any additional requirements or customizations beyond the proposed scope may incur additional charges, which will be discussed and agreed upon separately. + +Support and Maintenance: +Upon successful deployment, we offer ongoing support and maintenance services to ensure the system's smooth operation. Our team will be available to address any technical issues, provide updates and enhancements, and ensure the system remains up-to-date with evolving technology trends. + +Next Steps: +If this proposal meets your requirements and aligns with your organization's vision, we would be delighted to further discuss the project details, answer any questions, and initiate the next steps towards the development of the Property Administration System. We are confident that our expertise and experience in property management systems make us an ideal partner for this project. + +Please feel free to reach out to us at [contact details] to arrange a meeting or further discuss any specific requirements. + +Thank you for considering our proposal. We look forward to the opportunity of working with you and helping [Client's Organization] streamline its property management processes. + +Yours sincerely, + +[Your Name] +[Your Position] +[Your Organization] \ No newline at end of file diff --git a/ai-team/strategy b/ai-team/strategy new file mode 100644 index 0000000..39b7dd0 --- /dev/null +++ b/ai-team/strategy @@ -0,0 +1,57 @@ +The AI dev team will consist of: + +- Architecture team +- Backend dev team +- Frontend dev team +- Devops team +- Project Management team + +To initiate the project, the end user will supply a folder with a requirements specification in a specific format that the AI can parse and understand clearly + +The AI team should then partition the requirements spec into relevant tasks and responsibilities for each team. + +Each team should start to clarify anything that is unclear by asking the user for further information. + +The team should then proceed to break down the overall requirements into smaller tasks that are further refined. + +When the overall requirement are clear, the team should start by determining the general project infrastructure: + +Create basic project structure: +Determine the overall type of project such as: +- CLI +- Simple client app +- Fullstack Client/Server app +- Run locally or needs Cloud infrastructure +- External services needed +- Payment gateways +- Security and Authentication +- Keys and tokens needed for the services + +Based on these findings the Architect team should: + +- Generate initial project structure +- Use app generators to generate the initial skeleton app for each part of the application needed + +Examples of app generators: +- azd Azure Developer CLI - generates an app based on Azure app template +- create-react-app +- nextjs generator +- ... + +When the initial skeleton project has been set up, the requirements should then be delegated to each team to work on + +Each dev team will have: +- Implementer (think Junior developer) who does the base level coding +- Overseer (think Tech lead or senior developer) who oversees and suggests improvements +- Tester who writes and maintains tests +- Documentation writer who writes and maintains documentation both in code and external docs, including diagrams + +Architecture team will oversee overall technical direction + +Project team will oversee that what is developed matches requirements + +Additional Frontend team roles: +- Story writer who maintains storybook tests +- E2E tester who writes tests simulating end user + + diff --git a/ai-team/ui-ux/accessibility.md b/ai-team/ui-ux/accessibility.md new file mode 100644 index 0000000..5cdfde9 --- /dev/null +++ b/ai-team/ui-ux/accessibility.md @@ -0,0 +1,124 @@ +Please provide some Accessibility and Usability Guidelines for the use case. +Suggest a few libraries that can be used effectively to ensure accessibility. +Provide a few reusable components that incorporates good accessibility practices and can be used across the app. +=== + +Accessibility and Usability Guidelines: + +Provide proper semantic structure: Use HTML5 elements appropriately to give meaning to the content and structure of the page. Use headings, lists, and semantic elements like