Generate a fully functional Next.js MVP application for 'Access For All', a platform designed to bridge the digital divide for individuals lacking smartphones or advanced digital literacy. This application will empower users to manage digital tickets, book appointments, and access other essential online services with the assistance of trusted helpers or community volunteers.
PROJECT OVERVIEW:
The core problem this application addresses is the increasing exclusion of individuals, particularly the elderly, from accessing services that are moving exclusively to digital, smartphone-dependent platforms. The "Access For All" platform provides a user-friendly, accessible interface enabling users to manage their digital lives without needing a smartphone. It facilitates ticket management (e.g., sports events, concerts), appointment booking, and other essential digital interactions through a guided, assisted process. The value proposition is digital inclusion, independence for the digitally excluded, and peace of mind for their families.
TECH STACK:
- Framework: Next.js (App Router)
- Language: TypeScript
- Styling: Tailwind CSS
- ORM: Drizzle ORM (PostgreSQL compatible)
- Database: PostgreSQL (or a compatible alternative like SQLite for local dev)
- Authentication: NextAuth.js (or Clerk for simpler integration)
- UI Components: shadcn/ui
- State Management: React Context API / Zustand (for simpler global states)
- Form Handling: React Hook Form + Zod for validation
- Icons: Lucide React
- Date/Time Handling: date-fns
- Deployment: Vercel
- Other: React Query (for efficient data fetching), pnpm (package manager)
DATABASE SCHEMA (PostgreSQL with Drizzle ORM):
1. `users` Table:
- `id` UUID PRIMARY KEY DEFAULT gen_random_uuid()
- `name` VARCHAR(255) NOT NULL
- `email` VARCHAR(255) UNIQUE NOT NULL
- `hashedPassword` VARCHAR(255) NOT NULL
- `createdAt` TIMESTAMPTZ DEFAULT now()
- `updatedAt` TIMESTAMPTZ DEFAULT now()
- `role` ENUM('user', 'helper', 'admin') DEFAULT 'user'
- `avatarUrl` TEXT
2. `tickets` Table:
- `id` UUID PRIMARY KEY DEFAULT gen_random_uuid()
- `userId` UUID REFERENCES `users`(`id`) ON DELETE CASCADE
- `title` VARCHAR(255) NOT NULL
- `eventDate` DATE NOT NULL
- `venue` VARCHAR(255)
- `qrCodeUrl` TEXT // URL to the QR code image/data
- `purchaseDate` DATE
- `notes` TEXT
- `createdAt` TIMESTAMPTZ DEFAULT now()
- `updatedAt` TIMESTAMPTZ DEFAULT now()
- `assignedHelperId` UUID REFERENCES `users`(`id`) ON DELETE SET NULL // If a helper is assigned
- `status` ENUM('pending', 'active', 'used', 'transferred', 'cancelled') DEFAULT 'pending'
3. `appointments` Table:
- `id` UUID PRIMARY KEY DEFAULT gen_random_uuid()
- `userId` UUID REFERENCES `users`(`id`) ON DELETE CASCADE
- `title` VARCHAR(255) NOT NULL
- `appointmentDateTime` TIMESTAMPTZ NOT NULL
- `location` VARCHAR(255)
- `notes` TEXT
- `createdAt` TIMESTAMPTZ DEFAULT now()
- `updatedAt` TIMESTAMPTZ DEFAULT now()
- `assignedHelperId` UUID REFERENCES `users`(`id`) ON DELETE SET NULL
- `status` ENUM('scheduled', 'completed', 'rescheduled', 'cancelled') DEFAULT 'scheduled'
4. `requests` Table (for general assistance, linked to tickets/appointments or standalone):
- `id` UUID PRIMARY KEY DEFAULT gen_random_uuid()
- `requesterId` UUID REFERENCES `users`(`id`) ON DELETE CASCADE
- `helperId` UUID REFERENCES `users`(`id`) ON DELETE SET NULL // Assigned helper
- `type` ENUM('ticket_purchase', 'ticket_transfer', 'appointment_booking', 'general_query') NOT NULL
- `details` TEXT NOT NULL
- `status` ENUM('open', 'assigned', 'in_progress', 'resolved', 'closed') DEFAULT 'open'
- `createdAt` TIMESTAMPTZ DEFAULT now()
- `updatedAt` TIMESTAMPTZ DEFAULT now()
- `relatedTicketId` UUID REFERENCES `tickets`(`id`) ON DELETE SET NULL
- `relatedAppointmentId` UUID REFERENCES `appointments`(`id`) ON DELETE SET NULL
5. `trustedHelpers` Table (Many-to-many relationship between users and their trusted helpers):
- `userId` UUID REFERENCES `users`(`id`) ON DELETE CASCADE
- `helperId` UUID REFERENCES `users`(`id`) ON DELETE CASCADE
- `addedAt` TIMESTAMPTZ DEFAULT now()
- PRIMARY KEY (`userId`, `helperId`)
CORE FEATURES & USER FLOW:
1. **Authentication (Sign Up / Sign In)**:
- Flow:
a. User lands on the homepage.
b. Clicks 'Sign Up' or 'Sign In'.
c. If 'Sign Up': Enters name, email, password. Selects role ('User' or 'Helper'). 'Admin' role assigned manually by system admin.
d. If 'Sign In': Enters email and password.
e. Redirected to dashboard upon successful authentication.
f. Password reset functionality via email.
- Edge Cases: Invalid credentials, duplicate email, weak password, role selection validation.
2. **Dashboard (User View)**:
- Flow:
a. Displays a summary of user's active tickets and upcoming appointments.
b. Shows pending assistance requests.
c. Quick access buttons: 'Add Ticket', 'Book Appointment', 'Request Help'.
d. Navigation to Tickets, Appointments, Requests, Settings, Trusted Helpers.
- Edge Cases: Empty states for tickets, appointments, and requests.
3. **Ticket Management (User & Helper View)**:
- User Flow (Adding a Ticket):
a. Clicks 'Add Ticket'.
b. Fills a form: Title (e.g., 'Dodgers Game'), Event Date, Venue, optional Notes. Can upload QR code image/link.
c. Ticket is saved and appears in 'My Tickets'.
- User Flow (Viewing/Managing Ticket):
a. Navigates to 'My Tickets'.
b. Clicks on a ticket to view details (includes QR code display).
c. Options: 'Transfer Ticket' (initiates request to helper), 'Mark as Used', 'Cancel Ticket'.
- Helper Flow (Viewing Assigned Tickets):
a. Navigates to 'Assigned Tickets'.
b. Can view ticket details, QR codes.
c. Can perform actions like transfer on behalf of the user if requested.
- Edge Cases: Invalid date formats, missing required fields, ticket status updates.
4. **Appointment Booking (User & Helper View)**:
- User Flow (Booking Appointment):
a. Clicks 'Book Appointment'.
b. Fills a form: Title (e.g., 'Doctor Visit'), desired Date/Time, Location, optional Notes.
c. Saves the request, which can be picked up by a helper or handled directly if the user has high enough confidence/permissions.
- Helper Flow (Handling Appointment Requests):
a. Navigates to 'Assistance Requests'.
b. Sees requests for appointment booking.
c. Can accept the request, interact with the user for details, and book the appointment.
d. Books appointment via external system (simulated/API) or manually updates the record.
e. Updates the status to 'Scheduled'.
- Edge Cases: Time conflicts, unavailability of helper, incorrect details provided by user.
5. **Assistance Request System (User & Helper View)**:
- User Flow (Requesting Help):
a. Clicks 'Request Help'.
b. Selects type of request (Ticket Help, Appointment Help, General Query).
c. Enters details.
d. Submits the request. The system can notify their 'Trusted Helpers' or available 'Community Helpers'.
- Helper Flow (Responding to Requests):
a. Navigates to 'Incoming Requests'.
b. Sees a list of requests, sortable by type, date, urgency.
c. Can 'Accept' a request. The status changes to 'Assigned'.
d. Can communicate with the user (in-app chat feature - future MVP, or via email notifications for MVP).
e. Performs the requested action (e.g., buys ticket, books appointment).
f. Updates the request status to 'Resolved' or 'Closed'.
- Edge Cases: Request remains unassigned, helper becomes unavailable, user dispute.
6. **Trusted Helpers Management (User View)**:
- Flow:
a. User navigates to 'Trusted Helpers'.
b. Can invite new helpers by email (they receive an invite link to sign up).
c. Can view list of current trusted helpers.
d. Can remove trusted helpers.
- Edge Cases: Invalid email format for invitation, helper already exists.
API & DATA FETCHING:
- Utilize Next.js API Routes (App Router) for backend logic.
- Endpoints will be defined within `src/app/api/` directory.
- Data fetching in components will primarily use `fetch` (for server components) or React Query (for client components) leveraging server actions or API routes.
- Example API Route: `src/app/api/tickets/route.ts`
- `GET /api/tickets`: Fetch tickets for the logged-in user.
- `POST /api/tickets`: Create a new ticket.
- `PUT /api/tickets/[id]`: Update a ticket.
- `DELETE /api/tickets/[id]`: Delete a ticket.
- Request/Response Bodies will be JSON.
- Example `POST /api/tickets` Request Body:
```json
{
"title": "Dodgers Game",
"eventDate": "2024-08-15",
"venue": "Dodger Stadium",
"notes": "Need assistance transferring this ticket later."
}
```
- Example `GET /api/tickets` Response Body (for user):
```json
[
{
"id": "uuid-string-1",
"title": "Dodgers Game",
"eventDate": "2024-08-15",
"status": "active",
"qrCodeUrl": "/path/to/qr.png"
}
]
```
COMPONENT BREAKDOWN (Next.js App Router Structure):
- `src/app/`
- `layout.tsx`: Root layout (html, body, global providers, shadcn/ui ThemeProvider).
- `page.tsx`: Homepage (Marketing/Landing page for public, redirect to dashboard for logged in).
- `auth/`
- `page.tsx`: Sign In / Sign Up form.
- `reset-password/page.tsx`: Password reset form.
- `dashboard/`
- `page.tsx`: User dashboard (summary view).
- `tickets/`
- `page.tsx`: List of user's tickets.
- `[id]/page.tsx`: View/Edit single ticket details.
- `new/page.tsx`: Form to add a new ticket.
- `appointments/`
- `page.tsx`: List of user's appointments.
- `[id]/page.tsx`: View/Edit single appointment details.
- `new/page.tsx`: Form to book a new appointment.
- `requests/`
- `page.tsx`: List of user's assistance requests / assigned requests for helpers.
- `new/page.tsx`: Form to create a new assistance request.
- `helpers/`
- `page.tsx`: Manage trusted helpers (invite, view, remove).
- `settings/`
- `page.tsx`: User profile settings (edit name, email, password, avatar).
- `api/` (API Routes)
- `auth/[...nextauth]/route.ts`: NextAuth.js handler.
- `tickets/route.ts`: Ticket CRUD endpoints.
- `appointments/route.ts`: Appointment CRUD endpoints.
- `requests/route.ts`: Request CRUD endpoints.
- `helpers/route.ts`: Trusted helper management endpoints.
- `src/components/`
- `ui/`: Re-exports from shadcn/ui (Button, Input, Card, Dialog, Form, etc.).
- `auth/`: Auth-related components (e.g., SignInForm, SignUpForm).
- `layout/`: Navigation (Navbar, Sidebar), Footer.
- `tickets/`: TicketCard, TicketForm, TicketDetailView, QRDisplay.
- `appointments/`: AppointmentCard, AppointmentForm, AppointmentDetailView.
- `requests/`: RequestCard, RequestForm, RequestStatusBadge.
- `helpers/`: HelperInvitationForm, HelperListItem.
- `common/`: LoadingSpinner, ErrorMessage, EmptyStatePlaceholder, PageHeader.
- `DashboardSummary.tsx`: Component for the dashboard widgets.
State Management:
- Server Components will fetch data directly from DB using Drizzle ORM via Server Actions.
- Client Components will use React Context or Zustand for global UI states (e.g., theme, sidebar open/closed) and React Query for server-state management (fetching, caching, mutating data from API routes).
UI/UX DESIGN & VISUAL IDENTITY:
- **Style**: "Minimalist Clean" with a touch of warmth and accessibility.
- **Color Palette**:
- Primary: `#4A90E2` (Accessible Blue)
- Secondary: `#50E3C2` (Calm Teal)
- Accent: `#F5A623` (Warm Orange for CTAs)
- Neutral Background: `#F8F9FA` (Very Light Gray)
- Text: `#333333` (Dark Gray)
- Borders/Dividers: `#E0E0E0` (Light Gray)
- **Typography**:
- Font Family: Inter (Clean, readable sans-serif)
- Headings: Inter Bold (e.g., H1: 36px, H2: 30px)
- Body Text: Inter Regular (16px, line-height 1.6)
- **Layout**:
- Use a consistent grid system (e.g., 12-column responsive grid).
- Ample whitespace.
- Clear visual hierarchy.
- Sticky header/navbar for easy navigation.
- **Components**: Utilize shadcn/ui components for consistency and accessibility.
- **Responsiveness**: Mobile-first approach. Ensure usability on various screen sizes, prioritizing large touch targets and clear readability on smaller screens.
- **Accessibility**: Adhere to WCAG guidelines (contrast ratios, keyboard navigation, ARIA attributes).
ANIMATIONS:
- Subtle page transitions (fade/slide) using `Framer Motion` or Next.js's built-in features.
- Button hover effects (slight scale-up or color change).
- Loading states with `LoadingSpinner` components (e.g., on data fetch or form submission).
- Smooth expansion/collapse animations for accordions or expandable sections.
EDGE CASES:
- **Empty States**: For tickets, appointments, requests, and helpers lists, display user-friendly messages with clear calls to action (e.g., "You have no tickets yet. Click here to add one.").
- **Authentication**: Robust handling of logged-in vs. logged-out states. Protected routes redirect unauthenticated users to the login page.
- **Authorization**: Ensure users can only access/modify their own data, while helpers can only act on assigned tasks or requests they've accepted.
- **Form Validation**: Real-time validation using React Hook Form and Zod for all user inputs. Display clear error messages next to the relevant fields.
- **Error Handling**: Global error handling middleware/component. Specific error messages for API failures, database errors, or unexpected issues. Display user-friendly error messages (e.g., "Could not load tickets. Please try again later.").
- **Data Persistence**: Ensure data is saved correctly to the database. Handle potential network failures during submission.
- **Permissions**: Differentiate clearly between 'User' and 'Helper' roles and their capabilities.
SAMPLE DATA:
1. **User (Alice, 81yo)**:
- `id`: `uuid-alice`
- `name`: "Alice"
- `email`: "alice@example.com"
- `role`: "user"
2. **Helper (Bob, Tech-Savvy Grandson)**:
- `id`: `uuid-bob`
- `name`: "Bob"
- `email`: "bob@example.com"
- `role`: "helper"
3. **Trusted Helper Relationship**:
- `userId`: `uuid-alice`
- `helperId`: `uuid-bob`
4. **Ticket (Dodgers Game)**:
- `id`: `uuid-ticket-dodgers`
- `userId`: `uuid-alice`
- `title`: "Dodgers vs Giants"
- `eventDate`: "2024-08-15"
- `venue`: "Dodger Stadium"
- `status`: "active"
- `qrCodeUrl`: "/mock/qr-dodgers.png"
5. **Appointment (Doctor's Visit)**:
- `id`: `uuid-appt-doctor`
- `userId`: `uuid-alice`
- `title`: "Annual Check-up"
- `appointmentDateTime`: "2024-07-20T10:30:00Z"
- `location`: "Downtown Medical Center"
- `status`: "scheduled"
6. **Assistance Request (Ticket Transfer)**:
- `id`: `uuid-req-transfer`
- `requesterId`: `uuid-alice`
- `helperId`: `uuid-bob` (assigned)
- `type`: "ticket_transfer"
- `details`: "Need to transfer the Dodgers ticket to my friend John for Aug 15th."
- `status`: "assigned"
- `relatedTicketId`: `uuid-ticket-dodgers`
7. **Ticket (Concert)**:
- `id`: `uuid-ticket-concert`
- `userId`: `uuid-alice`
- `title`: "Local Band Concert"
- `eventDate`: "2024-09-01"
- `venue`: "The Music Hall"
- `status`: "pending"
8. **Appointment (Dentist)**:
- `id`: `uuid-appt-dentist`
- `userId`: `uuid-alice`
- `title`: "Dental Cleaning"
- `appointmentDateTime`: "2024-08-05T14:00:00Z"
- `location`: "City Dental Clinic"
- `status`: "scheduled"
9. **Helper (Community Volunteer)**:
- `id`: `uuid-volunteer`
- `name`: "Sarah"
- `email`: "sarah.v@example.com"
- `role`: "helper"
10. **General Assistance Request**:
- `id`: `uuid-req-general`
- `requesterId`: `uuid-alice`
- `helperId`: null
- `type`: "general_query"
- `details`: "How do I update my contact information on the portal?"
- `status`: "open"
TURKISH TRANSLATIONS (for UI text examples):
- 'Sign Up': 'Kayıt Ol'
- 'Sign In': 'Giriş Yap'
- 'Dashboard': 'Kontrol Paneli'
- 'My Tickets': 'Biletlerim'
- 'Appointments': 'Randevularım'
- 'Requests': 'Yardım Taleplerim'
- 'Settings': 'Ayarlar'
- 'Trusted Helpers': 'Güvenilir Yardımcılar'
- 'Add Ticket': 'Bilet Ekle'
- 'Book Appointment': 'Randevu Al'
- 'Request Help': 'Yardım İste'
- 'Event Date': 'Etkinlik Tarihi'
- 'Venue': 'Mekan'
- 'Notes': 'Notlar'
- 'Status': 'Durum'
- 'Active': 'Aktif'
- 'Used': 'Kullanıldı'
- 'Transfer Ticket': 'Bilet Devret'
- 'Appointment Date/Time': 'Randevu Tarihi/Saati'
- 'Location': 'Konum'
- 'Helper': 'Yardımcı'
- 'Assigned': 'Atananmış'
- 'In Progress': 'Devam Ediyor'
- 'Resolved': 'Çözüldü'
- 'Closed': 'Kapalı'
- 'Invite Helper': 'Yardımcı Davet Et'
- 'Edit Profile': 'Profili Düzenle'
- 'Save Changes': 'Değişiklikleri Kaydet'
- 'Submit Request': 'Talebi Gönder'
- 'Error': 'Hata'
- 'Success': 'Başarılı'
- 'Loading...': 'Yükleniyor...'
- 'No data available': 'Veri Bulunamadı'
- 'You have no tickets yet.': 'Henüz biletiniz yok.'