project_evolution_and_next_steps.txt

**Project Evolution and Next Steps for "Nodes" Social Network**

This document outlines the current state of the "Nodes" project and provides a roadmap for transitioning it from a UI/UX prototype with mock data to a fully functional, real-time application.

**1. Project Overview**

*   **Application**: "Nodes" is a social networking application tailored for students.
*   **Tech Stack (Frontend)**: Next.js (App Router), React, TypeScript, Tailwind CSS, Shadcn UI.
*   **Core Features Prototyped**:
    *   User Authentication (dummy) & Profiles (with mock verification status)
    *   Connections & AI-driven Connection Suggestions
    *   Communities (creation, browsing)
    *   Meetups (creation, browsing)
    *   Multi-type Posts (thoughts, ideas, photos) & Feed (everyone, friends, communities)
    *   Post Interactions (likes, comments, saves, shares)
    *   Direct Messaging (simulated)
    *   Notifications (mock)
    *   Search (users, communities, meetups with filters)
    *   Settings (appearance themes, liked posts, blocked accounts, mock verification process)
    *   Study Hub (domain-specific questions, mock code editor, discussions, leaderboard)
    *   App Updates/Changelog page
*   **AI**: Genkit for connection suggestions (currently using mock inputs).

**2. Current State of Development (As of May 2024 - Prototype Phase)**

*   **UI/UX Implementation**: The majority of frontend components and page layouts are built and visually functional. The user interface provides a good representation of the intended application.
*   **Authentication**: A dummy authentication system is in place using `src/components/auth/auth-provider.tsx`. It relies on `localStorage` to simulate user sessions and manage a list of mock accounts. There is no real user registration, password security, or session management.
*   **Data Management**: All application data (user profiles, posts, comments, communities, meetups, notifications, chat messages, study questions, etc.) is hardcoded in `src/lib/mock-data.ts`. Data mutations (e.g., creating a post, liking a comment, blocking a user) manipulate these in-memory arrays. Some state persistence across browser sessions for things like "liked posts," "saved posts," and "blocked users" is also handled via `localStorage`.
*   **Simulated Interactions**: All dynamic user interactions are simulated. For example:
    *   Liking a post updates a counter in the mock data and `localStorage`.
    *   Creating a post adds it to the `mockPosts` array.
    *   Blocking a user adds their ID to a list in `localStorage`.
    *   Messaging is not real-time; it uses mock chat data.
*   **AI (Genkit)**: The Genkit flow for connection suggestions (`src/ai/flows/suggest-connections.ts`) is defined but operates on hardcoded or mock inputs and does not interact with a live user database.
*   **Study Hub Code Editor**: The code editor in the Study Hub (`src/components/study/question-card.tsx`) is a UI placeholder. It does not compile or execute code.
*   **No Real Backend**: The project currently lacks a persistent database, real-time communication infrastructure (e.g., WebSockets for chat), and secure file storage for user-uploaded content. All "backend" operations are faked on the client-side.

**3. Path to Real-Time Implementation & Production Readiness**

The primary goal for the next phase of development is to build out the backend, replacing all mock implementations with a robust, scalable solution, likely using Firebase.

**3.1. Authentication (Firebase Authentication)**
    *   **Files to Modify**: `src/components/auth/auth-provider.tsx`, `src/lib/firebase/client.ts`.
    *   **Tasks**:
        1.  Configure Firebase SDK: Fully set up `firebaseConfig` in `src/lib/firebase/client.ts` with your Firebase project credentials (API Key, Auth Domain, Project ID, etc.). Ensure `.env.local` is correctly populated.
        2.  Replace Dummy Auth: Rewrite `AuthProvider` to use Firebase Authentication methods (`createUserWithEmailAndPassword`, `signInWithEmailAndPassword`, `signInWithPopup` for Google, `signOut`, `onAuthStateChanged`).
        3.  User Data in Firestore: Upon new user registration via Firebase Auth, create a corresponding user document in a Firestore `users` collection. Store profile details (name, domain, stream, initial interests, etc.) here.
        4.  Auth State Persistence: Rely on Firebase's `onAuthStateChanged` listener to manage the application's user state globally.
        5.  Secure Routes/APIs: Implement route guards and API endpoint protection based on Firebase Auth user sessions.
        6.  Multi-Account Management: Re-evaluate how multi-account switching would work with real Firebase accounts. It might involve linking multiple provider accounts to a single Firebase user or managing separate Firebase user sessions.

**3.2. Database (Firebase Firestore)**
    *   **Task**: Migrate all data structures currently defined in `src/lib/mock-data.ts` (and their corresponding TypeScript types in `src/types/index.ts`) into Firestore collections. Design appropriate Firestore data models and security rules.
    *   **Key Collections to Create (Example Structure)**:
        *   `users`: (Fields: `name`, `email`, `avatarUrl`, `backgroundUrl`, `domain`, `stream`, `interests`, `radiusPreference`, `bio`, `location`, `joinedDate`, `isVerified`)
        *   `posts`: (Fields: `userId`, `authorName`, `authorAvatarUrl`, `content`, `timestamp`, `postType`, `title` (for ideas), `imageUrl` (for photos), `communityId` (optional))
            *   Subcollection `likes`: (document per like, storing `userId` and `timestamp`)
            *   Subcollection `comments`: (Fields from `Comment` type)
        *   `communities`: (Fields: `name`, `description`, `memberCount`, `tags`, `imageUrl`, `creatorId`)
            *   Subcollection `members`: (document per member, storing `userId`, `role`, `joinedAt`)
        *   `meetups`: (Fields: `name`, `description`, `date`, `time`, `location`, `isOnline`, `organizerId`, `tags`, `imageUrl`)
            *   Subcollection `attendees`: (document per attendee, storing `userId`, `rsvpStatus`)
        *   `chats`: (Fields: `participantIds` (array), `lastMessageContent`, `lastMessageTimestamp`, `lastMessageSenderId`)
            *   Subcollection `messages`: (Fields from `Message` type, ordered by timestamp)
        *   `notifications`: (Fields from `Notification` type, likely indexed by `recipientId`)
        *   `studyQuestions`: (Fields from `StudyQuestion` type, perhaps categorized by domain)
        *   `studyQuestionComments`: (Fields from `Comment` type, linked to a `questionId`)
        *   `leaderboardEntries`: (Fields from `LeaderboardEntry` type, needs a strategy for periodic updates)
        *   `appUpdates`: (Fields from `AppUpdate` type)
        *   `userInteractions` (or separate collections per user):
            *   `userLikedPosts/{userId}/likedPosts/{postId}`
            *   `userSavedPosts/{userId}/savedPosts/{postId}`
            *   `userBlockedUsers/{userId}/blocked/{blockedUserId}`
        *   `verificationRequests`: (Fields: `userId`, `documentUrl`, `status` (pending, approved, rejected), `submittedAt`, `reviewedAt`)
    *   **Data Fetching/Mutation**:
        1.  Replace all client-side data fetching from `mock-data.ts` (e.g., in `useEffect` hooks in page components like `src/app/page.tsx`, `src/app/profile/page.tsx`, etc.) with Firestore queries. Use libraries like `react-query` or SWR for efficient data fetching, caching, and real-time updates.
        2.  Implement backend functions (either Next.js API Routes using the Firebase Admin SDK, or Firebase Cloud Functions) for all create, read, update, delete (CRUD) operations. These functions will interact directly with Firestore.
        3.  Secure these backend endpoints using Firebase Auth.

**3.3. File Storage (Firebase Storage)**
    *   **Task**: Implement file upload functionality for:
        *   User profile pictures and background banners (in `src/components/profile/profile-form.tsx`).
        *   Images for "photo" type posts (in `src/components/feed/create-post-form.tsx`).
        *   Banner images for communities and meetups (in `src/components/community/create-community-form.tsx` and `src/components/meetup/create-meetup-form.tsx`).
        *   Identity verification documents (in `src/components/settings/verification-form.tsx`).
    *   **Process**:
        1.  User selects a file on the client.
        2.  Client-side code uploads the file to Firebase Storage.
        3.  Upon successful upload, Firebase Storage returns a downloadable URL.
        4.  This URL is then saved in the corresponding Firestore document (e.g., `avatarUrl` in the `users` collection, `imageUrl` in the `posts` collection).
    *   **Security**: Implement Firebase Storage security rules to control who can upload and access files (e.g., users can only write to their own designated paths, public read for profile pictures, private read for verification documents).

**3.4. Backend Logic & API Endpoints (Next.js API Routes / Firebase Functions)**
    *   **Task**: Develop server-side logic for all application features that involve data manipulation or complex queries.
    *   **Specific Features Requiring Backend Implementation**:
        *   **Post Interactions**:
            *   Liking/Unliking: Atomically update like counts on posts and record user likes.
            *   Commenting: Add comments to a post's subcollection. Update comment counts.
            *   Saving/Unsaving Posts: Manage `userSavedPosts`.
            *   Sharing: Logic for sharing with friends (may involve creating notifications or messages).
        *   **User Interactions**:
            *   Connection System: Implement logic for sending, accepting, or rejecting connection requests. Store connections (e.g., in a `connections` collection or as arrays in user documents).
            *   Blocking/Unblocking: Update `userBlockedUsers`. Ensure blocked users' content is filtered out in feeds and searches.
        *   **Community/Meetup Management**:
            *   Joining/Leaving Communities: Update member lists and counts.
            *   RSVPing to Meetups: Update attendee lists and counts.
        *   **Search**:
            *   Replace current client-side filtering of mock data with server-side search functionality querying Firestore.
            *   For more advanced search (full-text, faceting), consider integrating a dedicated search service like Algolia, which can be synced with Firestore.
        *   **Notifications**:
            *   Server-side logic to generate notifications when relevant events occur (e.g., new like, comment, connection request, meetup reminder).
            *   Store notifications in Firestore.
            *   Implement a mechanism for clients to fetch and mark notifications as read (e.g., real-time listeners or polling).
        *   **Messaging**:
            *   Implement real-time chat using Firestore listeners.
            *   Backend logic for creating new chat sessions, sending messages, and updating `lastMessage` on chat documents.
            *   Modify `src/app/messages/[chatId]/page.tsx` and `src/app/messages/page.tsx` to use live Firestore data.
        *   **User Verification Process**:
            *   Backend endpoint for users to submit verification requests (uploads document to Storage, creates request in `verificationRequests`).
            *   Separate admin interface/process (outside the scope of this prototype) for reviewing requests and updating the `isVerified` flag on user documents.
        *   **Study Hub Leaderboard**: Implement logic to calculate and update leaderboard scores periodically (e.g., using a scheduled Firebase Function).

**3.5. AI Integration (Genkit)**
    *   **Files to Modify**: Genkit flows in `src/ai/flows/*` (e.g., `suggest-connections.ts`) and components that invoke them (e.g., `src/app/connections/suggest/page.tsx`).
    *   **Tasks**:
        1.  Data Source: Modify Genkit flows to fetch real user data from Firestore instead of relying on hardcoded inputs or mock data. For example, `suggestConnectionsFlow` would need to query the `users` collection.
        2.  Input/Output: Adjust the input schemas (Zod types) of flows to match real data structures and ensure outputs can be consumed by the frontend.
        3.  API Key Management: Securely manage API keys for any underlying AI models used by Genkit (e.g., using environment variables, Firebase Functions configuration, or Google Cloud Secret Manager).
        4.  Radius-based Suggestions: If connection suggestions are to be truly radius-based, this will require storing user locations (with consent) and performing geo-queries in Firestore, which can be complex.

**3.6. Study Hub - Code Compiler Integration**
    *   **File to Modify**: `src/components/study/question-card.tsx`.
    *   **Task**: This is a substantial feature.
        1.  Choose a code execution service (e.g., Judge0, JDoodle API, or build a custom sandboxed execution environment).
        2.  Create backend API endpoints that receive code, selected language, and question ID (for test cases) from the `QuestionCard` component.
        3.  These endpoints will forward the code to the execution service.
        4.  The service runs the code, potentially against predefined test cases for the question, and returns output (stdout, stderr, execution time, pass/fail status).
        5.  The backend API then sends this result back to the client to be displayed.

**3.7. Real-time Capabilities**
    *   **Task**: Leverage Firestore's real-time listeners for features requiring live updates:
        *   Chat messages appearing instantly.
        *   New posts or comments appearing in feeds without manual refresh.
        *   Live notification counters or banners.
    *   Update relevant frontend components to subscribe to these listeners and efficiently re-render.

**3.8. Error Handling, Input Validation, and Security**
    *   **Task**:
        1.  Server-Side Validation: Implement thorough input validation on all backend API endpoints (Zod can be used here too). Never trust client-side input.
        2.  Client-Side Validation: Enhance existing Zod schemas in forms for a better UX, but always re-validate on the server.
        3.  Error Handling: Implement comprehensive error handling on both client and server. Provide user-friendly error messages.
        4.  Firestore Security Rules: Write detailed Firestore security rules to control data access precisely (e.g., users can only edit their own profile, read posts they are allowed to see, etc.).
        5.  Firebase Storage Security Rules: Secure file uploads and access.
        6.  API Endpoint Security: Protect all backend APIs against common web vulnerabilities (XSS, CSRF, etc.). Use HTTPS.
        7.  Rate Limiting: Consider rate limiting for sensitive operations.

**3.9. Deployment & CI/CD**
    *   **Task**:
        1.  Choose a hosting platform (Vercel is excellent for Next.js; Firebase Hosting is an option if heavily using Firebase Functions).
        2.  Set up a CI/CD pipeline (e.g., GitHub Actions with Vercel deployments) for automated testing and deployment.
        3.  Manage environment variables securely for different environments (development, staging, production).

**4. Key Files & Areas Requiring Significant Backend Work**

   *   **`src/components/auth/auth-provider.tsx`**: Complete rewrite for Firebase Authentication.
   *   **`src/lib/mock-data.ts`**: All data here needs to be migrated to Firestore; this file will largely be deprecated.
   *   **All Page Components in `src/app/**/*page.tsx`**: Any page that currently reads from or writes to `mock-data.ts` will need to be refactored to interact with the Firebase backend (either directly with Firestore client SDK + security rules, or via your Next.js API routes/Firebase Functions). This includes the home feed, profile pages, search, discover, messaging, notifications, study hub, settings, etc.
   *   **Form Components (e.g., `create-post-form.tsx`, `create-community-form.tsx`, `profile-form.tsx`)**: Need to submit data to backend endpoints instead of updating mock arrays.
   *   **Interaction Logic in various components**:
        *   `src/components/feed/post-card.tsx`: Likes, comments, saves, shares.
        *   `src/components/profile/user-profile-card.tsx`: Connect, message, block actions.
        *   `src/components/settings/*`: All settings updates, list management.
   *   **AI Flows in `src/ai/flows/*`**: Require integration with live Firestore data.
   *   **`next.config.ts`**: Ensure it's configured for production (e.g., image optimization, security headers).
   *   **Environment Variables (`.env.local`, `.env.production.local`)**: Will be critical for Firebase configuration, Genkit API keys, and other service credentials.

**5. Future Goals (Post-MVP Real-Time Implementation)**

*   Advanced search features (e.g., Algolia integration).
*   Real-time collaborative tools (e.g., shared whiteboards for study groups).
*   More sophisticated AI-driven features (content personalization, advanced recommendations).
*   Native mobile application development.
*   Scalability and performance optimizations for a large user base.
*   Comprehensive analytics and monitoring.

This document provides a high-level roadmap. Each step will involve detailed design and implementation decisions. Good luck with bringing "Nodes" to life!