Initialize Frontend Monorepo

[DokaIzk]

Title: init: scaffold Next.js frontend project with TypeScript, Tailwind, and testing setup

Labels: frontend infrastructure setup
Complexity: high
Priority: 🚨 BLOCKER
Branch: init/frontend-scaffold

---

Problem Context

The SoroScan project currently has no frontend codebase. To begin building UI components, dashboards, and applications, we need a properly configured development environment with modern tooling (Next.js 14+ with App Router), TypeScript strict mode, Tailwind CSS, and testing infrastructure.

---

Scope

Included:

• Next.js 14+ project in /soroscan-frontend/ with App Router
• TypeScript strict configuration
• Tailwind CSS (basic config, extended in Design System issue)
• Jest + React Testing Library
• ESLint + Prettier
• Husky pre-commit hooks
• Docker support for dev environment
• Root monorepo package.json with workspaces
• GitHub Actions workflow for lint/test

Not included:

• Design System components (FE-2)
• Any pages or features
• Storybook (FE-2)

---

Implementation Guidelines

Directory structure:

soroscan-frontend/
├── package.json
├── next.config.js
├── tsconfig.json
├── tailwind.config.js
├── jest.config.js
├── .eslintrc.json
├── .prettierrc
├── postcss.config.js
├── src/
│   ├── app/
│   │   ├── layout.tsx
│   │   └── page.tsx
│   ├── components/
│   ├── styles/
│   │   └── globals.css
│   └── __tests__/
├── public/
└── Dockerfile.frontend

Key dependencies:

{
  "dependencies": {
    "next": "^14.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@testing-library/react": "^14.0.0",
    "@types/jest": "^29.5.0",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "jest": "^29.5.0",
    "tailwindcss": "^3.3.0",
    "typescript": "^5.0.0"
  }
}

NPM scripts:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint src --max-warnings 0",
    "format": "prettier --write src",
    "test": "jest --watch",
    "test:ci": "jest --ci --coverage"
  }
}

Constraints:

• TypeScript strict: true — no any types allowed
• ESLint with Next.js recommended rules
• Jest coverage threshold ≥ 70%
• All code must pass npm run lint before commit

---

Acceptance Criteria

• npm install in soroscan-frontend/ succeeds
• npm run dev starts Next.js dev server on http://localhost:3000
• npm run lint passes with zero warnings
• npm run test:ci runs and passes (example test included)
• Docker build succeeds: docker build -f soroscan-frontend/Dockerfile.frontend -t soroscan-frontend .
• docker-compose up runs frontend alongside backend
• Frontend can make requests to backend: http://localhost:8000/
• GitHub Actions workflow (frontend-ci.yml) runs lint + test on PR

---

---

[jerryjuche]

@jerryjuche has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

I'm interested in helping establish the project's frontend foundation. I have experience setting up Next.js and TypeScript monorepos, configuring Tailwind CSS, testing with Jest and React Testing Library, Docker, GitHub Actions, and developer tooling to create scalable, production-ready frontend environments.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @jerryjuche to this issue.

[amehsamuel200225-sketch]

@amehsamuel200225-sketch has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Hi…. I’m a software engineer, let me fix this issue please!

ℹ️ Repo Maintainers: To accept this application, review their application or assign @amehsamuel200225-sketch to this issue.

[drips-wave]

Congratulations, @amehsamuel200225-sketch! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on June 30, 2026.

🧑‍💻 @amehsamuel200225-sketch: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊