Initialize Next.js web application with Tailwind CSS

- Set up Next.js 16 with TypeScript and App Router
- Configure Tailwind CSS for styling
- Add ESLint and Prettier for code quality
- Set up Jest and React Testing Library
- Create basic project structure (app/, components/, lib/)
- Add initial home page with WellNuo branding
- Configure TypeScript with strict mode
- All tests passing and linting clean

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Sergei 2026-01-31 17:05:04 -08:00
parent 5a6c80533e
commit 72661f6f06
16 changed files with 11018 additions and 0 deletions

9
web/.eslintignore Normal file
View File

@ -0,0 +1,9 @@
.next
node_modules
out
dist
build
coverage
*.config.js
*.config.ts
next-env.d.ts

3
web/.eslintrc.json Normal file
View File

@ -0,0 +1,3 @@
{
"extends": "next/core-web-vitals"
}

35
web/.gitignore vendored Normal file
View File

@ -0,0 +1,35 @@
# Dependencies
/node_modules
/.pnp
.pnp.js
.yarn/install-state.gz
# Testing
/coverage
# Next.js
/.next/
/out/
# Production
/build
# Misc
.DS_Store
*.pem
# Debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Local env files
.env*.local
.env
# Vercel
.vercel
# TypeScript
*.tsbuildinfo
next-env.d.ts

8
web/.prettierrc Normal file
View File

@ -0,0 +1,8 @@
{
"semi": true,
"trailingComma": "es5",
"singleQuote": true,
"printWidth": 80,
"tabWidth": 2,
"useTabs": false
}

View File

@ -0,0 +1,16 @@
import { render, screen } from '@testing-library/react';
import Home from '@/app/page';
describe('Home Page', () => {
it('renders the main heading', () => {
render(<Home />);
const heading = screen.getByRole('heading', { name: /WellNuo Web/i });
expect(heading).toBeInTheDocument();
});
it('renders the description text', () => {
render(<Home />);
const description = screen.getByText(/Health monitoring for loved ones/i);
expect(description).toBeInTheDocument();
});
});

27
web/app/globals.css Normal file
View File

@ -0,0 +1,27 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
--background: #ffffff;
--foreground: #171717;
}
@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
}
body {
color: var(--foreground);
background: var(--background);
font-family: Arial, Helvetica, sans-serif;
}
@layer utilities {
.text-balance {
text-wrap: balance;
}
}

22
web/app/layout.tsx Normal file
View File

@ -0,0 +1,22 @@
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import './globals.css';
const inter = Inter({ subsets: ['latin'] });
export const metadata: Metadata = {
title: 'WellNuo',
description: 'WellNuo - Health monitoring for loved ones',
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
);
}

12
web/app/page.tsx Normal file
View File

@ -0,0 +1,12 @@
export default function Home() {
return (
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
<main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
<h1 className="text-4xl font-bold">WellNuo Web</h1>
<p className="text-lg text-center sm:text-left">
Health monitoring for loved ones
</p>
</main>
</div>
);
}

15
web/jest.config.js Normal file
View File

@ -0,0 +1,15 @@
const nextJest = require('next/jest');
const createJestConfig = nextJest({
dir: './',
});
const customJestConfig = {
setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
testEnvironment: 'jest-environment-jsdom',
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/$1',
},
};
module.exports = createJestConfig(customJestConfig);

1
web/jest.setup.js Normal file
View File

@ -0,0 +1 @@
import '@testing-library/jest-dom';

12
web/next.config.ts Normal file
View File

@ -0,0 +1,12 @@
import type { NextConfig } from 'next';
const nextConfig: NextConfig = {
reactStrictMode: true,
poweredByHeader: false,
compress: true,
experimental: {
optimizeCss: true,
},
};
export default nextConfig;

10750
web/package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

38
web/package.json Normal file
View File

@ -0,0 +1,38 @@
{
"name": "wellnuo-web",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"format": "prettier --write .",
"type-check": "tsc --noEmit",
"test": "jest",
"test:watch": "jest --watch"
},
"dependencies": {
"next": "^16.1.6",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"zustand": "^5.0.2"
},
"devDependencies": {
"@testing-library/jest-dom": "^6.9.1",
"@testing-library/react": "^16.3.2",
"@types/jest": "^30.0.0",
"@types/node": "^22",
"@types/react": "^19",
"@types/react-dom": "^19",
"autoprefixer": "^10.4.20",
"eslint": "^9",
"eslint-config-next": "15.1.6",
"jest": "^30.2.0",
"jest-environment-jsdom": "^30.2.0",
"postcss": "^8.4.49",
"prettier": "^3.4.2",
"tailwindcss": "^3.4.17",
"typescript": "^5"
}
}

9
web/postcss.config.mjs Normal file
View File

@ -0,0 +1,9 @@
/** @type {import('postcss-load-config').Config} */
const config = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
export default config;

20
web/tailwind.config.ts Normal file
View File

@ -0,0 +1,20 @@
import type { Config } from 'tailwindcss';
const config: Config = {
content: [
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {
colors: {
background: 'var(--background)',
foreground: 'var(--foreground)',
},
},
},
plugins: [],
};
export default config;

41
web/tsconfig.json Normal file
View File

@ -0,0 +1,41 @@
{
"compilerOptions": {
"target": "ES2020",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "react-jsx",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": [
"./*"
]
}
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
".next/types/**/*.ts",
".next/dev/types/**/*.ts"
],
"exclude": [
"node_modules"
]
}