Quick Start Guide

Get Started in Minutes

Follow this comprehensive guide to set up your development environment and build your first project with AEROSNAP's proven methodologies

30 minutes total

Beginner friendly

Environment Setup

5 minutes

Configure your development environment with the essential tools

Install Node.js 18+ and npm/yarn
Set up Git and configure SSH keys
Install VS Code with recommended extensions
Configure environment variables

Terminal

# Install dependencies
npm install

# Set up environment
cp .env.example .env.local

# Configure your environment variables
NEXT_PUBLIC_APP_URL=http://localhost:3000
DATABASE_URL=your_database_url

Project Initialization

3 minutes

Create a new project using our proven architecture patterns

Clone our starter template
Install project dependencies
Configure TypeScript and ESLint
Set up Tailwind CSS

Terminal

# Clone the AEROSNAP starter template
git clone https://github.com/aerosnap/starter-template.git
cd starter-template

# Install dependencies
npm install

# Start development server
npm run dev

Design System Integration

10 minutes

Integrate our design system and component library

Import design tokens and variables
Set up component library
Configure theme provider
Test responsive breakpoints

Terminal

import { ThemeProvider } from '@aerosnap/design-system'
import { Button, Card, Typography } from '@aerosnap/components'

export default function App() {
  return (
    <ThemeProvider theme="default">
      <Card>
        <Typography variant="h1">Welcome to AEROSNAP</Typography>
        <Button variant="primary">Get Started</Button>
      </Card>
    </ThemeProvider>
  )
}

Deploy & Monitor

15 minutes

Deploy your application and set up monitoring

Configure deployment pipeline
Set up error tracking
Configure performance monitoring
Enable analytics and reporting

Terminal

# Deploy to production
npm run build
npm run deploy

# Set up monitoring
npm install @sentry/nextjs
npm install @vercel/analytics

# Configure monitoring in next.config.js
module.exports = {
  sentry: {
    hideSourceMaps: true,
  },
}

Essential Tools & Resources

Everything you need to accelerate your development workflow

Development Tools

Design Resources

Deployment & Hosting

Troubleshooting

Common issues and their solutions

Environment Variables Not Loading

Ensure .env.local is in your project root and restart your development server.

cp .env.example .env.local && npm run dev

TypeScript Configuration Errors

Update your tsconfig.json to extend our recommended configuration.

{ "extends": "@aerosnap/typescript-config" }

Tailwind Classes Not Applied

Verify your tailwind.config.js includes all content paths.

content: ["./src/**/*.{js,ts,jsx,tsx}"]

You're All Set!

Now explore our design system, component library, and advanced guides

Design Principles Component Library