Quick Start

Build your first feature with AppLighter in minutes. Learn how to create screens, fetch data with Supabase, and use AI tools for rapid development.

Project Structure

Here's an overview of the AppLighter project structure:

code/
├── apps/
│   ├── mobile/              # Expo React Native app
│   │   ├── app/             # Expo Router pages (file-based routing)
│   │   │   ├── (onboarding)/ # Onboarding flow
│   │   │   ├── (auth)/      # Public auth routes
│   │   │   └── (app)/       # Protected app routes
│   │   ├── components/      # Reusable UI components
│   │   ├── src/             # Business logic, hooks, stores
│   │   └── lib/             # Utilities and helpers
│   └── api/                 # API backend
│       └── src/             # API routes and handlers
├── .ai/                     # AI assistant configuration
├── .claude/                 # Claude Code configuration
└── claude.md                # Project context for AI

Creating a New Screen

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

// app/(app)/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 Supabase

Use the Supabase client to fetch data from your backend:

import { supabase } from "@/src/db/client"

// Fetch all posts
const { data: posts } = await supabase.from("posts").select("*")

// Fetch with filters
const { data: userPosts } = await supabase
  .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