Welcome to our website repository! This repo is designed to build high-quality websites efficiently. We've carefully chosen the technologies to make development smooth and enjoyable.

Frontend: Our frontend is powered by React NextJS, a popular and versatile framework for building web applications.

Backend: For the backend, we use Python along with the FastAPI framework. To ensure seamless communication between the frontend and backend, we generate an openapi.json file from the Python code, which defines the REST API. This file is then used with Orval to generate TypeScript bindings for the REST API. We're committed to code correctness, so we use mypy to ensure that our Python code is statically typed correctly. For backend testing, we rely on pytest.

Continuous Integration (CI): We've set up a CI bot that rigorously checks your code using the quality assurance (QA) tools mentioned above. If any errors are detected, it will block pull requests until they're resolved.

Dependency Management: We use the Nix package manager to manage dependencies and ensure reproducibility, making your development process more robust.

Supported Operating Systems

Linux
macOS

Getting Started with the Development Environment

Let's get your development environment up and running:

Install Nix Package Manager:

You can install the Nix package manager by running this command:

curl --proto '=https' --tlsv1.2 -sSf -L https://install.determinate.systems/nix | sh -s -- install

On Windows Subsystem for Linux (WSL) the installer will fail and tell you what to do. Execute the command from the error message and then afterwards execute:

sudo echo "experimental-features = nix-command flakes" > '/etc/nix/nix.conf'

Install direnv:
- Install the direnv package by running the following command:
```
curl -sfL https://direnv.net/install.sh | bash
```

Add direnv to your shell:

Direnv needs to hook into your shell to work. You can do this by executing following command:

echo 'eval "$(direnv hook zsh)"' >> ~/.zshrc && echo 'eval "$(direnv hook bash)"' >> ~/.bashrc && eval "$SHELL"

Clone the Repository and Navigate:
- Clone this repository and navigate to it.
- If you are under Windows Subystem For Linux (WSL) please clone the repository to the home folder of your Linux. Do NOT clone it onto your Windows machine!
Allow .envrc:
- When you enter the directory, you'll receive an error message like this:
```
direnv: error .envrc is blocked. Run `direnv allow` to approve its content
```
- Execute direnv allow to automatically execute the shell script .envrc when entering the directory.
Build the Backend:
- Go to the pkgs/clan-cli directory and execute:
```
direnv allow
```
- Wait for the backend to build.
Start the Backend Server:
- To start the backend server, execute:
```
clan webui --reload --no-open --log-level debug --populate --emulate
```
- The server will automatically restart if any Python files change. Emulated services however will not.
- The --populate flag will automatically populate the database with dummy data
  - To look into the endpoints open up a swagger instance by visiting: http://localhost:2979/docs
- The --emulate flag will automatically run servers the database with dummy data for the fronted to communicate with (ap, dlg, c1 and c2)
  - To look into the emulated endpoints go to http://localhost:2979/emulate
Detailed Backend Documentation
- For detailed backend documentation go to pkgs/clan-cli/README.md
- We explain:
  - How to build and run a docker image
  - Internal workings of the App
Build the Frontend:
- In a different shell, navigate to the pkgs/ui directory and execute:
```
direnv allow
```
- Wait for the frontend to build.
Start the Frontend:

To start the frontend, execute:
```
npm run dev
```
Access the website by going to http://localhost:3000.

Detailed Frontend Documentation

For detailed frontend documentation go to pkgs/ui/README.md

Setting Up Your Git Workflow

Git Workflow:
1. Add your changes to Git using git add <file1> <file2>.
2. Run nix fmt to lint your files. This will format your files and make changes!
3. Commit your changes and those of nix fmt with a descriptive message: git commit -a -m "My descriptive commit message".
4. Make sure your branch has the latest changes from upstream by executing:
```
git fetch && git rebase origin/main --autostash
```
5. Use git status to check for merge conflicts.
6. If conflicts exist, resolve them. Here's a tutorial for resolving conflicts in VSCode.
7. After resolving conflicts, execute git merge --continue and repeat step 5 until there are no conflicts.

Languages

Nix 63.3%

Python 27.5%

TypeScript 6.3%

HTML 1.9%

JavaScript 0.5%

Other 0.4%