PROJECT OVERVIEW:
Build 'Identity Weaver', a next-generation SaaS platform designed to help individuals define, develop, and express their identities beyond their job titles. In an era of increasing automation and AI, people are questioning their sense of self-worth and identity, which is often heavily tied to their professions. Identity Weaver addresses this by providing tools for self-discovery, skill development, and community building around personal passions, values, and interests. The core value proposition is to empower users to build a richer, more resilient sense of self, fostering personal growth and meaningful connections.
TECH STACK:
- Frontend: React (Next.js App Router) with TypeScript
- Styling: Tailwind CSS for utility-first styling
- UI Components: shadcn/ui for accessible and customizable components
- State Management: Zustand or Redux Toolkit (for global state if needed, otherwise component state and context API)
- ORM: Drizzle ORM for type-safe database interactions
- Database: PostgreSQL (or alternative like SQLite for local dev)
- Authentication: NextAuth.js for robust authentication (email/password, OAuth with Google/GitHub)
- Forms: React Hook Form with Zod for schema validation
- Icons: Lucide React
- Date Handling: date-fns
- Animations: Framer Motion
- API Layer: Server Actions and Route Handlers within Next.js
DATABASE SCHEMA:
1. **Users Table:**
* `id` (UUID, Primary Key)
* `email` (VARCHAR, Unique, Not Null)
* `hashedPassword` (VARCHAR, Nullable)
* `name` (VARCHAR, Nullable)
* `image` (VARCHAR, Nullable)
* `createdAt` (TIMESTAMP, Default: NOW())
* `updatedAt` (TIMESTAMP, Default: NOW())
2. **Profiles Table:**
* `id` (UUID, Primary Key)
* `userId` (UUID, Foreign Key to Users.id, Unique, Not Null)
* `bio` (TEXT, Nullable)
* `location` (VARCHAR, Nullable)
* `website` (VARCHAR, Nullable)
* `createdAt` (TIMESTAMP, Default: NOW())
* `updatedAt` (TIMESTAMP, Default: NOW())
3. **Interests Table:**
* `id` (UUID, Primary Key)
* `name` (VARCHAR, Unique, Not Null)
* `description` (TEXT, Nullable)
4. **Skills Table:**
* `id` (UUID, Primary Key)
* `name` (VARCHAR, Unique, Not Null)
* `category` (VARCHAR, Nullable) // e.g., 'Technical', 'Creative', 'Soft Skill'
5. **Values Table:**
* `id` (UUID, Primary Key)
* `name` (VARCHAR, Unique, Not Null)
* `description` (TEXT, Nullable)
6. **UserInterests Table (Many-to-Many):**
* `userId` (UUID, Foreign Key to Users.id, Not Null)
* `interestId` (UUID, Foreign Key to Interests.id, Not Null)
* PRIMARY KEY (`userId`, `interestId`)
7. **UserSkills Table (Many-to-Many):**
* `userId` (UUID, Foreign Key to Users.id, Not Null)
* `skillId` (UUID, Foreign Key to Skills.id, Not Null)
* `proficiencyLevel` (INTEGER, Nullable) // e.g., 1-5
* PRIMARY KEY (`userId`, `skillId`)
8. **UserValues Table (Many-to-Many):**
* `userId` (UUID, Foreign Key to Users.id, Not Null)
* `valueId` (UUID, Foreign Key to Values.id, Not Null)
* PRIMARY KEY (`userId`, `valueId`)
9. **Projects Table:**
* `id` (UUID, Primary Key)
* `userId` (UUID, Foreign Key to Users.id, Not Null)
* `title` (VARCHAR, Not Null)
* `description` (TEXT, Nullable)
* `projectUrl` (VARCHAR, Nullable)
* `startDate` (DATE, Nullable)
* `endDate` (DATE, Nullable)
* `isCompleted` (BOOLEAN, Default: false)
* `createdAt` (TIMESTAMP, Default: NOW())
* `updatedAt` (TIMESTAMP, Default: NOW())
10. **ProjectSkills Table (Many-to-Many):**
* `projectId` (UUID, Foreign Key to Projects.id, Not Null)
* `skillId` (UUID, Foreign Key to Skills.id, Not Null)
* PRIMARY KEY (`projectId`, `skillId`)
11. **Goals Table:**
* `id` (UUID, Primary Key)
* `userId` (UUID, Foreign Key to Users.id, Not Null)
* `title` (VARCHAR, Not Null)
* `description` (TEXT, Nullable)
* `targetDate` (DATE, Nullable)
* `isCompleted` (BOOLEAN, Default: false)
* `createdAt` (TIMESTAMP, Default: NOW())
* `updatedAt` (TIMESTAMP, Default: NOW())
CORE FEATURES & USER FLOW:
**1. Authentication Flow:**
- **Signup:** User provides email and password. Backend validates input, hashes password, creates a new user record. If email is new, creates an empty Profile record linked to the user. Redirects to onboarding or dashboard.
- **Login:** User provides email and password. Backend verifies credentials. If valid, creates a session and redirects to the dashboard. Supports OAuth (Google, GitHub).
- **Logout:** Destroys the user session.
- **Edge Case:** Handle duplicate emails during signup, incorrect password during login, session expiration.
**2. Profile Creation & Management:**
- **Onboarding:** After signup, guide users through setting up their initial profile. Prompt for core interests, skills, and values.
- **Profile Edit:** Users can navigate to a 'Profile Settings' page.
- Add/Remove Interests: Search for interests, select from suggestions, add custom ones.
- Add/Remove Skills: Search for skills, select from suggestions, add custom ones. Optionally rate proficiency.
- Add/Remove Values: Select from a predefined list of core human values.
- Edit Bio, Location, Website.
- **User Flow:** User visits /settings/profile -> fills out fields -> clicks 'Save' -> Server Action updates the Profiles, UserInterests, UserSkills, UserValues tables -> Confirmation message displayed.
- **AI Integration:** Suggest interests/skills based on bio text or past project descriptions (future iteration).
**3. AI-Powered Identity Discovery:**
- **Feature:** A dedicated 'Discover' section.
- **User Flow:** User visits /discover -> AI analyzes their current profile data (interests, skills, values, past projects) -> Generates insights like 'Potential new hobbies based on your interests in X and Y', 'Skills you might want to develop related to your value of Z', 'Career paths that align with your profile'. -> Presents these insights visually with links to relevant resources or community groups.
- **Data Fetching:** API route (`/api/ai/discover`) takes user profile data, sends to an AI service (e.g., OpenAI API), processes response, returns formatted insights.
**4. Project Showcase:**
- **Feature:** Users can list personal projects (non-work related primarily).
- **User Flow:** User visits /projects/new -> Fills out Project form (Title, Description, URL, Skills used, Start/End Dates) -> Submits via Server Action -> Creates new records in Projects and ProjectSkills tables.
- **Project View:** User visits /projects/{projectId} -> Displays project details, associated skills, and creator's profile link.
- **Display:** Projects are listed on the user's main profile page and potentially in a community feed.
- **Edge Case:** Handle missing URLs, incomplete date ranges.
**5. Goal Setting & Tracking:**
- **Feature:** Users can define personal growth goals.
- **User Flow:** User visits /goals/new -> Enters Goal Title, Description, optional Target Date -> Submits via Server Action -> Creates new record in Goals table.
- **Tracking:** User can mark goals as 'Completed'. Progress visualization (e.g., percentage of goals completed, upcoming deadlines) on the dashboard.
- **Edge Case:** Past-due goal notifications.
API & DATA FETCHING:
- **API Routes/Server Actions:** Primarily use Next.js Server Actions for form submissions and mutations (CRUD operations). Use Route Handlers for read-heavy operations or external API integrations.
- **Data Fetching:** Fetch data within Server Components where possible. Use `fetch` with caching disabled for dynamic data or mutations. For client-side fetching (e.g., in modals or dynamic searches), use dedicated API routes and libraries like SWR or react-query.
- **Example API Route (Conceptual):**
```typescript
// app/api/ai/discover/route.ts
import { NextResponse } from 'next/server';
// ... import auth, db client, AI SDK ...
export async function POST(request: Request) {
const session = await auth();
if (!session?.user?.id) {
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
}
const { interests, skills, values } = await request.json(); // Or fetch from DB based on userId
// Call AI service with user profile data
const aiResponse = await callAIService(interests, skills, values);
// Process and format response
const insights = formatAiResponse(aiResponse);
return NextResponse.json(insights);
}
```
- **Data Transfer:** Server Components fetch data directly. Client Components fetch data via API routes or Server Actions, receiving JSON payloads.
COMPONENT BREAKDOWN (Next.js App Router):
- **`app/layout.tsx`**: Root layout, includes global styles, providers (e.g., ThemeProvider), and main structure.
- **`app/page.tsx`**: Landing Page (public access). High-level value proposition, feature highlights, CTA for signup.
- **`app/(auth)/signin/page.tsx`**: Sign-in form page.
- **`app/(auth)/signup/page.tsx`**: Sign-up form page.
- **`app/(auth)/layout.tsx`**: Shared layout for auth pages (e.g., centered card).
- **`app/(app)/layout.tsx`**: Main application layout (protected). Includes sidebar/navbar, main content area.
- **`app/(app)/dashboard/page.tsx`**: User dashboard. Summary of goals, recent activity, suggested connections/content. Needs data fetching for user-specific info.
- **`app/(app)/profile/[userId]/page.tsx`**: Public profile view. Displays user's bio, interests, skills, projects. Fetch user data based on `userId` param.
- **`app/(app)/settings/page.tsx`**: Settings index page.
- **`app/(app)/settings/profile/page.tsx`**: Edit profile form (Bio, Location, Website). Uses Server Actions for updates.
- **`app/(app)/settings/interests/page.tsx`**: Manage interests. Combines search/add functionality. Uses Server Actions.
- **`app/(app)/settings/skills/page.tsx`**: Manage skills. Similar to interests. Uses Server Actions.
- **`app/(app)/settings/values/page.tsx`**: Manage values. Select from list. Uses Server Actions.
- **`app/(app)/projects/new/page.tsx`**: Form to add a new project. Uses Server Actions.
- **`app/(app)/projects/[projectId]/page.tsx`**: View a specific project's details.
- **`app/(app)/goals/new/page.tsx`**: Form to add a new goal. Uses Server Actions.
- **`app/(app)/discover/page.tsx`**: AI-driven discovery section. Fetches insights from API route.
**UI Components (shared/components/):**
- `Navbar.tsx`: Top navigation bar (links, user menu).
- `Sidebar.tsx`: Left-hand navigation (for authenticated users).
- `ProfileCard.tsx`: Displays summary of user profile info.
- `InterestTag.tsx`, `SkillTag.tsx`, `ValueTag.tsx`: Displaying tags.
- `ProjectCard.tsx`: Displays a project summary.
- `GoalCard.tsx`: Displays a goal summary.
- `AuthForm.tsx`: Reusable form for signin/signup.
- `FormInput.tsx`, `FormTextarea.tsx`, `FormSelect.tsx`: Custom form elements using shadcn/ui and React Hook Form.
- `A IInsightCard.tsx`: Displays AI-generated insights.
- `Button.tsx`, `Input.tsx`, `Card.tsx`, `Dialog.tsx`, etc. (from shadcn/ui).
**State Management:**
- Local component state for form inputs, UI toggles.
- Context API or Zustand for global state like theme, user authentication status (though NextAuth.js handles much of this).
- Server Actions manage the state updates on the backend.
UI/UX DESIGN & VISUAL IDENTITY:
- **Style:** Minimalist Clean with subtle gradient accents.
- **Color Palette:**
- Primary: `#4A90E2` (Calm Blue)
- Secondary: `#50E3C2` (Vibrant Teal)
- Accent: `#F5A623` (Warm Orange)
- Background: `#FFFFFF` (White)
- Dark Background (for sections/cards): `#F8F9FA`
- Text (Dark): `#212529`
- Text (Light/On Dark): `#F8F9FA`
- **Typography:**
- Headings: Inter (Variable Font, Bold)
- Body Text: Inter (Variable Font, Regular)
- **Layout:** Clean, card-based layouts for profile sections, projects, and goals. Use a two-column structure on wider screens (Sidebar + Content), single column on mobile. Generous whitespace.
- **Visuals:** Abstract, softly blurred background gradients for hero sections and key interactive elements. Subtle use of icons (Lucide React).
- **Animations:**
- Page Transitions: Smooth fades/slides using Framer Motion.
- Hover Effects: Subtle scaling or background color changes on interactive elements (buttons, cards).
- Loading States: Skeleton loaders or spinners integrated into content areas during data fetching.
- **Responsive Rules:** Mobile-first approach. Ensure usability on all screen sizes. Sidebar collapses into a hamburger menu on mobile. Content reflows gracefully.
ANIMATIONS:
- **Page Transitions:** Use `AnimatePresence` from Framer Motion for smooth enter/exit animations on route changes.
- **Element Interactions:** Apply subtle `whileHover` and `whileTap` effects on buttons and interactive cards (e.g., `scale: 1.02`, `shadow`).
- **Loading Indicators:** Implement skeleton screens for content sections that take time to load, or use `Spinner` components from shadcn/ui within buttons during form submissions.
- **Entrance Animations:** Use `motion.div` with `initial`, `animate`, `transition` props to fade/slide in components as they enter the viewport or are rendered.
EDGE CASES:
- **Authentication:** Handle expired sessions, redirect to login. Prevent access to protected routes if not authenticated.
- **Form Validation:** Implement real-time validation using Zod and React Hook Form on all user inputs. Display clear error messages next to fields.
- **Empty States:** Design specific UI for when lists are empty (e.g., no projects, no goals, no interests added). Provide clear calls to action to add content.
- **Data Fetching Errors:** Implement error boundaries and display user-friendly error messages if data fetching fails. Provide retry options where applicable.
- **API Errors:** Gracefully handle errors returned from API routes or Server Actions (e.g., database constraints, external service failures). Inform the user without crashing the app.
- **Permissions:** Ensure users can only edit their own profile and manage their own data.
SAMPLE/MOCK DATA:
1. **User:**
```json
{ "id": "user-uuid-1", "name": "Alice Wonderland", "email": "alice@example.com", "image": "/images/avatars/alice.png" }
```
2. **Profile:**
```json
{ "userId": "user-uuid-1", "bio": "Exploring the intersection of creativity and technology. Passionate about storytelling and building meaningful digital experiences.", "location": "Online", "website": "https://alice.dev" }
```
3. **Interests:** (Array for User 1)
```json
[ { "id": "interest-1", "name": "Digital Art" }, { "id": "interest-2", "name": "Creative Writing" }, { "id": "interest-3", "name": "Human-Computer Interaction" } ]
```
4. **Skills:** (Array for User 1)
```json
[ { "id": "skill-1", "name": "UI/UX Design", "proficiencyLevel": 4 }, { "id": "skill-2", "name": "React", "proficiencyLevel": 5 }, { "id": "skill-3", "name": "Storytelling", "proficiencyLevel": 3 } ]
```
5. **Values:** (Array for User 1)
```json
[ { "id": "value-1", "name": "Creativity" }, { "id": "value-2", "name": "Curiosity" } ]
```
6. **Project:**
```json
{ "id": "proj-uuid-1", "userId": "user-uuid-1", "title": "Personal Portfolio Site", "description": "Built a dynamic portfolio using Next.js and Tailwind CSS to showcase projects and skills.", "projectUrl": "https://alice.dev", "skills": ["skill-2", "skill-1"], "isCompleted": true, "startDate": "2023-01-15" }
```
7. **Goal:**
```json
{ "id": "goal-uuid-1", "userId": "user-uuid-1", "title": "Learn Advanced Drizzle ORM Techniques", "description": "Deep dive into advanced Drizzle features for complex queries.", "targetDate": "2024-08-31", "isCompleted": false }
```
8. **AI Insight Example:**
```json
{ "title": "Explore Generative Art", "description": "Given your interest in Digital Art and Creativity, you might enjoy exploring generative art tools like p5.js or Processing.", "relatedInterest": "Generative Art", "actionable": true }
```
9. **Empty Project List State:**
```html
<div class="text-center py-10">
<h3 class="text-lg font-medium">No Projects Yet</h3>
<p class="text-muted-foreground">Start showcasing your creations!</p>
<Button variant="outline" class="mt-4">Add Your First Project</Button>
</div>
```
10. **Skill Suggestion:**
```json
{ "id": "skill-4", "name": "Python", "suggestionReason": "Often used in conjunction with Data Science, which aligns with your interest in HCI." }
```
TURKISH TRANSLATIONS:
- **App Title:** Kimlik Dokumacısı (Identity Weaver)
- **Nav:** Gösterge Paneli (Dashboard), Profilim (My Profile), Projelerim (My Projects), Hedeflerim (My Goals), Keşfet (Discover), Ayarlar (Settings)
- **Buttons:** Kaydet (Save), Düzenle (Edit), Oluştur (Create), Ekle (Add), Gönder (Submit), Oturum Aç (Sign In), Kayıt Ol (Sign Up), Çıkış Yap (Logout)
- **Labels:** Ad Soyad (Name), E-posta (Email), Şifre (Password), Biyo (Bio), Konum (Location), Web Sitesi (Website), İlgi Alanı (Interest), Beceri (Skill), Değer (Value), Yetkinlik Seviyesi (Proficiency Level), Başlangıç Tarihi (Start Date), Bitiş Tarihi (End Date), Hedef Tarihi (Target Date), Proje Başlığı (Project Title), Proje Açıklaması (Project Description)
- **Placeholders:** İlgi alanlarını ara... (Search interests...)
- **Messages:** Profil başarıyla güncellendi (Profile updated successfully), Proje başarıyla eklendi (Project added successfully), Bir hata oluştu (An error occurred)
- **Section Titles:** Hakkımda (About Me), Yeteneklerim (My Skills), İlgi Alanlarım (My Interests), Değerlerim (My Values), Tamamlanan Projeler (Completed Projects), Aktif Hedefler (Active Goals)
- **AI Insights:** Önerilen Yeni Hobiler (Suggested New Hobbies), Geliştirilebilecek Yetenekler (Skills to Develop), Uyumlu Kariyer Yolları (Aligned Career Paths)
- **Empty States:** Henüz proje yok. (No projects yet.), Daha fazlasını keşfedin. (Discover more.)