Quick Start

Build your first feature with AppLighter in minutes.

Project Structure

Here's an overview of the AppLighter project structure:

applighter/
├── app/                    # Expo Router pages
│   ├── (auth)/            # Auth-protected routes
│   ├── (tabs)/            # Tab navigation
│   └── _layout.tsx        # Root layout
├── components/            # Reusable UI components
├── lib/                   # Utilities and helpers
│   ├── db/               # Vibecode DB client
│   ├── auth/             # Authentication helpers
│   └── api/              # API client
├── api/                   # Hono API routes
├── stores/               # Zustand state stores
└── .claude/              # Claude Code configuration

Creating a New Screen

With Expo Router, creating new screens is file-based. Add a new file to the app/ directory:

// app/(tabs)/profile.tsx
import { View, Text } from "react-native"

export default function ProfileScreen() {
  return (
    <View className="flex-1 items-center justify-center">
      <Text className="text-xl font-bold">Profile</Text>
    </View>
  )
}

Fetching Data with Vibecode DB

Use the Vibecode DB client to fetch data from your backend:

import { db } from "@/lib/db"

// Fetch all posts
const posts = await db.from("posts").select("*")

// Fetch with filters
const userPosts = await db
  .from("posts")
  .select("*")
  .eq("user_id", userId)
  .order("created_at", { ascending: false })

Using AI Tools

AppLighter comes with Claude Code and Cursor configurations. To leverage AI:

  1. Open your project in Cursor
  2. Use Cmd+K to ask Cursor about your codebase
  3. The pre-configured rules help AI understand your project structure

For Claude Code:

claude code "Add a logout button to the profile screen"

Next Steps