Getting Started - Vibe Coding Platform Documentation

Prerequisites

Before you begin, make sure you have the following installed on your system:

Node.js (version 18.17 or later)
npm or yarn package manager
Git for version control
A code editor (VS Code recommended)

Installation

1. Clone the Repository

git clone https://github.com/VibeCodingStarter/vibe-coding.git
cd vibe-coding

2. Install Dependencies

npm install
# or
yarn install

3. Set Up Environment Variables

Create a .env.local file in the root directory:

# Supabase Configuration
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_service_role_key

# Optional: Analytics
NEXT_PUBLIC_VERCEL_ANALYTICS_ID=your_analytics_id

4. Run the Development Server

npm run dev
# or
yarn dev

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

Project Structure

Here's an overview of the key directories and files:

vibe-coding/
├── app/                    # Next.js App Router
│   ├── components/         # React components
│   ├── actions/           # Server actions
│   ├── hooks/             # Custom React hooks
│   └── globals.css        # Global styles
├── database/              # Database migrations
├── types/                 # TypeScript type definitions
├── utils/                 # Utility functions
│   └── supabase/         # Supabase configuration
├── public/               # Static assets
└── package.json          # Dependencies and scripts

Customization

Update Metadata

Edit app/layout.tsx to update your site's metadata:

Title and description
Favicon and icons
Open Graph meta tags

Customize Styles

The project uses Tailwind CSS for styling. You can:

Modify app/globals.css for global styles
Update tailwind.config.js for theme customization
Edit component files for specific styling

Replace Icons

Replace the default icons in the public/ directory:

favicon.ico - Browser favicon
icon.svg - Main icon
apple-icon.svg - Apple touch icon

Next Steps

Set up Supabase

Configure your database and authentication

Deploy to Vercel

Deploy your application to production