Effective Vibe Coding Workshop 2025

This repository contains the code and materials for the "Effective Vibe Coding Workshop" for LINE Developers 2025. The project is built with Next.js and demonstrates modern full-stack development, including backend and frontend integration, using Docker and MongoDB for local development.

What we'll do today (1 hour agenda)

1. Understanding Vibe Coding and AI Assistant
   • Learn the concept of "vibe coding" and how to leverage AI assistants for productivity.
2. Think and Design Before Prompting AI
   • Practice designing features and planning before writing prompts or code.
3. Implement Backend from Design Spec
   • Build backend logic based on the design specification.
   • Learn how to test backend functionality.
4. Integrate Frontend to Backend
   • Connect the frontend UI to the backend API and verify end-to-end functionality.

Frontend with v0

For the frontend, we'll use v0 to generate UI components and application flows. v0 is an AI-powered tool that helps you create React/Next.js components from natural language prompts, speeding up the UI development process.

You can:

• Use v0 to design and generate pages or components.
• Copy the generated code into your src/app directory.
• Connect the UI to your backend endpoints for a full-stack experience.

Getting Started

To start the development environment with Docker Compose (includes MongoDB):

docker compose up

Or, to run locally without Docker:

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

Open http://localhost:3000 in your browser to see the app.

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