Abstraction

I made this website within oneday from scrach. I will explain how did I plan to make this web site by waterfall.

Technical stacks

• NextJS
• Claude Code

Mandatry things when it comes to using GenAI

At first by creating a new project, Using GenAI functionalities are necesary to publish applications faster and safer. But you need to know the following knowledges in terms of using vibe coding. Here's the necessarry skill you have to know.

Using GenAI effectively: Define coding rules, how to prompt to them properly and so on you need to learn how GenAI works better.

Undestanding codes GenAI wrote: However GenAI creates great code and the code works well you have to understand the code. You are like a boss of GenAI but GenAI is like a boss of you. When GenAI writes codes you need to check it and understand how it works and you can fix what you want or it is easy for you to add new features when you let GenAI write new features.

My concreate flow of development

0. Choose base design that is created by someone(already). I am not a desiner so I chose a good designed website. I chose this website https://academicpages.github.io/
1. Ask GenAI to develop boiler plate. The important thing is what GenAI can do and what I have to do. For example, Creating UI features, screen transition, localization GenAI can do them. But I have to write my job histories or education histories and so on, you have to create your self. Before writing codes you have to distinct them.
2. You need to think about the project structure. Of course you should set how GenAI build it and you need to understand before GenAI develops the project. I set this configuration to Claude.md

## 🛠️ Development Environment

- **Language**: TypeScript (`^5.0.0`)
- **Framework**: Next.js (App Router)
- **Styling**: Tailwind CSS
- **Component Library**: shadcn/ui
- **Data Fetching**: React Query (TanStack)
- **Testing**: Jest + React Testing Library
- **Linting**: ESLint with `@typescript-eslint`
- **Formatting**: Prettier
- **Package Manager**: `pnpm` (preferred)

## 📂 Recommended Project Structure

warp-runnable-command
.
├── app/                     # App Router structure
│   ├── layout.tsx
│   ├── page.tsx
│   ├── api/
├── components/              # UI components (shadcn or custom)
├── hooks/                   # Custom React hooks
├── stores/                  # Global state management with Zustand
├── lib/                     # Client helpers, API wrappers, etc.
├── styles/                  # Tailwind customizations
├── tests/                   # Unit and integration tests
├── public/
├── .eslintrc.js
├── tailwind.config.ts
├── tsconfig.json
├── postcss.config.js
├── next.config.js
├── package.json
└── README.md

## 📦 Installation Notes

- Tailwind setup with `postcss`
- shadcn/ui installed with `npx shadcn-ui@latest init`
- React Query initialized with `<QueryClientProvider>`

## ⚙️ Dev Commands

- **Dev server**: `npm dev`
- **Build**: `npm build`
- **Start**: `npm start`
- **Lint**: `npm lint`
- **Format**: `npm format`
- **Test**: `npm test`

## 🧠 Claude Code Usage

- Use `claude /init` to create this file
- Run `claude` in the root of the repo
- Prompt with: `think hard`, `ultrathink` for deep plans
- Compact with `claude /compact`
- Use `claude /permissions` to whitelist safe tools

## 📌 Prompt Examples

warp-runnable-command
Claude, refactor `useUser.ts` to use React Query.
Claude, scaffold a new `Button.tsx` using shadcn/ui and Tailwind.
Claude, generate the Tailwind styles for this mockup screenshot.
Claude, build an API route handler for POST /api/user.
Claude, create a test for `ProfileCard.tsx` using RTL.

## 🧪 Testing Practices

- **Testing Library**: `@testing-library/react`
- **Mocking**: `msw`, `vi.mock()`
- **Test command**: `pnpm test`
- Organize tests in `/tests` or co-located with components

## 🧱 Component Guidelines

- Use `shadcn/ui` components by default for form elements, cards, dialogs, etc.
- Style components with Tailwind utility classes
- Co-locate CSS modules or component-specific styling in the same directory

## ⚛️ React Query Patterns

- Set up `QueryClient` in `app/layout.tsx`
- Use `useQuery`, `useMutation`, `useInfiniteQuery` from `@tanstack/react-query`
- Place API logic in `/lib/api/` and call via hooks
- Use query keys prefixed by domain: `['user', id]`

## 📝 Code Style Standards

- Prefer arrow functions
- Annotate return types
- Always destructure props
- Avoid `any` type, use `unknown` or strict generics
- Group imports: react → next → libraries → local

## 🔍 Documentation & Onboarding

- Each component and hook should include a short comment on usage
- Document top-level files (like `app/layout.tsx`) and configs
- Keep `README.md` up to date with getting started, design tokens, and component usage notes

## 🔐 Security

- Validate all server-side inputs (API routes)
- Use HTTPS-only cookies and CSRF tokens when applicable
- Protect sensitive routes with middleware or session logic

## 🧩 Custom Slash Commands

Stored in `.claude/commands/`:

- `/generate-hook`: Scaffold a React hook with proper types and test
- `/wrap-client-component`: Convert server to client-side with hydration-safe boundary
- `/update-tailwind-theme`: Modify Tailwind config and regenerate tokens
- `/mock-react-query`: Set up MSW mocking for all useQuery keys

※ I picked the base text from here

3. I tried to publish it to Github. But I have come across error that seemed that the project did not load static files. The reason why the problem happened was that the project loaded wrong directory. The correct configuration is ↓

/\*_ @type {import('next').NextConfig} _/
const nextConfig = {
images: {
domains: ["localhost"],
unoptimized: true,
},
output: "export",
distDir: "dist",
trailingSlash: true,
basePath: process.env.NODE_ENV === 'production' ? '/website' : '',
assetPrefix: process.env.NODE_ENV === 'production' ? '/website/' : '',
};

module.exports = nextConfig;

This correction is also what I asked GenAI to fix. And you need to check the fact.

4. I also integrated CI/CD with Github actions by default configuration where you can find in Github project. You can refer my workflow file in .github/workflows/nextjs.yml

Conclusion

Finally I published my web page. But I still have many tasks to do. For example my blog posts are stored in static directories. I can post them from database. I can add comment features in Blog page. But at first publishing is the most important and improve the project day by day like grow up children. MVP dvelopment is crutial especially for solo developers. Keep improving !