Codelab.ai is a web application builder consisting of a data modeling tool and a view binding layer. It was the only available domain extension left & has nothing to do with Artificial Intelligence, but is a likely addition in the future.
- Create models with fields & configure their relationships using a D3.js graph interface.
- Build the UI by editing the DOM Tree & configuring the components
- NX
- NX is a CLI toolkit for Monorepo development, similar to Angular CLI but framework agnostic
- It scaffolds packages & provide us with a unified API for interacting with our libraries
- React
- A JavasScript library for building user interfaces, although we only use
.tsx
- A JavasScript library for building user interfaces, although we only use
- Next.js
- A React Framework for server-side rendering (SSR) & other performance optimizations
- Mongoose
- Nest.js
- A Node.js framework suitable for micro-services architecture, which heavily uses OOP principles such as dependency injection (DI)
- Storybook
- A tool for developing UI components in isolation
- Ant Design
- A UI/Component library for React
- Install NX Console, you will use the interface to run the application
- Install Move TS
- VSCode doesn't auto update imports when renaming files, use this to help with moving files
- (Optional) Install WebStorm
- VSCode doesn't allow us to move an export (function, variable, class etc.) from one file to another, which is a huge limitation in refactoring, as this is a common procedure
- WebStorm does have this functionality, but is a paid product. They have a 30-day free trial you can try out the feature. If you find the program useful we can consider purchasing a license for you.
- Install ESLint, for realtime visual linting
The project directory structure is based on NX, with apps directory containing all the user facing sites, while libs containing all imported libraries.
- Clone a forked version of the repository
cp .env.example .env.devyarn
The NX Console tab has all the commands you'll need to interact with the app under the Generate & Run Target section. For the most part, you'll be developing with Jest & Storybook.
- Select
Run, which will display all commands in the format of[package]:[command]. Usetestfor Jest, &storybookfor Storybook.
Clone off master and create a local branch using a name that is relevant to the task in hyphenated-lowercase-or-kebab-case. Always rebase master branch before you push, so merge won't have any issues.
To commit code, run yarn commit. (This will trigger the git pre-commit hook via Husky, which then uses Lint Staged to run ESLint on staged files. ESLint will use Prettier to format files.)
After using yarn commit a couple times and understanding the commit mesage format, you can manually create the message if you wish.
Follow the CLI prompt to complete the commit. (Commitizen is used to trigger the terminal prompt for constructing the proper commit message format.)
Once pushed to the remote repository, create a Pull Request on Github to master. Make sure all the tests run successfully, the PR will then be reviewed by the administrator.
Contain main user-facing applications like web frontend, api backend, & e2e tests.
Contain libraries that is used by apps
- api: contain Nest.js modules
- entity: contain domain specific business logic
- shared: contain interface & other shared code, contain no external dep
- tools: contain ci/cd & workspace related code