Airtable Clone

Moderný Airtable clone postavený na Next.js 14, TypeScript, Tailwind CSS a Supabase.

Funkcionalita

MVP (Minimum Viable Product)

• ✅ Grid view interface podobný Airtable
• ✅ CRUD operácie (Create, Read, Update, Delete)
• ✅ Základné column types:
  • Single line text
  • Long text
  • Number
  • Date
  • Checkbox
  • Single select
  • Multiple select
• ✅ Column management (pridávanie, editovanie, mazanie)
• ✅ Table management
• ✅ Autentifikácia používateľov

Fáza 2 (Plánované funkcie)

• 🔄 AI integrácia (Stable Diffusion, OpenAI Vision)
• 🔄 Content kalendár pre sociálne siete
• 🔄 Cloudflare R2 storage
• 🔄 Advanced views (Kanban, Calendar, Gallery)
• 🔄 Real-time collaboration
• 🔄 Formulas a calculations

Tech Stack

• Frontend: Next.js 14, TypeScript, Tailwind CSS
• Backend: Next.js API Routes, Prisma ORM
• Database: Supabase (PostgreSQL)
• Auth: NextAuth.js
• Storage: Cloudflare R2 (Fáza 2)
• Deployment: Vercel

Inštalácia

1. Klonuj projekt:

git clone <repository-url>
cd airtable-clone

2. Nainštaluj dependencies:

npm install

3. Nastav environment variables:

cp .env.local.example .env.local

Vyplň nasledujúce hodnoty v .env.local:

# Supabase
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key

# NextAuth
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your_nextauth_secret

# Database
DATABASE_URL=your_supabase_database_url

4. Generuj Prisma client:

npm run db:generate

5. Push databázovú štruktúru:

npm run db:push

6. Spusti development server:

npm run dev

Otvor http://localhost:3000 v prehliadači.

Projektová Štruktúra

src/
├── app/                    # Next.js App Router
│   ├── (auth)/            # Auth pages
│   ├── dashboard/         # Dashboard a tables
│   ├── globals.css        # Global styles
│   ├── layout.tsx         # Root layout
│   └── page.tsx          # Home page
├── components/            # React komponenty
│   ├── ui/               # Basic UI komponenty
│   ├── grid/             # Grid view komponenty
│   ├── forms/            # Form komponenty
│   └── layout/           # Layout komponenty
├── lib/                  # Utility knižnice
│   ├── prisma.ts         # Prisma client
│   ├── supabase.ts       # Supabase client
│   └── utils.ts          # Helper funkcie
├── types/                # TypeScript typy
│   ├── database.ts       # Database typy
│   └── ui.ts             # UI typy
└── hooks/                # Custom React hooks

Databázový Model

Core Entities

• User: Používateľské účty
• Workspace: Pracovné priestory
• Table: Tabuľky v rámci workspace
• Column: Stĺpce tabuliek
• Record: Záznamy (riadky)
• CellValue: Hodnoty v bunkách

Column Types

• TEXT: Jednoduchý text
• LONG_TEXT: Dlhý text (textarea)
• NUMBER: Číselné hodnoty
• DATE: Dátum
• CHECKBOX: Zaškrtávacie políčko
• SINGLE_SELECT: Jedna možnosť z dropdown
• MULTIPLE_SELECT: Viacero možností (tagy)

Skripty

• npm run dev - Development server
• npm run build - Production build
• npm run start - Production server
• npm run lint - ESLint
• npm run db:generate - Generuj Prisma client
• npm run db:push - Push databázové zmeny
• npm run db:studio - Otvor Prisma Studio

Deployment

Vercel (Odporúčané)

1. Pushni kód na GitHub
2. Prepoj repository s Vercel
3. Nastav environment variables vo Vercel dashboard
4. Deploy automaticky

Manuál Deployment

1. Build projekt: npm run build
2. Upload .next folder na hosting
3. Nastav environment variables

Prispievanie

1. Forkni projekt
2. Vytvor feature branch: git checkout -b feature/amazing-feature
3. Commitni zmeny: git commit -m 'Add amazing feature'
4. Pushni branch: git push origin feature/amazing-feature
5. Otvor Pull Request

Licencia

Tento projekt je licencovaný pod MIT License - pozri LICENSE file pre detaily.

Support

Ak máš nejaké otázky alebo problémy, prosím otvor issue na GitHub.