diff --git a/client/pages/Onboarding.tsx b/client/pages/Onboarding.tsx index 9ef7e042..47790179 100644 --- a/client/pages/Onboarding.tsx +++ b/client/pages/Onboarding.tsx @@ -192,11 +192,27 @@ export default function Onboarding() { }; let nextStep = 0; - // Do not restore from localStorage; clear any legacy key + // Restore from localStorage if available (allows users to continue where they left off) if (typeof window !== "undefined") { try { + const saved = window.localStorage.getItem(ONBOARDING_STORAGE_KEY); + if (saved) { + const { currentStep: savedStep, data: savedData, timestamp } = JSON.parse(saved); + // Only restore if saved within last 7 days + const MAX_AGE = 7 * 24 * 60 * 60 * 1000; // 7 days in ms + if (timestamp && Date.now() - timestamp < MAX_AGE) { + nextData = savedData; + nextStep = savedStep; + } else { + // Clear expired data + window.localStorage.removeItem(ONBOARDING_STORAGE_KEY); + } + } + } catch (error) { + console.warn("Failed to restore onboarding progress:", error); + // Clear corrupted data window.localStorage.removeItem(ONBOARDING_STORAGE_KEY); - } catch {} + } } if (user?.id) { @@ -235,13 +251,20 @@ export default function Onboarding() { }; }, [user, steps.length, mapProfileToOnboardingData]); + // Save onboarding progress to localStorage after each change useEffect(() => { - // Disable local persistence for onboarding (but not while finishing) - if (typeof window === "undefined" || isFinishing) return; + if (typeof window === "undefined" || !hydrated || isFinishing) return; try { - window.localStorage.removeItem(ONBOARDING_STORAGE_KEY); - } catch {} - }, [hydrated, isFinishing]); + const progressData = { + currentStep, + data, + timestamp: Date.now(), + }; + window.localStorage.setItem(ONBOARDING_STORAGE_KEY, JSON.stringify(progressData)); + } catch (error) { + console.warn("Failed to save onboarding progress:", error); + } + }, [currentStep, data, hydrated, isFinishing, ONBOARDING_STORAGE_KEY]); const updateData = useCallback((newData: Partial) => { setData((prev) => ({ diff --git a/docs/issues/P0-ISSUES.md b/docs/issues/P0-ISSUES.md new file mode 100644 index 00000000..156480c4 --- /dev/null +++ b/docs/issues/P0-ISSUES.md @@ -0,0 +1,544 @@ +# P0 Priority Issues (Fix ASAP) + +These are critical issues that should be addressed immediately. + +--- + +## Issue 1: [P0] Fix onboarding progress loss on page refresh + +**Labels:** `bug`, `P0`, `onboarding`, `user-experience` + +### Problem +Users lose all onboarding progress when they refresh the page during the multi-step onboarding flow. This leads to high dropout rates and poor user experience. + +### Current Behavior +- User starts onboarding at `/onboarding` +- User completes steps 1-4 of 8-step wizard +- User refreshes page (accidentally or intentionally) +- All progress is lost, user starts from step 1 again + +### Root Cause +Session storage persistence was removed from `client/pages/Onboarding.tsx:238-243`. Progress is now only stored in memory (React state), which is lost on page refresh. + +### Expected Behavior +- Progress should be saved to sessionStorage after each step +- On page load, check sessionStorage for existing progress +- If found, restore user to their last completed step +- Clear sessionStorage only after successful onboarding completion + +### Technical Details +- **File:** `client/pages/Onboarding.tsx` +- **Lines:** 238-243 (where persistence was removed) +- **State to persist:** `currentStep`, `formData`, `userType` + +### Implementation Approach +1. Re-enable sessionStorage persistence with key like `aethex_onboarding_progress` +2. Save state after each step completion +3. On component mount, check for existing progress +4. Restore state if found +5. Add recovery UI: "Continue where you left off?" prompt +6. Clear storage on successful completion + +### Acceptance Criteria +- [ ] Progress persists across page refreshes +- [ ] User can resume from last completed step +- [ ] Storage is cleared after onboarding completes +- [ ] Works across browser tabs (same session) +- [ ] Handles edge cases (corrupted data, version changes) + +### Impact +- **High onboarding dropout rate** +- **Poor first-time user experience** +- **Lost user data and effort** + +--- + +## Issue 2: [P0] Complete Stripe payment integration + +**Labels:** `bug`, `P0`, `payments`, `backend`, `stripe` + +### Problem +The payment flow UI exists but Stripe integration may not be fully implemented. Users cannot upgrade to Pro/Council tiers, preventing monetization. + +### Current Behavior +- Pricing page at `/pricing` shows subscription tiers +- "Upgrade" buttons exist for Pro ($9/mo) and Council ($29/mo) +- Clicking upgrade attempts to call `/api/subscriptions/create-checkout` +- Integration status unknown - needs verification + +### Missing/Incomplete Features +1. **Stripe Checkout Session Creation** + - Verify `/api/subscriptions/create-checkout` endpoint works + - Ensure proper price IDs are configured + - Test redirect flow + +2. **Webhook Handlers** + - `checkout.session.completed` - Create subscription in DB + - `customer.subscription.updated` - Update tier changes + - `customer.subscription.deleted` - Handle cancellations + - `invoice.payment_failed` - Handle failed payments + +3. **Billing Portal** + - "Manage Subscription" button should open Stripe portal + - Verify `/api/subscriptions/manage` endpoint + - Test cancellation and plan changes + +4. **Database Sync** + - Update `profiles.tier` on successful payment + - Track subscription status in DB + - Store Stripe customer ID and subscription ID + +### Technical Details +- **Files:** + - `client/pages/Pricing.tsx` (UI) + - `server/index.ts` or `api/subscriptions/*` (backend) + - Stripe webhooks configuration +- **Environment Variables Needed:** + - `STRIPE_SECRET_KEY` + - `STRIPE_PUBLISHABLE_KEY` + - `STRIPE_WEBHOOK_SECRET` + - Price IDs for Pro and Council tiers + +### Implementation Checklist +- [ ] Verify Stripe API keys are configured +- [ ] Create/verify product and price IDs in Stripe +- [ ] Implement create-checkout endpoint +- [ ] Implement manage-subscription endpoint +- [ ] Set up webhook endpoint +- [ ] Add webhook handlers for all events +- [ ] Test full checkout flow +- [ ] Test subscription management flow +- [ ] Test cancellation flow +- [ ] Add error handling and retry logic + +### Testing Scenarios +1. New user upgrades from Free → Pro +2. Pro user upgrades to Council +3. Council user cancels subscription +4. Payment fails, retry logic +5. User changes payment method +6. User views billing history + +### Acceptance Criteria +- [ ] Users can successfully upgrade to Pro tier +- [ ] Users can successfully upgrade to Council tier +- [ ] Subscription status syncs to database +- [ ] Billing portal opens and works correctly +- [ ] Webhooks properly handle all events +- [ ] Failed payments are handled gracefully +- [ ] Users can cancel subscriptions + +### Impact +- **Cannot monetize the platform** +- **No paid tier access for users** +- **Revenue loss** + +--- + +## Issue 3: [P0] Refactor large components (Feed, ProfilePassport, AuthContext) + +**Labels:** `tech-debt`, `P0`, `refactoring`, `performance` + +### Problem +Several components exceed 900+ lines, making them difficult to maintain, test, and debug. This increases bug risk and slows development velocity. + +### Affected Components + +#### 1. AuthContext.tsx (1,246 lines) +**Location:** `client/contexts/AuthContext.tsx` + +**Current Responsibilities:** (Too many) +- Session management +- OAuth flow handling +- Email resolution logic +- Profile fetching +- Multiple provider linking +- Error handling +- Loading states +- Storage clearing + +**Refactoring Approach:** +- Split into multiple contexts: + - `AuthContext` - Core auth state only + - `SessionContext` - Session management + - `OAuthContext` - OAuth providers + - `ProfileContext` - User profile data +- Extract services: + - `authService.ts` - Auth API calls + - `sessionService.ts` - Session operations + - `oauthService.ts` - OAuth flows + +#### 2. Feed.tsx (958 lines) +**Location:** `client/pages/Feed.tsx` + +**Current Responsibilities:** +- Feed filtering logic +- Post rendering +- Comment handling +- Like/unlike logic +- Follow/unfollow logic +- Trending topics +- Sidebar widgets +- Infinite scroll + +**Refactoring Approach:** +- Extract components: + - `FeedFilters.tsx` - Filter bar + - `FeedList.tsx` - Post list with infinite scroll + - `FeedSidebar.tsx` - Sidebar widgets + - `TrendingTopics.tsx` - Trending widget + - `SuggestedCreators.tsx` - Suggested follows +- Extract hooks: + - `useFeedPosts.ts` - Post fetching logic + - `useFeedFilters.ts` - Filter state + - `usePostInteractions.ts` - Like/comment logic + +#### 3. ProfilePassport.tsx (916 lines) +**Location:** `client/pages/ProfilePassport.tsx` + +**Current Responsibilities:** +- Profile data fetching +- Achievements display +- Projects showcase +- Social connections +- Following/followers +- Ethos Guild integration +- Arm affiliations +- Degree of connection calculation + +**Refactoring Approach:** +- Extract components: + - `PassportHeader.tsx` - Avatar, name, bio + - `PassportStats.tsx` - XP, level, streak + - `PassportAchievements.tsx` - Badges/achievements + - `PassportProjects.tsx` - Project showcase + - `PassportSocial.tsx` - Followers/following + - `PassportConnections.tsx` - Connection graph +- Extract hooks: + - `usePassportData.ts` - Profile fetching + - `useConnectionDegree.ts` - Connection calculation + +### Benefits of Refactoring +- **Easier maintenance** - Smaller files easier to understand +- **Better testability** - Can test components in isolation +- **Improved performance** - Better code splitting opportunities +- **Faster development** - Changes are localized +- **Reduced bugs** - Less complexity = fewer edge cases + +### Implementation Strategy +1. Start with AuthContext (highest impact) +2. Create new smaller contexts/services +3. Migrate logic incrementally +4. Maintain backward compatibility during migration +5. Add tests for each new component +6. Remove old code once fully migrated + +### Acceptance Criteria +- [ ] AuthContext split into 4 smaller contexts +- [ ] Feed.tsx split into 6+ components +- [ ] ProfilePassport.tsx split into 7+ components +- [ ] All functionality still works +- [ ] No regressions in user experience +- [ ] Code coverage maintained or improved + +### Impact +- **Slower development velocity** +- **Higher bug risk** +- **Difficult onboarding for new developers** +- **Poor code maintainability** + +--- + +## Issue 4: [P0] Add comprehensive error tracking (Sentry integration) + +**Labels:** `infrastructure`, `P0`, `monitoring`, `error-tracking` + +### Problem +Errors are currently logged to console but not tracked or monitored. This means: +- Production errors go unnoticed +- No visibility into user-impacting issues +- Difficult to debug production problems +- No error analytics or trends + +### Current Error Handling +- `console.error()` scattered throughout codebase +- Toast notifications for some errors +- No centralized error tracking +- No error grouping or deduplication +- No user context attached to errors + +### Proposed Solution +Integrate Sentry for comprehensive error tracking and monitoring. + +### Implementation Checklist + +#### 1. Install Dependencies +```bash +npm install @sentry/react @sentry/tracing +``` + +#### 2. Initialize Sentry +**File:** `client/main.tsx` +```typescript +import * as Sentry from "@sentry/react"; +import { BrowserTracing } from "@sentry/tracing"; + +Sentry.init({ + dsn: import.meta.env.VITE_SENTRY_DSN, + environment: import.meta.env.MODE, + integrations: [new BrowserTracing()], + tracesSampleRate: 1.0, + beforeSend(event, hint) { + // Filter out dev environment if needed + if (import.meta.env.MODE === 'development') { + return null; + } + return event; + }, +}); +``` + +#### 3. Add Error Boundary +Wrap app with Sentry ErrorBoundary: +```typescript +}> + + +``` + +#### 4. Set User Context +In AuthContext, add: +```typescript +Sentry.setUser({ + id: user.id, + email: user.email, + username: user.username, +}); +``` + +#### 5. Add Breadcrumbs +Track important user actions: +```typescript +Sentry.addBreadcrumb({ + category: 'navigation', + message: 'Navigated to profile', + level: 'info', +}); +``` + +#### 6. Capture Exceptions +Replace console.error with: +```typescript +try { + // risky operation +} catch (error) { + Sentry.captureException(error, { + tags: { component: 'Onboarding' }, + extra: { step: currentStep }, + }); + toast.error('Something went wrong'); +} +``` + +### Features to Enable +- [x] Error tracking +- [x] Performance monitoring +- [x] User feedback widget +- [x] Release tracking +- [x] Source maps upload +- [x] Session replay (optional) + +### Configuration Required +- **Environment Variable:** `VITE_SENTRY_DSN` +- **Sentry Project:** Create project at sentry.io +- **Source Maps:** Configure upload in build process + +### Acceptance Criteria +- [ ] Sentry SDK installed and initialized +- [ ] All uncaught errors tracked +- [ ] User context attached to errors +- [ ] Important actions logged as breadcrumbs +- [ ] Source maps uploaded for readable stack traces +- [ ] Error alerts configured +- [ ] Team can view errors in Sentry dashboard + +### Impact +- **Unknown production error rate** +- **Difficult debugging** +- **Poor user experience** (users encounter bugs we don't know about) +- **No data-driven prioritization** of bugs + +--- + +## Issue 5: [P0] Add input validation to all forms + +**Labels:** `bug`, `P0`, `forms`, `validation`, `user-experience` + +### Problem +Forms lack comprehensive client-side validation, leading to: +- Poor user experience (errors only shown after submission) +- Invalid data sent to API +- Confusing error messages +- Higher API error rates + +### Affected Forms + +#### 1. Onboarding Forms +**Files:** `client/components/onboarding/*.tsx` + +**Missing Validation:** +- **PersonalInfo:** + - Name: Required, min 2 chars + - Email: Valid email format, required + - Company: Optional, max 100 chars +- **Experience:** + - Skills: Required, at least 1 skill + - Experience level: Required +- **Interests:** + - Primary goals: Required, at least 1 +- **RealmSelection:** + - Realm: Required selection + +#### 2. Profile Editing +**File:** `client/pages/Dashboard.tsx` (Profile tab) + +**Missing Validation:** +- Display name: Required, 2-50 chars +- Bio: Optional, max 500 chars +- Website URL: Valid URL format +- Social links: Valid URL formats +- GitHub: Valid GitHub username format + +#### 3. Authentication Forms +**File:** `client/pages/Login.tsx` + +**Missing Validation:** +- Email: Required, valid format +- Password: Required, min 6 chars (current), should be min 8 chars +- Password confirmation: Must match password + +#### 4. Post Composer +**File:** `client/components/feed/PostComposer.tsx` + +**Missing Validation:** +- Content: Required, min 1 char, max 5000 chars +- Image URL: Valid URL if provided +- Links: Valid URL format + +### Recommended Validation Library +Use **React Hook Form** + **Zod** for type-safe validation: + +```bash +npm install react-hook-form zod @hookform/resolvers +``` + +### Implementation Example + +#### Define Schema (Zod) +```typescript +// schemas/onboarding.ts +import { z } from 'zod'; + +export const personalInfoSchema = z.object({ + name: z.string().min(2, 'Name must be at least 2 characters').max(50), + email: z.string().email('Invalid email address'), + company: z.string().max(100).optional(), +}); + +export type PersonalInfoFormData = z.infer; +``` + +#### Use in Component +```typescript +import { useForm } from 'react-hook-form'; +import { zodResolver } from '@hookform/resolvers/zod'; +import { personalInfoSchema } from '@/schemas/onboarding'; + +function PersonalInfo() { + const { register, handleSubmit, formState: { errors } } = useForm({ + resolver: zodResolver(personalInfoSchema), + }); + + const onSubmit = (data) => { + // Data is validated + }; + + return ( +
+ + {errors.name && {errors.name.message}} +
+ ); +} +``` + +### Validation Rules by Field Type + +#### Email +- Required +- Valid email format (`/^[^\s@]+@[^\s@]+\.[^\s@]+$/`) +- Max 255 chars + +#### Password +- Required +- Min 8 chars (update from current 6) +- Must contain: uppercase, lowercase, number +- Max 128 chars + +#### URLs +- Valid URL format +- Must start with http:// or https:// +- Optional fields can be empty + +#### Text Fields +- Trim whitespace +- Min/max length based on field +- No HTML injection (sanitize) + +#### Usernames +- Alphanumeric + underscores/hyphens +- 3-20 characters +- Not reserved words + +### Implementation Checklist +- [ ] Install react-hook-form and zod +- [ ] Create validation schemas in `/client/schemas/` +- [ ] Update PersonalInfo component +- [ ] Update Experience component +- [ ] Update Interests component +- [ ] Update RealmSelection component +- [ ] Update Profile editing form +- [ ] Update Login/Signup forms +- [ ] Update Post composer +- [ ] Add real-time validation feedback +- [ ] Add field-level error messages +- [ ] Add form-level error summary + +### Acceptance Criteria +- [ ] All forms have client-side validation +- [ ] Errors shown in real-time (on blur) +- [ ] Clear, actionable error messages +- [ ] Form submission disabled until valid +- [ ] Visual indicators for invalid fields +- [ ] Success indicators for valid fields +- [ ] Validation schemas are reusable +- [ ] Type-safe form data + +### Impact +- **Poor user experience** +- **Higher API error rates** +- **Confusing error messages** +- **Wasted server resources** (invalid requests) + +--- + +## Summary + +These P0 issues should be addressed in this order: +1. **Onboarding progress persistence** (30 min fix, high user impact) +2. **Error tracking** (1 hour setup, critical for monitoring) +3. **Form validation** (1-2 days, improves UX across app) +4. **Stripe integration** (2-3 days, enables monetization) +5. **Component refactoring** (1-2 weeks, ongoing improvement) + +Total estimated effort: **2-3 weeks** for all P0 items. diff --git a/docs/issues/P1-ISSUES.md b/docs/issues/P1-ISSUES.md new file mode 100644 index 00000000..7c475583 --- /dev/null +++ b/docs/issues/P1-ISSUES.md @@ -0,0 +1,654 @@ +# P1 Priority Issues (Medium Priority) + +These issues should be addressed after P0 items are complete. + +--- + +## Issue 1: [P1] Build comprehensive notification system + +**Labels:** `feature`, `P1`, `notifications`, `engagement` + +### Problem +Users have no way to know when someone: +- Likes their post +- Comments on their post +- Follows them +- Mentions them +- Awards them an achievement + +This leads to poor engagement and missed interactions. + +### Proposed Features + +#### 1. In-App Notifications +- Notification bell icon in header +- Badge with unread count +- Dropdown panel with recent notifications +- Mark as read functionality +- Clear all functionality + +#### 2. Notification Types +- **Social:** + - New follower + - Post liked + - Post commented + - Mention in post/comment +- **Achievement:** + - Achievement unlocked + - Level up + - Streak milestone +- **System:** + - Welcome message + - Onboarding completion + - Subscription renewal + - Payment issues + +#### 3. Email Notifications +- Daily digest of activity +- Weekly summary +- Immediate alerts for important events +- Unsubscribe options + +#### 4. Push Notifications (PWA) +- Browser push for real-time alerts +- Permission request UI +- Notification preferences + +### Technical Implementation + +#### Database Schema +```sql +CREATE TABLE notifications ( + id UUID PRIMARY KEY, + user_id UUID REFERENCES profiles(id), + type VARCHAR(50), -- 'follow', 'like', 'comment', etc. + title VARCHAR(255), + body TEXT, + link VARCHAR(500), -- Where to go when clicked + read BOOLEAN DEFAULT FALSE, + created_at TIMESTAMP DEFAULT NOW(), + metadata JSONB -- Extra data specific to notification type +); + +CREATE INDEX idx_notifications_user_read ON notifications(user_id, read); +CREATE INDEX idx_notifications_created ON notifications(created_at); +``` + +#### API Endpoints +- `GET /api/notifications` - Fetch user's notifications +- `POST /api/notifications/:id/read` - Mark as read +- `POST /api/notifications/read-all` - Mark all as read +- `DELETE /api/notifications/:id` - Delete notification +- `GET /api/notifications/unread-count` - Get count + +#### Real-time Updates +Use Supabase Realtime subscriptions: +```typescript +const subscription = supabase + .channel('notifications') + .on('postgres_changes', { + event: 'INSERT', + schema: 'public', + table: 'notifications', + filter: `user_id=eq.${userId}` + }, handleNewNotification) + .subscribe(); +``` + +### Implementation Checklist +- [ ] Create notifications table +- [ ] Create NotificationContext +- [ ] Build NotificationBell component +- [ ] Build NotificationPanel component +- [ ] Add API endpoints +- [ ] Integrate Supabase Realtime +- [ ] Add notification triggers (on like, comment, etc.) +- [ ] Build email notification service +- [ ] Add user preferences UI +- [ ] Add push notification support +- [ ] Test all notification types + +### Acceptance Criteria +- [ ] Users receive in-app notifications +- [ ] Unread count displays in header +- [ ] Clicking notification navigates to relevant content +- [ ] Users can mark notifications as read +- [ ] Users can configure notification preferences +- [ ] Email notifications sent for key events +- [ ] Real-time updates without page refresh + +### Estimated Effort +**2-3 weeks** + +--- + +## Issue 2: [P1] Complete project management workflows + +**Labels:** `feature`, `P1`, `projects`, `collaboration` + +### Problem +Project features are incomplete: +- ProjectBoard.tsx has TODO comment on line 1 +- Project creation appears to be a stub +- No team collaboration features +- No file management + +### Missing Features + +#### 1. Project Creation +**File:** `client/pages/ProjectsNew.tsx` + +**Needs:** +- Full project creation form +- Project templates (game dev, web app, etc.) +- Team member invitation +- Initial milestone setup +- File upload/attachment + +#### 2. Project Board (Kanban) +**File:** `client/pages/ProjectBoard.tsx` + +**Needs:** +- Drag-and-drop task cards +- Columns: Backlog, To Do, In Progress, Review, Done +- Task assignment +- Due dates +- Labels/tags +- Comments on tasks +- File attachments + +#### 3. Team Collaboration +**New Features:** +- Multi-user projects +- Role management (owner, editor, viewer) +- Activity feed per project +- @mentions in comments +- Real-time collaboration +- Presence indicators + +#### 4. Project Settings +- Edit project details +- Manage team members +- Archive/delete project +- Privacy settings (public/private/team-only) + +### Database Schema Updates + +#### Projects Table +```sql +CREATE TABLE projects ( + id UUID PRIMARY KEY, + title VARCHAR(255) NOT NULL, + description TEXT, + owner_id UUID REFERENCES profiles(id), + status VARCHAR(50), -- 'active', 'archived', 'completed' + visibility VARCHAR(20), -- 'public', 'private', 'team' + created_at TIMESTAMP DEFAULT NOW(), + updated_at TIMESTAMP DEFAULT NOW() +); +``` + +#### Project Members +```sql +CREATE TABLE project_members ( + project_id UUID REFERENCES projects(id), + user_id UUID REFERENCES profiles(id), + role VARCHAR(20), -- 'owner', 'editor', 'viewer' + joined_at TIMESTAMP DEFAULT NOW(), + PRIMARY KEY (project_id, user_id) +); +``` + +#### Project Tasks +```sql +CREATE TABLE project_tasks ( + id UUID PRIMARY KEY, + project_id UUID REFERENCES projects(id), + title VARCHAR(255) NOT NULL, + description TEXT, + status VARCHAR(50), -- 'backlog', 'todo', 'in_progress', 'review', 'done' + assigned_to UUID REFERENCES profiles(id), + due_date DATE, + priority VARCHAR(20), -- 'low', 'medium', 'high', 'urgent' + position INTEGER, -- For ordering within column + created_by UUID REFERENCES profiles(id), + created_at TIMESTAMP DEFAULT NOW(), + updated_at TIMESTAMP DEFAULT NOW() +); +``` + +### Implementation Checklist +- [ ] Complete ProjectsNew form +- [ ] Implement project creation API +- [ ] Build Kanban board with drag-and-drop +- [ ] Add task CRUD operations +- [ ] Implement team member management +- [ ] Add comments system for tasks +- [ ] Add file attachment support +- [ ] Implement project activity feed +- [ ] Add real-time collaboration +- [ ] Build project settings page +- [ ] Add project templates +- [ ] Implement project search/filter + +### Acceptance Criteria +- [ ] Users can create projects +- [ ] Users can manage tasks on Kanban board +- [ ] Users can invite team members +- [ ] Team members can collaborate in real-time +- [ ] Users can upload files to projects +- [ ] Users can comment on tasks +- [ ] Users can archive/delete projects + +### Estimated Effort +**3-4 weeks** + +--- + +## Issue 3: [P1] Add image upload functionality + +**Labels:** `feature`, `P1`, `media`, `storage` + +### Problem +Users cannot upload images for: +- Profile avatars +- Post media +- Project screenshots +- Comments/attachments + +### Proposed Solution +Integrate Supabase Storage for image uploads. + +### Features Needed + +#### 1. Avatar Upload +**Location:** Profile editing page + +**Features:** +- Click avatar to upload new image +- Crop/resize before upload +- Preview before saving +- Remove avatar option +- Support JPG, PNG, WebP +- Max 5MB file size + +#### 2. Post Media +**Location:** Feed post composer + +**Features:** +- Upload 1-10 images per post +- Drag-and-drop upload +- Image preview with remove option +- Automatic compression +- Progress indicator + +#### 3. Project Media +**Location:** Project showcase/board + +**Features:** +- Project cover image +- Screenshot gallery +- File attachments (not just images) +- Organize in folders + +### Technical Implementation + +#### Storage Buckets +```typescript +// Create buckets in Supabase +- avatars (public) +- post-media (public) +- project-files (private with RLS) +- attachments (private with RLS) +``` + +#### Upload Component +```typescript +// components/ImageUpload.tsx +import { supabase } from '@/lib/supabase'; + +function ImageUpload({ bucket, onUpload }) { + const handleUpload = async (file: File) => { + // 1. Validate file (type, size) + // 2. Compress if needed + // 3. Generate unique filename + // 4. Upload to Supabase Storage + // 5. Get public URL + // 6. Call onUpload with URL + }; +} +``` + +#### Image Compression +```bash +npm install browser-image-compression +``` + +```typescript +import imageCompression from 'browser-image-compression'; + +const options = { + maxSizeMB: 1, + maxWidthOrHeight: 1920, + useWebWorker: true +}; + +const compressedFile = await imageCompression(file, options); +``` + +### Implementation Checklist +- [ ] Create Supabase storage buckets +- [ ] Configure RLS policies +- [ ] Build ImageUpload component +- [ ] Add image compression +- [ ] Implement avatar upload in Profile +- [ ] Implement media upload in PostComposer +- [ ] Implement cover image in Projects +- [ ] Add image preview/lightbox +- [ ] Add delete image functionality +- [ ] Add progress indicators +- [ ] Handle upload errors gracefully +- [ ] Add drag-and-drop support + +### Acceptance Criteria +- [ ] Users can upload profile avatars +- [ ] Users can upload images in posts +- [ ] Users can upload project media +- [ ] Images are compressed automatically +- [ ] Upload progress is visible +- [ ] Errors are handled gracefully +- [ ] Uploaded images can be deleted + +### Estimated Effort +**1-2 weeks** + +--- + +## Issue 4: [P1] Implement content moderation tools + +**Labels:** `feature`, `P1`, `moderation`, `safety` + +### Problem +No way to moderate user-generated content: +- Inappropriate posts +- Spam +- Harassment +- Copyright violations + +### Proposed Features + +#### 1. Report System +**User Actions:** +- Report post +- Report comment +- Report user +- Report reason categories +- Additional details text field + +#### 2. Admin Moderation Dashboard +**Location:** `/staff/moderation` (requires admin role) + +**Features:** +- Queue of reported content +- Review reports +- Take actions: + - Approve (dismiss report) + - Remove content + - Warn user + - Suspend user + - Ban user +- View user's history +- Bulk actions + +#### 3. Automated Filters +- Profanity filter (optional, toggle per community) +- Link spam detection +- Image content scanning (AI-based) +- Rate limiting on posts/comments + +#### 4. User Controls +- Block users +- Mute users +- Hide posts +- Privacy settings + +### Database Schema + +#### Reports Table +```sql +CREATE TABLE content_reports ( + id UUID PRIMARY KEY, + reporter_id UUID REFERENCES profiles(id), + reported_user_id UUID REFERENCES profiles(id), + content_type VARCHAR(20), -- 'post', 'comment', 'user' + content_id UUID, + reason VARCHAR(50), -- 'spam', 'harassment', 'inappropriate', 'copyright' + details TEXT, + status VARCHAR(20), -- 'pending', 'reviewed', 'actioned', 'dismissed' + reviewed_by UUID REFERENCES profiles(id), + reviewed_at TIMESTAMP, + action_taken VARCHAR(50), + created_at TIMESTAMP DEFAULT NOW() +); +``` + +#### User Moderation Actions +```sql +CREATE TABLE moderation_actions ( + id UUID PRIMARY KEY, + user_id UUID REFERENCES profiles(id), + moderator_id UUID REFERENCES profiles(id), + action VARCHAR(50), -- 'warn', 'suspend', 'ban', 'content_removed' + reason TEXT, + expires_at TIMESTAMP, -- For temporary suspensions + created_at TIMESTAMP DEFAULT NOW() +); +``` + +#### Blocked Users +```sql +CREATE TABLE user_blocks ( + blocker_id UUID REFERENCES profiles(id), + blocked_id UUID REFERENCES profiles(id), + created_at TIMESTAMP DEFAULT NOW(), + PRIMARY KEY (blocker_id, blocked_id) +); +``` + +### Implementation Checklist +- [ ] Create report system tables +- [ ] Build ReportModal component +- [ ] Add "Report" buttons to posts/comments +- [ ] Create moderation dashboard page +- [ ] Build report queue UI +- [ ] Add moderation action buttons +- [ ] Implement user blocking +- [ ] Add automated filters +- [ ] Create moderation logs +- [ ] Add appeal system +- [ ] Set up email notifications for moderators + +### Acceptance Criteria +- [ ] Users can report inappropriate content +- [ ] Admins can review reports +- [ ] Admins can take moderation actions +- [ ] Users can block other users +- [ ] Spam is automatically filtered +- [ ] Moderation actions are logged +- [ ] Users receive feedback on reports + +### Estimated Effort +**2-3 weeks** + +--- + +## Issue 5: [P1] Add session management and security improvements + +**Labels:** `security`, `P1`, `authentication` + +### Problem +Missing security features: +- No 2FA (two-factor authentication) +- No session management UI +- No login history +- No account recovery options +- Weak password requirements + +### Proposed Features + +#### 1. Two-Factor Authentication (2FA) +- **Setup Flow:** + - Navigate to Settings → Security + - Choose 2FA method (TOTP app or SMS) + - Scan QR code (for TOTP) + - Enter verification code + - Save backup codes + +- **Login Flow:** + - Enter email/password + - If 2FA enabled, prompt for code + - Enter 6-digit code + - Option to "Trust this device" + +- **Recovery:** + - Use backup codes + - SMS fallback + - Contact support + +#### 2. Session Management +**Location:** Settings → Security → Active Sessions + +**Display:** +- Current session (highlighted) +- Other active sessions: + - Device/browser + - IP address + - Location (city) + - Last active timestamp + - "Revoke" button for each + +#### 3. Login History +**Location:** Settings → Security → Login History + +**Display:** +- Last 30 login attempts +- Date/time +- Device/browser +- IP address +- Location +- Success/failure status + +#### 4. Password Strength Requirements +Update from current 6 chars to: +- Minimum 8 characters +- At least one uppercase letter +- At least one lowercase letter +- At least one number +- At least one special character +- Visual strength indicator +- Password breach check (Have I Been Pwned API) + +#### 5. Account Recovery +- Security questions +- Recovery email (separate from login email) +- SMS verification +- Backup codes + +### Technical Implementation + +#### 2FA with TOTP +```bash +npm install otplib qrcode +``` + +```typescript +// Generate secret +import { authenticator } from 'otplib'; +const secret = authenticator.generateSecret(); + +// Generate QR code +import QRCode from 'qrcode'; +const otpauth = authenticator.keyuri(user.email, 'AeThex', secret); +const qrcode = await QRCode.toDataURL(otpauth); + +// Verify code +const isValid = authenticator.verify({ token: userCode, secret }); +``` + +#### Database Schema +```sql +-- Add to profiles table +ALTER TABLE profiles ADD COLUMN two_factor_enabled BOOLEAN DEFAULT FALSE; +ALTER TABLE profiles ADD COLUMN two_factor_secret VARCHAR(255); +ALTER TABLE profiles ADD COLUMN backup_codes TEXT[]; -- Array of hashed codes + +-- Sessions table +CREATE TABLE user_sessions ( + id UUID PRIMARY KEY, + user_id UUID REFERENCES profiles(id), + token_hash VARCHAR(255), + device VARCHAR(255), + browser VARCHAR(100), + ip_address INET, + location VARCHAR(255), + trusted BOOLEAN DEFAULT FALSE, + created_at TIMESTAMP DEFAULT NOW(), + last_active TIMESTAMP DEFAULT NOW(), + expires_at TIMESTAMP +); + +-- Login history +CREATE TABLE login_history ( + id UUID PRIMARY KEY, + user_id UUID REFERENCES profiles(id), + success BOOLEAN, + ip_address INET, + device VARCHAR(255), + browser VARCHAR(100), + location VARCHAR(255), + failure_reason VARCHAR(100), + created_at TIMESTAMP DEFAULT NOW() +); +``` + +### Implementation Checklist +- [ ] Install 2FA dependencies +- [ ] Create 2FA setup UI +- [ ] Implement TOTP generation and verification +- [ ] Add 2FA to login flow +- [ ] Generate backup codes +- [ ] Build session management UI +- [ ] Track active sessions +- [ ] Implement session revocation +- [ ] Build login history page +- [ ] Log all login attempts +- [ ] Update password requirements +- [ ] Add password strength indicator +- [ ] Implement breach check +- [ ] Add account recovery options +- [ ] Add "trusted device" feature + +### Acceptance Criteria +- [ ] Users can enable 2FA +- [ ] 2FA required on login if enabled +- [ ] Users can view active sessions +- [ ] Users can revoke sessions +- [ ] Login history is tracked +- [ ] Password requirements enforced +- [ ] Account recovery works + +### Estimated Effort +**3-4 weeks** + +--- + +## Summary + +P1 issues in order of priority: +1. **Notification system** (improves engagement) +2. **Project workflows** (core feature completion) +3. **Image upload** (enables rich content) +4. **Content moderation** (platform safety) +5. **Session management & 2FA** (security) + +Total estimated effort: **11-16 weeks** diff --git a/docs/issues/P2-ISSUES.md b/docs/issues/P2-ISSUES.md new file mode 100644 index 00000000..fd15744e --- /dev/null +++ b/docs/issues/P2-ISSUES.md @@ -0,0 +1,324 @@ +# P2 Priority Issues (Low Priority / Nice to Have) + +These are enhancement requests and quality-of-life improvements that can be addressed after P0 and P1 items. + +--- + +## Issue 1: [P2] Add dark/light mode toggle + +**Labels:** `enhancement`, `P2`, `UI/UX` + +### Problem +Theme is currently locked to dark mode. Some users prefer light mode or system preference. + +### Proposed Solution +- Theme toggle in header or settings +- Persist preference in localStorage +- Respect system preference by default +- Smooth theme transitions + +### Implementation +```typescript +// Use next-themes or custom context +import { ThemeProvider } from 'next-themes'; + +// In App.tsx + + + +``` + +### Estimated Effort +**3-5 days** + +--- + +## Issue 2: [P2] Internationalization (i18n) support + +**Labels:** `enhancement`, `P2`, `i18n` + +### Problem +App is English-only. Limits international user base. + +### Proposed Solution +- Use react-i18next +- Support languages: English, Spanish, French, Japanese +- Locale switcher in settings +- Detect browser language + +### Estimated Effort +**2-3 weeks** (including translations) + +--- + +## Issue 3: [P2] Add keyboard shortcuts for power users + +**Labels:** `enhancement`, `P2`, `accessibility` + +### Proposed Shortcuts +- `/` - Focus search +- `n` - New post +- `?` - Show shortcuts modal +- `g h` - Go to home +- `g p` - Go to profile +- `Esc` - Close modals + +### Implementation +```bash +npm install react-hotkeys-hook +``` + +### Estimated Effort +**1 week** + +--- + +## Issue 4: [P2] Progressive Web App (PWA) support + +**Labels:** `enhancement`, `P2`, `mobile` + +### Features +- Install prompt +- Offline support +- App icons +- Splash screens +- Push notifications + +### Implementation +Use Vite PWA plugin: +```bash +npm install vite-plugin-pwa +``` + +### Estimated Effort +**1-2 weeks** + +--- + +## Issue 5: [P2] Advanced analytics dashboard + +**Labels:** `enhancement`, `P2`, `analytics` + +### User Analytics +- Profile views +- Post engagement rate +- Follower growth +- Top performing posts +- Audience demographics + +### Admin Analytics +- Daily/weekly/monthly active users +- User retention rates +- Feature adoption +- Revenue metrics +- Funnel analysis + +### Estimated Effort +**2-3 weeks** + +--- + +## Issue 6: [P2] Add profile customization themes + +**Labels:** `enhancement`, `P2`, `personalization` + +### Features +- Custom profile colors +- Background images +- Layout options +- Badge placement +- Bio formatting (markdown) + +### Estimated Effort +**1-2 weeks** + +--- + +## Issue 7: [P2] Implement direct messaging (DM) + +**Labels:** `feature`, `P2`, `messaging` + +### Features +- One-on-one messaging +- Message threads +- Typing indicators +- Read receipts +- File sharing in DMs +- Message search + +### Estimated Effort +**3-4 weeks** + +--- + +## Issue 8: [P2] Add content bookmarking/saving + +**Labels:** `feature`, `P2`, `social` + +### Features +- Save posts for later +- Organize saved posts into collections +- Private bookmarks +- Search saved content + +### Estimated Effort +**1 week** + +--- + +## Issue 9: [P2] Implement polls and reactions + +**Labels:** `feature`, `P2`, `social` + +### Features +- Create polls in posts +- Vote on polls +- See poll results +- Emoji reactions beyond likes +- Reaction counts + +### Estimated Effort +**1-2 weeks** + +--- + +## Issue 10: [P2] Add accessibility improvements + +**Labels:** `accessibility`, `P2`, `a11y` + +### Improvements +- ARIA labels on all interactive elements +- Keyboard navigation +- Screen reader support +- Focus indicators +- Color contrast compliance (WCAG AA) +- Alt text for images +- Skip to content link +- Reduced motion option + +### Estimated Effort +**2-3 weeks** + +--- + +## Issue 11: [P2] Performance optimizations + +**Labels:** `performance`, `P2`, `optimization` + +### Optimizations +- Route-based code splitting +- Image lazy loading +- Virtual scrolling for long lists +- Bundle size reduction +- Memoization audit +- Remove unused dependencies +- Lighthouse score improvements + +### Estimated Effort +**2-3 weeks** + +--- + +## Issue 12: [P2] Add comprehensive testing + +**Labels:** `testing`, `P2`, `quality` + +### Testing Strategy +- **Unit Tests:** + - Utility functions + - Hooks + - Services + +- **Component Tests:** + - React Testing Library + - User interactions + - Edge cases + +- **Integration Tests:** + - API flows + - Authentication + - Critical user journeys + +- **E2E Tests:** + - Playwright or Cypress + - Happy paths + - Error scenarios + +### Target Coverage +- 80% code coverage +- All critical paths tested +- CI/CD integration + +### Estimated Effort +**4-6 weeks** + +--- + +## Issue 13: [P2] Mobile app (React Native) + +**Labels:** `feature`, `P2`, `mobile` + +### Features +- Native iOS and Android apps +- Shared codebase with web (Expo) +- Push notifications +- Biometric authentication +- Camera integration +- App store deployment + +### Estimated Effort +**8-12 weeks** + +--- + +## Issue 14: [P2] Add export/import user data (GDPR) + +**Labels:** `compliance`, `P2`, `privacy` + +### Features +- Export all user data (JSON/CSV) +- Import data from other platforms +- Delete all user data +- Data portability compliance +- Privacy policy integration + +### Estimated Effort +**1-2 weeks** + +--- + +## Issue 15: [P2] Implement referral program + +**Labels:** `growth`, `P2`, `monetization` + +### Features +- Unique referral links +- Track referrals +- Reward system (credits, XP, badges) +- Leaderboard +- Share on social media + +### Estimated Effort +**1-2 weeks** + +--- + +## Summary + +P2 issues are nice-to-have enhancements that improve the user experience but aren't critical for core functionality. They can be addressed based on user feedback and business priorities. + +**Quick wins** (1-2 weeks): +- Dark mode toggle +- Keyboard shortcuts +- PWA support +- Bookmarking +- Referral program + +**Longer term** (3+ weeks): +- i18n support +- Analytics dashboard +- DM system +- Mobile app +- Comprehensive testing + +Total estimated effort for all P2: **40-60 weeks** (could be distributed across multiple developers)