# Laconic Frontend

## Prerequisites

Ensure you have the following installed:
- [Node.js](https://nodejs.org/) (v18+)
- [pnpm](https://pnpm.io/) (v8+)
- [Git](https://git-scm.com/)

## Project Structure

This monorepo contains several packages:

- `apps/deploy-fe`: Frontend Next.js application
- `apps/backend`: Express.js backend API
- `apps/deployer`: Deployment service
- `services/gql-client`: GraphQL client library
- `services/ui`: Shared UI components
- `services/typescript-config`: Shared TypeScript configurations

## Getting Started

### 1. Clone the repository

```bash
git clone https://github.com/yourusername/qwrk-laconic-core-develop.git
cd qwrk-laconic-core-develop
```

### 2. Install dependencies

```bash
pnpm install
```

### 3. Configure environment variables

Create a `.env.local` file in the `apps/deploy-fe` directory:

```
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_key
CLERK_SECRET_KEY=your_clerk_secret
NEXT_PUBLIC_WALLET_IFRAME_URL=http://localhost:4000
NEXT_PUBLIC_LACONICD_CHAIN_ID=laconic-testnet-2
NEXT_PUBLIC_API_URL=http://localhost:8000
NEXT_PUBLIC_GITHUB_FALLBACK_TOKEN=your_github_token
```

Create a `local.toml` file in `apps/backend/environments/` (based on the example file).

### 4. Start the development servers

#### Frontend:
```bash
cd apps/deploy-fe
pnpm dev
```

### 5. Connect Your Wallet

The application requires a Laconic wallet for certain operations. You need to set up:

1. A running wallet instance (follow the setup in the laconic-wallet-web repository)
2. Configure the `NEXT_PUBLIC_WALLET_IFRAME_URL` to point to your wallet instance

## Architecture

### Frontend (Next.js App Router)

The frontend is built with:
- Next.js 15 with App Router
- React 19
- Clerk for authentication
- TailwindCSS for styling
- Radix UI components

### Authentication Flow (NEEDS DEVELOPMENT!!!)

1. User authenticates with Clerk (GitHub OAuth)
2. User connects wallet (Sign-In With Ethereum)
3. Backend validates and establishes a session

## Available Scripts

- `pnpm dev`: Start development servers
- `pnpm build`: Build all packages
- `pnpm lint`: Run linting
- `pnpm check-types`: Check TypeScript types

### GitHub Authentication

Make sure you have:
1. Connected your GitHub account in Clerk
2. Provided the necessary permissions for repository access
3. Set a fallback GitHub token in `.env.local` if needed for development

## Test deployment

- Follow the dev install steps for stack-orchestrator from <https://git.vdb.to/cerc-io/stack-orchestrator/src/branch/main/docs/CONTRIBUTING.md#install>

<!-- TODO: Remove after SO PR https://git.vdb.to/cerc-io/stack-orchestrator/pulls/969 is merged -->
- Change branch
  ```bash
  git checkout ng-support-custom-nextjs
  ```

- Build the container for app
  ```bash
  laconic-so build-webapp --source-repo <path-to-app-repo>/laconic-deployer-frontend --base-container cerc/nextjs-base
  ```

- Create an env file as described in [previous steps](#3-configure-environment-variables)

- Run the webapp container locally
  ```bash
  docker run -p 3000:3000 --env-file <path-to-env-file> cerc/laconic-deployer-frontend:local
  ```

- Scripts used for deployment
  - App container build : [build-webapp.sh](./build-webapp.sh)
  - Run app container : [run-webapp.sh](./run-webapp.sh)