Installation

This guide will help you set up AniDev on your local machine for development purposes.

Prerequisites

Before you begin, ensure you have the following installed:

Node.js

Version 18.x or higherAniDev is tested on Node.js v24.13.1. Download from nodejs.org

Package Manager

pnpm (recommended)Install pnpm: npm install -g pnpmAlso compatible with npm and yarn

Supabase Account

Free account requiredSign up at supabase.com for database and authentication

Redis (Optional)

For cachingRedis is optional but recommended for optimal performance

AniDev uses Astro v5.16.8 with server-side rendering. Make sure your environment supports SSR.

Installation Steps

Clone the Repository

Clone the AniDev repository to your local machine:

git clone https://github.com/your-username/anidev.git
cd anidev

Install Dependencies

Install all required dependencies using your preferred package manager:

pnpm install

We recommend using pnpm for faster installation and better disk space efficiency. The project includes pnpm-specific configurations.

This will install all dependencies including:

Astro 5.16.8 - Web framework
React 19.2.3 - UI library
TailwindCSS 4.1.10 - Styling
Supabase 2.90.1 - Backend and authentication
Vidstack - Video player
Zustand - State management
And many more (see package.json for full list)

Configure Environment Variables

Create a .env file in the root directory with the following variables:

.env

# Supabase Configuration (Required)
SUPABASE_URL=your_supabase_project_url
SUPABASE_ANON_KEY=your_supabase_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key

# Authentication (Required)
AUTH_SECRET=your_random_auth_secret

# Redis Configuration (Optional - for caching)
REDIS_PASSWORD=your_redis_password

# Pinata Configuration (Optional - for IPFS image storage)
PINATA_JWT=your_pinata_jwt_token

# Gateway URL (Optional)
GATEWAY_URL=your_gateway_url

# Sentry (Optional - for error tracking)
SENTRY_DSN=your_sentry_dsn
SENTRY_AUTH_TOKEN=your_sentry_auth_token

Required Environment Variables:

SUPABASE_URL - Your Supabase project URL
SUPABASE_ANON_KEY - Your Supabase anonymous key
SUPABASE_SERVICE_ROLE_KEY - Your Supabase service role key (keep this secret!)
AUTH_SECRET - A random string for session encryption

Getting Supabase Credentials

Create a new project at supabase.com
Go to Project Settings → API
Copy your project URL and keys:
- URL: https://your-project.supabase.co
- anon/public key: Used for client-side operations
- service_role key: Used for admin operations (keep secret!)

Generating AUTH_SECRET

Generate a secure random string:

openssl rand -base64 32

Optional Services:

Redis: Improves API performance with caching. Run locally with Docker or use a cloud provider.
Pinata: Used for decentralized image storage via IPFS.
Sentry: Error tracking and monitoring for production.

Set Up the Database

AniDev uses Supabase for data storage. You’ll need to set up your database schema:

Run migrations (if provided) or manually create tables in Supabase
Configure Row Level Security (RLS) policies for authentication
Set up necessary database functions and RPC endpoints

Check the /src/libs/supabase.ts file to understand the database client configuration and available operations.

Start the Development Server

Start the local development server:

pnpm dev

The application will start on http://localhost:4321

The dev server uses Astro’s development mode with hot module replacement (HMR) for fast iteration.

Available Scripts

AniDev includes several npm scripts for development and production:

Script	Command	Description
Development	`pnpm dev`	Start development server on port 4321
Build	`pnpm build`	Type check with Astro and build for production
Preview	`pnpm preview`	Preview production build locally
Start	`pnpm start`	Start production server (after build)
Test	`pnpm test`	Run Vitest test suite
Format	`pnpm format`	Format code with Biome and Prettier
Release	`pnpm release`	Create a new version with standard-version

pnpm dev
# Starts on http://localhost:4321

Project Structure

Understanding the codebase structure:

anidev/
├── src/
│   ├── components/          # Reusable UI components
│   │   ├── anime-info/     # Anime details components
│   │   ├── auth/           # Authentication components
│   │   ├── nav-bar/        # Navigation components
│   │   ├── profile/        # User profile components
│   │   └── watch-anime/    # Video player components
│   ├── domains/            # Domain-driven design modules
│   │   ├── auth/          # Authentication domain
│   │   ├── anime/         # Anime domain
│   │   ├── user/          # User domain
│   │   └── watch/         # Watch/streaming domain
│   ├── hooks/             # Custom React hooks
│   ├── layouts/           # Astro layouts
│   ├── libs/              # External integrations
│   │   ├── supabase.ts   # Supabase client
│   │   ├── redis.ts      # Redis client
│   │   └── pinata.ts     # Pinata client
│   ├── middlewares/       # API middlewares
│   │   ├── auth.ts       # Auth middleware
│   │   └── rate-limit.ts # Rate limiting
│   ├── pages/            # Astro pages (routes)
│   │   ├── api/         # API endpoints
│   │   ├── anime/       # Anime pages
│   │   ├── profile/     # User profile
│   │   └── watch/       # Video player
│   ├── store/            # Zustand state management
│   ├── styles/           # Global styles
│   ├── test/            # Test files
│   ├── types/           # TypeScript definitions
│   └── utils/           # Helper functions
├── public/              # Static assets
├── astro.config.mjs     # Astro configuration
├── tailwind.config.js   # TailwindCSS config
├── tsconfig.json        # TypeScript config
└── package.json         # Dependencies and scripts

Development Tips

Hot Reload

The dev server automatically reloads when you save changes. No need to manually refresh!

Type Safety

Run pnpm astro check to verify TypeScript types before building.

Code Quality

Use pnpm format to auto-format code with Biome and Prettier before committing.

Testing

Write tests in /src/test/ using Vitest. Run with pnpm test.

Common Issues

Port 4321 already in use?Kill the process using the port or change the port in astro.config.mjs:

server: {
  port: 3000, // Change to your preferred port
  host: '0.0.0.0'
}

Module not found errors?AniDev uses path aliases. Check tsconfig.json for alias mappings:

@components/* → src/components/*
@hooks/* → src/hooks/*
@utils/* → src/utils/*
@auth/* → src/domains/auth/*
@anime/* → src/domains/anime/*
And more…

Supabase connection errors?Verify your .env file:

Check that SUPABASE_URL is correct (no trailing slash)
Verify SUPABASE_ANON_KEY is valid
Ensure your Supabase project is active

Building for Production

Run Type Check and Build

pnpm build

This command:

Runs astro check to verify TypeScript types
Builds the project for production with optimizations
Outputs to ./dist/ directory

Test Production Build

pnpm preview

Preview your production build locally before deploying.

Deploy

AniDev is configured for deployment on Vercel with Node.js adapter:

Output mode: server (SSR enabled)
Adapter: @astrojs/node in standalone mode
Site URL: https://anidev.app

Simply connect your Git repository to Vercel and deploy!

Make sure to set all environment variables in your deployment platform’s settings.

Redis Setup (Optional)

For optimal performance with caching:

# Run Redis locally with Docker
docker run -d -p 6379:6379 --name anidev-redis redis:alpine

Then add to .env:

REDIS_PASSWORD=your_password

Next Steps

Architecture

Learn about AniDev’s domain-driven architecture and design patterns

API Documentation

Explore available API endpoints and integration options

Contributing

Check the contribution guidelines to start contributing to AniDev

Testing Guide

Learn how to write and run tests for components and APIs

Need Help?

If you encounter issues during installation:

Check the GitHub Issues
Review the README.md for additional context
Join the community discussions

For the best development experience, use VS Code with recommended extensions:

Astro extension
TypeScript and JavaScript Language Features
Tailwind CSS IntelliSense
Prettier

Get Started

Core Features

User Guide

Development

Prerequisites

Node.js

Package Manager

Supabase Account

Redis (Optional)

Installation Steps

Getting Supabase Credentials

Generating AUTH_SECRET

Available Scripts

Project Structure

Development Tips

Hot Reload

Type Safety

Code Quality

Testing

Common Issues

Building for Production

Redis Setup (Optional)

Next Steps

Architecture

API Documentation

Contributing

Testing Guide

Need Help?

Build docs developers (and LLMs) love

Get Started

Core Features

User Guide

Development

​Prerequisites

Node.js

Package Manager

Supabase Account

Redis (Optional)

​Installation Steps

​Getting Supabase Credentials

​Generating AUTH_SECRET

​Available Scripts

​Project Structure

​Development Tips

Hot Reload

Type Safety

Code Quality

Testing

​Common Issues

​Building for Production

​Redis Setup (Optional)

​Next Steps

Architecture

API Documentation

Contributing

Testing Guide

​Need Help?

Build docs developers (and LLMs) love

Prerequisites

Installation Steps

Getting Supabase Credentials

Generating AUTH_SECRET

Available Scripts

Project Structure

Development Tips

Common Issues

Building for Production

Redis Setup (Optional)

Next Steps

Need Help?