Skip to main content

​
Quickstart

Get up and running with Arre in under 5 minutes. This guide will walk you through cloning the repository, starting the development server, and creating your first task.
This quickstart uses Firebase emulators for local development. You don’t need a Firebase account to get started, but you’ll need one for production deployment.

​
Prerequisites

Before you begin, ensure you have:
  • Node.js 22.12 or higher installed
  • npm package manager
  • A code editor (VS Code recommended)
  • Basic familiarity with terminal commands
1

Clone the Repository

Clone the Arre repository to your local machine:
git clone https://github.com/pedro3087/arre.git
cd arre
Expected output:
Cloning into 'arre'...
remote: Enumerating objects: 1234, done.
remote: Counting objects: 100% (1234/1234), done.
remote: Compressing objects: 100% (567/567), done.
Receiving objects: 100% (1234/1234), 2.34 MiB | 5.67 MiB/s, done.
2

Install Dependencies

Install all required dependencies using npm:
npm install
This will install:
  • React 19 and React DOM
  • Firebase SDK
  • Vite build tool
  • TypeScript
  • UI libraries (Framer Motion, Lucide Icons, Recharts)
  • Development tools (Playwright, Firebase Tools)
Expected output:
added 890 packages, and audited 891 packages in 45s

156 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
The installation typically takes 30-60 seconds depending on your internet connection and machine performance.
3

Start Firebase Emulators

Start the Firebase emulators for local development. Open a new terminal window and run:
npm run emulators
This starts four local services:
  • Auth Emulator (port 9099): Mock authentication
  • Firestore Emulator (port 8080): Local database
  • Functions Emulator (port 5001): Cloud functions
  • Storage Emulator (port 9199): File storage
Expected output:
┌─────────────────────────────────────────────────────────────┐
│ ✔  All emulators ready! It is now safe to connect your app. │
│ i  View Emulator UI at http://127.0.0.1:4000                │
└─────────────────────────────────────────────────────────────┘

┌────────────┬────────────────┬─────────────────────────────────┐
│ Emulator   │ Host:Port      │ View in Emulator UI             │
├────────────┼────────────────┼─────────────────────────────────┤
│ Auth       │ 127.0.0.1:9099 │ http://127.0.0.1:4000/auth      │
├────────────┼────────────────┼─────────────────────────────────┤
│ Firestore  │ 127.0.0.1:8080 │ http://127.0.0.1:4000/firestore │
├────────────┼────────────────┼─────────────────────────────────┤
│ Functions  │ 127.0.0.1:5001 │ http://127.0.0.1:4000/functions │
├────────────┼────────────────┼─────────────────────────────────┤
│ Storage    │ 127.0.0.1:9199 │ http://127.0.0.1:4000/storage   │
└────────────┴────────────────┴─────────────────────────────────┘
Keep this terminal window open! The emulators must run continuously while you develop. If you close this window, the app will lose its connection to the backend services.
4

Start the Development Server

In your original terminal window (or a new one), start the Vite development server:
npm run dev
Expected output:
  VITE v7.3.1  ready in 234 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

🔥 Connecting to Firebase Emulators...
The 🔥 Connecting to Firebase Emulators... message confirms that Arre is using local emulators instead of production Firebase services.
5

Open the App and Sign In

Open your browser and navigate to:
http://localhost:5173
You’ll be redirected to the login page. Click “Continue with Google” to create a simulated local account.
In development mode, the “Continue with Google” button creates a mock account using Firebase Auth emulator. No actual Google account is required.
After signing in, you’ll land on the Today view - your focused workspace for current tasks.
6

Create Your First Task

Let’s create your first task:
  1. Click the ”+ New Task” button (floating action button on mobile, or in the top right on desktop)
  2. In the task modal, enter:
    • Title: “Complete Arre quickstart guide”
    • Notes: Optional details about the task
    • Date: Select “Today”
    • Energy Level: Choose ”🟢 Low Energy” for this simple task
  3. Click “Create Task”
// When you create a task, Arre saves it to Firestore
interface Task {
  title: string;
  notes?: string;
  date: 'today' | 'upcoming' | 'anytime' | 'someday';
  energyLevel: 'low' | 'neutral' | 'high';
  projectId?: string;
  completed: boolean;
  createdAt: Timestamp;
  userId: string;
}
Success! Your first task now appears in the Today view with:
  • ✅ A checkbox to mark it complete
  • 🟢 A green dot indicating low energy
  • ✏️ Edit and delete options on hover
7

Explore Key Features

Now that you have a task, explore Arre’s key features:
Click the energy filter buttons at the top:
  • 🟢 Low Energy: Shows quick wins and administrative tasks
  • 🟡 Neutral: All tasks (default)
  • 🟣 High Focus: Deep work sessions only
Your task should appear when “Low Energy” or “Neutral” is selected.
Navigate to Work Area (Inbox) from the sidebar to see:
  • Velocity Chart: Your completion rate (empty for now)
  • Focus Ring: Time spent in deep work
  • Task Progress: Daily throughput visualization
These populate as you complete tasks over time.
  1. Click ”+ New Project” in the sidebar
  2. Choose a color (e.g., Emerald)
  3. Name it “Personal”
  4. Edit your task and assign it to this project
  5. Notice the colored dot badge on the task
Click the theme toggle (sun/moon icon) to switch between light and dark modes. Notice the high-performance dark theme with neon cyan and purple accents.

​
What’s Next?

Congratulations! You’ve successfully:
  • ✅ Set up Arre locally with Firebase emulators
  • ✅ Created your first task
  • ✅ Explored energy filtering and themes

​
Continue Learning

Installation Guide

Learn about production deployment, environment variables, and Firebase configuration

Core Features

Deep dive into Magic Import, productivity metrics, and project management

Testing

Set up Playwright E2E tests and understand the AI QA Agent

Architecture

Explore the backend architecture, Firestore schema, and security rules

​
Common Issues

If you see Port 5173 is already in use, kill the existing process:
# Find the process
lsof -ti:5173

# Kill it
kill -9 $(lsof -ti:5173)

# Restart dev server
npm run dev
Ensure emulators are running in a separate terminal window:
# Check if emulators are running
curl http://localhost:9099

# If not, start them
npm run emulators
Check the browser console for connection errors. The app should log:
🔥 Connecting to Firebase Emulators...
If missing, verify that import.meta.env.DEV is true and emulators are running.

​
Development Tips

Pro Tip: Open the Emulator UI at http://localhost:4000 to inspect your Firestore data, view authentication users, and monitor cloud function calls in real-time.
Data Persistence: Emulator data is ephemeral by default. When you restart emulators, all data resets. For persistent data, add the --import and --export-on-exit flags to your emulator command.
Ready for production deployment? Check out the Installation Guide for Firebase Hosting setup and CI/CD configuration.

Build docs developers (and LLMs) love

Get started for freeTalk to us