Work done to implement the "product" focused front end design
.cursor/rules | ||
.github | ||
.vscode | ||
apps | ||
docs/architecture/wallet_migration | ||
scripts | ||
services | ||
standards | ||
.gitignore | ||
.npmrc | ||
biome.json | ||
lefthook.yaml | ||
LICENSE | ||
next-agent-01.md | ||
package.json | ||
pnpm-lock.yaml | ||
pnpm-workspace.yaml | ||
readme.md | ||
tsconfig.base.json | ||
tsconfig.json | ||
turbo.json |
Laconic Frontend
Prerequisites
Ensure you have the following installed:
Project Structure
This monorepo contains several packages:
apps/deploy-fe
: Frontend Next.js applicationapps/backend
: Express.js backend APIapps/deployer
: Deployment serviceservices/gql-client
: GraphQL client libraryservices/ui
: Shared UI componentsservices/typescript-config
: Shared TypeScript configurations
Getting Started
1. Clone the repository
git clone https://github.com/yourusername/qwrk-laconic-core-develop.git
cd qwrk-laconic-core-develop
2. Install dependencies
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:
cd apps/deploy-fe
pnpm dev
5. Connect Your Wallet
The application requires a Laconic wallet for certain operations. You need to set up:
- A running wallet instance (follow the setup in the laconic-wallet-web repository)
- 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!!!)
- User authenticates with Clerk (GitHub OAuth)
- User connects wallet (Sign-In With Ethereum)
- Backend validates and establishes a session
Available Scripts
pnpm dev
: Start development serverspnpm build
: Build all packagespnpm lint
: Run lintingpnpm check-types
: Check TypeScript types
GitHub Authentication
Make sure you have:
- Connected your GitHub account in Clerk
- Provided the necessary permissions for repository access
- Set a fallback GitHub token in
.env.local
if needed for development