Next.js 14 frontend for CICosts - Track and optimize your CI/CD costs.
| Environment | URL |
|---|---|
| Production | https://app.cicosts.dev |
| Development | https://dev.cicosts.dev |
- Framework: Next.js 14 (App Router)
- Styling: Tailwind CSS + shadcn/ui
- Charts: Recharts
- Animations: Motion (Framer Motion)
- Unit Testing: Vitest + Testing Library
- E2E Testing: Playwright
- Error Tracking: Sentry
- Deployment: Vercel
# Install dependencies
npm install
# Run development server
npm run dev
# Open http://localhost:3000src/
├── app/
│ ├── page.tsx # Landing page (marketing)
│ ├── blog/ # MDX blog
│ ├── features/ # Feature pages
│ ├── pricing/ # Pricing with Stripe
│ ├── resources/ # Changelog, case studies
│ ├── privacy/ # Privacy policy
│ ├── terms/ # Terms of service
│ ├── login/ # GitHub OAuth login
│ ├── setup/ # GitHub App callback
│ └── dashboard/ # Authenticated dashboard
│ ├── layout.tsx # Sidebar, org switcher
│ ├── page.tsx # Overview with charts
│ ├── workflows/ # Workflows list
│ ├── alerts/ # Alerts management
│ └── settings/ # User settings
├── components/
│ ├── ui/ # shadcn/ui components
│ ├── marketing/ # Header, footer
│ └── dashboard/ # Dashboard components
├── content/
│ └── blog/ # MDX blog posts
├── lib/
│ ├── api.ts # API client
│ ├── auth.tsx # Auth context
│ ├── blog.ts # Blog utilities
│ └── dashboard-context.tsx # Dashboard state
└── test/
└── setup.ts # Test configuration
npm run dev # Development server
npm run build # Production build
npm run start # Production server
npm run lint # ESLint
# Unit tests (Vitest)
npm test # Watch mode
npm run test:run # Single run
npm run test:coverage # With coverage
# E2E tests (Playwright)
npm run test:e2e # Run E2E tests
npm run test:e2e:ui # Interactive UI mode
npm run test:e2e:headed # Run in browser
npm run test:e2e:debug # Debug modeThe project uses Vitest with Testing Library for component testing.
npm run test:run # Run all tests
npm test # Watch mode
npm run test:coverage # With coverage| File | Tests | Description |
|---|---|---|
components/ui/button.test.tsx |
8 | Button variants, sizes, events |
lib/api.test.ts |
12 | API client, error handling |
Total: 20 tests passing
End-to-end tests run against the dev environment.
npm run test:e2e # Run all E2E tests
npm run test:e2e:headed # Run in visible browser
npm run test:e2e:ui # Interactive UI mode| File | Tests | Description |
|---|---|---|
e2e/marketing.spec.ts |
16 | Landing, pricing, blog, features, legal |
e2e/dashboard.spec.ts |
7 | Auth flows, navigation, API health |
Total: 23 tests passing
Create a .env.local file:
NEXT_PUBLIC_API_URL=https://api.cicosts.dev
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_.../- Landing page with hero, features, pricing/blog- Blog listing (MDX)/blog/[slug]- Individual blog posts/features/*- Feature detail pages/pricing- Interactive pricing/privacy,/terms- Legal pages
/dashboard- Cost overview with charts/dashboard/workflows- Workflow list and details/dashboard/alerts- Alert management/dashboard/settings- User preferences
Unified pipeline via .github/workflows/ci-cd.yml:
Push to main → Lint → Test → Build → Deploy Dev → E2E Tests → Deploy Prod
↓
(requires approval)
PR → Lint → Test → Build → Deploy Preview
| Stage | Description |
|---|---|
| Lint | ESLint + TypeScript type check |
| Test | Vitest unit tests |
| Build | Next.js production build |
| Deploy Dev | Vercel preview → alias to dev.cicosts.dev |
| E2E Tests | Playwright (23 tests) on dev environment |
| Deploy Prod | Vercel production (requires environment approval) |
--ink-black: #040f0f;
--forest-green: #248232;
--medium-jungle: #2ba84a;
--jet-black: #2d3a3a;
--porcelain: #fcfffc;