Project Overview

This project, named nextjs-practice1, serves as a learning platform for AI-driven development and prompt engineering. It implements basic CRUD (Create, Read, Update, Delete) features for entities like users, posts, comments, and likes, utilizing mockapi.io for API interactions.

Key Technologies

• Frontend: Next.js 15, React 19, TypeScript
• Styling: TailwindCSS, ShadCN
• Testing: Vitest, React Testing Library
• API: mockapi.io
• Hosting: Vercel
• Package Manager: npm

Project Context

The primary goal is to practice AI-assisted development and refine prompt engineering skills while building a simple CRUD application using modern web technologies. This project aims to enhance understanding of AI tool capabilities in software development and provide a structured approach to learning API integration.

System Patterns

The architecture employs Client-Side Rendering (CSR) for dynamic UI updates and Server-Side Rendering (SSR) where needed for SEO improvements. It follows an API-based architecture with mockapi.io. Key technical decisions include using Next.js for routing and performance optimizations, TailwindCSS & ShadCN for fast and consistent UI styling, and npm for dependency management. The design patterns include Component-Based Development, Separation of Concerns, and Reusable Utility Functions.

Development Setup

To get started with development:

1. Install Node.js and npm.
2. Create a Next.js app with TypeScript.
3. Configure TailwindCSS and ShadCN.
4. Set up Vitest for testing.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.