PROJECT OVERVIEW:
Create a fully functional, multi-page Next.js MVP application called 'Estonia Ease'. This platform aims to significantly simplify the process of establishing and managing an e-business in Estonia, specifically targeting founders in countries with high bureaucratic overhead, like Germany. The core value proposition is to provide a streamlined, digital-first experience for setting up and maintaining an Estonian company through the e-residency program, minimizing paperwork and administrative hassle. It will guide users through e-residency application, company incorporation, bank account opening, and basic financial management.
TECH STACK:
- Frontend Framework: Next.js (App Router)
- Styling: Tailwind CSS
- UI Components: shadcn/ui
- State Management: React Context API / Zustand (for global state)
- ORM: Drizzle ORM
- Database: PostgreSQL (or SQLite for local dev)
- Authentication: NextAuth.js (or Clerk for simpler auth management)
- Form Handling: React Hook Form with Zod for validation
- Other: React Icons, date-fns, Axios (for API calls), potentially a charting library like Chart.js or Recharts for financial overview.
DATABASE SCHEMA:
1. `users` table:
- `id` (UUID, PK)
- `email` (VARCHAR, UNIQUE, NOT NULL)
- `password` (VARCHAR, NOT NULL) - Hashed
- `firstName` (VARCHAR)
- `lastName` (VARCHAR)
- `createdAt` (TIMESTAMP, DEFAULT NOW())
- `updatedAt` (TIMESTAMP, DEFAULT NOW())
2. `profiles` table (Extends `users`)
- `userId` (UUID, FK to `users.id`, PK)
- `countryOfResidence` (VARCHAR)
- `eResidencyStatus` (ENUM('NotStarted', 'Applied', 'Approved', 'Rejected'), DEFAULT 'NotStarted')
- `eResidencyApplicationId` (VARCHAR)
- `companyName` (VARCHAR)
- `companyRegistrationNumber` (VARCHAR)
- `companyAddress` (TEXT)
- `bankAccountDetails` (JSONB) // Store bank info
- `contactNumber` (VARCHAR)
- `createdAt` (TIMESTAMP, DEFAULT NOW())
- `updatedAt` (TIMESTAMP, DEFAULT NOW())
3. `documents` table:
- `id` (UUID, PK)
- `userId` (UUID, FK to `users.id`)
- `documentType` (VARCHAR) // e.g., 'PassportScan', 'ProofOfAddress', 'ArticlesOfAssociation'
- `storagePath` (VARCHAR, NOT NULL) // S3 or local path
- `fileName` (VARCHAR, NOT NULL)
- `uploadedAt` (TIMESTAMP, DEFAULT NOW())
- `status` (ENUM('Pending', 'Verified', 'Rejected'), DEFAULT 'Pending')
4. `invoices` table:
- `id` (UUID, PK)
- `userId` (UUID, FK to `users.id`)
- `clientId` (VARCHAR)
- `invoiceNumber` (VARCHAR, NOT NULL)
- `issueDate` (DATE, NOT NULL)
- `dueDate` (DATE, NOT NULL)
- `amount` (DECIMAL(10, 2), NOT NULL)
- `currency` (VARCHAR(3), DEFAULT 'EUR')
- `status` (ENUM('Draft', 'Sent', 'Paid', 'Overdue'), DEFAULT 'Draft')
- `createdAt` (TIMESTAMP, DEFAULT NOW())
- `updatedAt` (TIMESTAMP, DEFAULT NOW())
5. `invoice_items` table:
- `id` (UUID, PK)
- `invoiceId` (UUID, FK to `invoices.id`)
- `description` (TEXT, NOT NULL)
- `quantity` (INTEGER, DEFAULT 1)
- `unitPrice` (DECIMAL(10, 2), NOT NULL)
- `taxRate` (DECIMAL(5, 2)) // e.g., 20.00 for 20%
CORE FEATURES & USER FLOW:
1. **User Authentication & Onboarding:**
- Flow: User signs up with email/password. Completes initial profile setup (country of residence, basic info). User is directed to the e-residency application flow.
- Auth: Use NextAuth.js with email/password strategy. Implement password reset functionality.
- Profile: Store basic user data and link to `profiles` table.
2. **E-Residency Application Assistance:**
- Flow: User navigates to 'E-Residency' section. A step-by-step wizard guides them through the application process.
- Steps: Information gathering (personal details, motivation), document upload (ID, photo, proof of address), application form filling (pre-filled where possible using profile data), submission guidance.
- UI: Multi-step form, progress indicator, clear instructions, secure file upload component.
- Backend: API endpoints to handle document uploads (store in S3/local), update `eResidencyStatus` and `eResidencyApplicationId` in `profiles` table.
3. **Company Incorporation:**
- Flow: Triggered after e-residency approval (or initiated in parallel if user has ID). Wizard guides user through company details.
- Steps: Company name selection, address, share capital, board members (initially just the user), digital signature process.
- UI: Forms for company details, integration with a digital signing service if feasible for MVP, clear display of company registration number upon completion.
- Backend: API endpoints to submit incorporation requests (simulated for MVP or via API if available), update `companyName`, `companyRegistrationNumber`, `companyAddress` in `profiles`.
4. **Basic Invoicing & Financial Tracking:**
- Flow: User navigates to 'Invoices' section. Can create, view, edit, and mark invoices as paid.
- Features: Create new invoice (client name, items, amounts, dates), view list of all invoices with status filters (Draft, Sent, Paid, Overdue), view individual invoice details.
- UI: Invoice list table (sortable, filterable), modal/page for creating/editing invoices, clear status indicators.
- Backend: CRUD API endpoints for `invoices` and `invoice_items` tables. Calculate totals, due dates, and status.
API & DATA FETCHING:
- Use Next.js API routes (App Router: `route.ts` files).
- Implement RESTful principles for API endpoints (e.g., `POST /api/auth/signup`, `GET /api/documents`, `POST /api/invoices`).
- Fetch data in Server Components where possible for SEO and performance.
- Use Client Components with `useEffect` or libraries like SWR/React Query for dynamic data or form submissions.
- Ensure API responses are consistent JSON objects, including success and error states.
- Example: `POST /api/invoices` Request Body: `{ clientId: '...', items: [...], issueDate: '...', dueDate: '...' }`. Response Body: `{ success: true, invoice: { id: '...', ... } }` or `{ success: false, error: '...' }`.
COMPONENT BREAKDOWN (Next.js App Router structure):
- `app/layout.tsx`: Root layout (html, body, global providers, Tailwind CSS setup).
- `app/(marketing)/page.tsx`: Landing Page (App overview, features, CTA).
- `app/(marketing)/layout.tsx`: Marketing pages layout.
- `app/(auth)/login/page.tsx`: Login form.
- `app/(auth)/signup/page.tsx`: Signup form.
- `app/(auth)/reset-password/page.tsx`: Password reset form.
- `app/(auth)/layout.tsx`: Auth pages layout.
- `app/(app)/layout.tsx`: Main application layout (with sidebar/navbar).
- `app/(app)/dashboard/page.tsx`: Dashboard (Overview, quick stats, navigation links). Requires authentication.
- Components: `DashboardStatsCard`, `QuickActionsPanel`
- `app/(app)/company/e-residency/page.tsx`: E-Residency application wizard.
- Components: `EResidencyFormStep1`, `EResidencyFormStep2`, `DocumentUploader`, `StatusTracker`
- `app/(app)/company/incorporation/page.tsx`: Company incorporation form.
- Components: `CompanyDetailsForm`, `DigitalSignaturePlaceholder`
- `app/(app)/company/details/page.tsx`: Display registered company details.
- Components: `CompanyInfoCard`
- `app/(app)/invoices/page.tsx`: Invoice list view.
- Components: `InvoiceTable`, `InvoiceStatusBadge`, `CreateInvoiceButton`
- `app/(app)/invoices/[id]/page.tsx`: Individual invoice view/edit.
- Components: `InvoiceForm`, `InvoiceDetailView`, `InvoiceItemList`
- `app/(app)/settings/page.tsx`: User profile and settings.
- Components: `ProfileForm`, `AccountSettings`
- `components/ui/` (shadcn/ui components like Button, Input, Card, Table, Form, Dialog, etc.)
- `components/layout/`: `Navbar`, `Sidebar`, `Footer`.
- `components/auth/`: `LoginForm`, `SignupForm`.
- `components/forms/`: Reusable form elements and validation logic wrappers.
- `components/shared/`: Common components like `StatusBadge`, `LoadingSpinner`.
State Management:
- Local component state for form inputs, UI toggles.
- Context API or Zustand for user authentication status, possibly fetched profile data shared across the app.
- Server Components handle data fetching for static/semi-static content on pages.
UI/UX DESIGN & VISUAL IDENTITY:
- Style: Clean, Modern, Professional.
- Color Palette:
- Primary: `#007AFF` (Vibrant Blue)
- Secondary: `#6C5CE7` (Soft Purple)
- Accent: `#2ECC71` (Success Green)
- Neutral: `#F8F9FA` (Light Gray Background), `#343A40` (Dark Text), `#6C757D` (Secondary Text)
- Alerts: `#E74C3C` (Error Red)
- Typography: Use a clean sans-serif font like Inter or Poppins. Define clear hierarchy for headings (H1, H2, H3) and body text.
- Layout: Use a standard sidebar navigation for authenticated users. Content area should be well-spaced with clear sections. Utilize cards for displaying summarized information.
- Responsiveness: Mobile-first approach. Ensure usability on small screens, scaling gracefully to tablets and desktops. Use Tailwind's responsive prefixes (sm:, md:, lg:).
- Visuals: Minimalistic icons (React Icons). Subtle gradients in backgrounds or buttons for a modern feel. Clean data tables with clear rows and columns.
ANIMATIONS:
- Page Transitions: Subtle fade-in/out or slide-in animations using Next.js's built-in features or libraries like Framer Motion (if needed, keep it minimal for MVP).
- Button/Element Interactions: Smooth hover effects (slight scale, background color change) on buttons and interactive elements.
- Loading States: Use spinners (`LoadingSpinner` component) or skeleton loaders when fetching data. Integrate with Tailwind CSS for styling.
- Form Transitions: Smooth expansion/collapse for form sections or error messages.
EDGE CASES:
- **Authentication:** Handle expired sessions, unauthorized access attempts (redirect to login).
- **Empty States:** Design informative empty states for the invoice list, dashboard widgets, etc., with clear CTAs (e.g., 'Create your first invoice').
- **Form Validation:** Implement real-time validation using Zod and React Hook Form for all user inputs. Provide clear, user-friendly error messages next to the relevant fields.
- **Error Handling:** Gracefully handle API errors. Display user-friendly error messages (e.g., 'Could not save invoice. Please try again.'). Log detailed errors for developers.
- **File Uploads:** Handle upload failures, large file sizes, incorrect file types.
- **Data Consistency:** Ensure data integrity between frontend and backend, especially during CRUD operations.
- **E-Residency Status:** Clearly display different statuses and guide users on next steps based on their current e-residency application status.
SAMPLE DATA (for `invoices` and `invoice_items`):
1. Invoice 1 (Draft):
- `id`: 'd0e8a1b1-5c9d-4e0f-8b1a-2c3d4e5f6a7b'
- `userId`: 'a1b2c3d4-e5f6-7a8b-9c0d-1e2f3a4b5c6d'
- `clientId`: 'Client Corp'
- `invoiceNumber`: 'INV-001'
- `issueDate`: '2023-10-26'
- `dueDate`: '2023-11-25'
- `amount`: 1250.00
- `currency`: 'EUR'
- `status`: 'Draft'
- `items`: [
{ `description`: 'Web Development Services', `quantity`: 50, `unitPrice`: 20.00, `taxRate`: 20.00 },
{ `description`: 'Consulting Hours', `quantity`: 10, `unitPrice`: 50.00, `taxRate`: 20.00 }
]
2. Invoice 2 (Sent):
- `id`: 'f1e0d9c8-7b6a-5d4c-9e8f-0a1b2c3d4e5f'
- `userId`: 'a1b2c3d4-e5f6-7a8b-9c0d-1e2f3a4b5c6d'
- `clientId`: 'Tech Solutions Ltd.'
- `invoiceNumber`: 'INV-002'
- `issueDate`: '2023-10-20'
- `dueDate`: '2023-11-19'
- `amount`: 750.50
- `currency`: 'EUR'
- `status`: 'Sent'
- `items`: [
{ `description`: 'SaaS Subscription - 1 Year', `quantity`: 1, `unitPrice`: 625.42, `taxRate`: 20.00 },
{ `description`: 'Setup Fee', `quantity`: 1, `unitPrice`: 125.08, `taxRate`: 20.00 }
]
3. Invoice 3 (Paid):
- `id`: 'a2b3c4d5-e6f7-8a9b-0c1d-2e3f4a5b6c7d'
- `userId`: 'a1b2c3d4-e5f6-7a8b-9c0d-1e2f3a4b5c6d'
- `clientId`: 'Global Services Inc.'
- `invoiceNumber`: 'INV-003'
- `issueDate`: '2023-09-15'
- `dueDate`: '2023-10-15'
- `amount`: 2500.00
- `currency`: 'EUR'
- `status`: 'Paid'
- `items`: [
{ `description`: 'Project Alpha - Phase 2', `quantity`: 1, `unitPrice`: 2500.00, `taxRate`: 0.00 } // Assuming 0% tax for specific services
]
4. Invoice 4 (Overdue):
- `id`: 'b3c4d5e6-f7a8-9b0c-1d2e-3f4a5b6c7d8e'
- `userId`: 'a1b2c3d4-e5f6-7a8b-9c0d-1e2f3a4b5c6d'
- `clientId`: 'Local Business'
- `invoiceNumber`: 'INV-004'
- `issueDate`: '2023-09-01'
- `dueDate`: '2023-10-01'
- `amount`: 450.75
- `currency`: 'EUR'
- `status`: 'Overdue'
- `items`: [
{ `description`: 'Monthly Retainer Fee', `quantity`: 1, `unitPrice`: 450.75, `taxRate`: 20.00 }
]
5. Empty Invoice List State:
- No records in `invoices` table for the user. UI should display a message like 'You have not created any invoices yet.' and a 'Create Invoice' button.
6. User Profile Data:
- `id`: 'a1b2c3d4-e5f6-7a8b-9c0d-1e2f3a4b5c6d'
- `email`: 'founder@example.com'
- `firstName`: 'Max'
- `lastName`: 'Mustermann'
- `countryOfResidence`: 'Germany'
- `eResidencyStatus`: 'Approved'
- `companyName`: 'SaaSify GmbH'
- `companyRegistrationNumber`: '12345678'
- `companyAddress`: '123 Business St, Berlin, Germany'
7. E-Residency Application Data (Example):
- `userId`: 'a1b2c3d4-e5f6-7a8b-9c0d-1e2f3a4b5c6d'
- `eResidencyApplicationId`: 'ER-987654321'
- `eResidencyStatus`: 'Applied'
- `documents`: [
{ `documentType`: 'PassportScan', `storagePath`: '/uploads/user1/passport.pdf', `fileName`: 'passport.pdf', `status`: 'Verified' },
{ `documentType`: 'ProofOfAddress', `storagePath`: '/uploads/user1/address.jpg', `fileName`: 'address.jpg', `status`: 'Pending' }
]
TURKISH TRANSLATIONS:
- App Title: Estonya Kolaylığı
- Dashboard: Kontrol Paneli
- E-Residency: E-Sakinlik
- Company: Şirket
- Incorporation: Kuruluş
- Invoices: Faturalar
- Create Invoice: Fatura Oluştur
- Settings: Ayarlar
- Login: Giriş Yap
- Sign Up: Kayıt Ol
- Save: Kaydet
- Submit: Gönder
- Cancel: İptal
- Status: Durum
- Draft: Taslak
- Sent: Gönderildi
- Paid: Ödendi
- Overdue: Gecikmiş
- Client: Müşteri
- Invoice Number: Fatura No
- Issue Date: Düzenlenme Tarihi
- Due Date: Vade Tarihi
- Amount: Tutar
- Action: İşlem
- No data available: Veri bulunamadı
- Upload Document: Belge Yükle
- Upload successful: Yükleme başarılı
- Application submitted: Başvuru gönderildi
- Company details saved: Şirket bilgileri kaydedildi
- Welcome: Hoş Geldiniz
- Your Dashboard: Kontrol Paneli
- Get Started: Başlayın
- Learn More: Daha Fazla Bilgi
- Get your Estonian e-Residency: Estonya E-Sakinliğinizi Alın
- Manage your company online: Şirketinizi online yönetin
- Create professional invoices: Profesyonel faturalar oluşturun
- Your business, simplified.: İşiniz, basitleştirildi.
- Fill in your company details: Şirket bilgilerinizi doldurun
- Upload required documents: Gerekli belgeleri yükleyin
- Track your application status: Başvuru durumunuzu takip edin