A full-stack developer collaboration platform built with Next.js 16 and FastAPI, featuring Firebase Authentication, GitHub integration, user search, and a dark brutalist-tech design system.
- Authentication — Firebase Auth (Google, GitHub, Email/Password) with secure token verification via the Admin SDK
- User Profiles — Onboarding flow, avatar uploads (Cloudinary), skills, bio, and profile completion tracking
- GitHub Integration — OAuth linking, pinned repos, language stats, activity feed, and identity display
- User Search — Debounced, regex-based search with secure field projection and keyboard shortcut (⌘/Ctrl+K)
- Public Profiles — View any user's profile via
/profile/[username]dynamic routes - Posts & Feed — Create, edit, delete, and view posts with markdown support, media attachments, and category tags (collab, event, explore)
- Post Interactions — Like/unlike posts with real-time count updates and optimistic UI rendering
- Comments & Replies — Nested threaded comments with auto-capitalization, validation, and per-line responsive sizing
- Comment Interactions — Like/unlike comments, delete comments (cascade deletes replies), proper authorization
- Peer Connections — Send/accept connection requests and manage peer relationships
- Dark Brutalist UI — Custom design system with accent borders, monospace typography, and Framer Motion animations
code_canvas/
├── backend/ # FastAPI Application
│ ├── main.py # App setup, CORS, route registration
│ ├── models/
│ │ ├── auth.py # Auth request/response models
│ │ ├── user.py # Profile, Stats, Providers, Settings models
│ │ ├── post.py # Post creation, response models with media & categories
│ │ ├── comment.py # Comment/reply models with author & like stats
│ │ ├── peers.py # Peer request and connection models
│ │ └── ai.py # AI signal generation request model
│ ├── routes/
│ │ ├── auth.py # Login, onboarding, session endpoints
│ │ ├── users.py # Search, profile, avatar upload endpoints
│ │ ├── posts.py # Create, read, update, delete, like posts
│ │ ├── comments.py # Comments, replies, likes endpoints
│ │ ├── peers.py # Send/accept connection requests
│ │ ├── health.py # Health check with DB ping
│ │ └── ai.py # AI signal generation endpoint
│ ├── services/
│ │ ├── user.py # User CRUD, profile completion, stats
│ │ ├── github.py # GitHub API integration & data aggregation
│ │ ├── post.py # Post CRUD, like management, count tracking
│ │ ├── comment.py # Comment/reply CRUD, tree building, likes
│ │ ├── peers.py # Connection request & peer management
│ │ └── ai.py # AI signal generation logic
│ ├── utils/
│ │ ├── auth.py # Firebase token verification dependency
│ │ ├── database.py # MongoDB connection & indexes
│ │ ├── security.py # Fernet encryption for OAuth tokens
│ │ ├── cloudinary_utils.py # Image upload utility
│ │ └── serialization.py # Common JSON encoders for datetime
│ ├── requirements.txt
│ ├── .env.example
│ └── .gitignore
│
└── frontend/ # Next.js 16 Application (App Router)
├── app/
│ ├── page.tsx # Landing page
│ ├── layout.tsx # Root layout with fonts & providers
│ ├── login/page.tsx # Auth page (Google, GitHub, Email)
│ ├── onboarding/page.tsx # Profile setup flow
│ ├── posts/
│ │ └── create/page.tsx # Post creation page with media & category selection
│ ├── collab-feed/page.tsx # Collaboration focused feed
│ ├── explore-feed/page.tsx # Discovery feed
│ ├── events-feed/page.tsx # Events focused feed
│ ├── profile/
│ │ ├── page.tsx # Authenticated user's profile
│ │ └── [username]/page.tsx # Public profile view
│ └── globals.css # Global styles
├── components/ # Reusable UI components
│ ├── Navbar.tsx & NavbarWrapper.tsx # Navigation with search
│ ├── PostCard.tsx # Feed post with interactions
│ ├── CommentForm.tsx # Comment & reply input with auto-capitalization
│ ├── CommentItem.tsx # Individual comment with nested replies
│ ├── CommentSection.tsx # Comments container with tree rendering
│ ├── Toast.tsx # Error/success notifications
│ ├── Button.tsx # Reusable button component
│ ├── Popup.tsx # Confirmation dialogs
│ ├── Banner.tsx # Hero/section header
│ ├── FeedLayout.tsx # Feed page container
│ └── ... # Landing page & modal components
├── contexts/
│ └── AuthContext.tsx # Firebase auth state & backend sync
├── hooks/
│ ├── useCreatePost.ts # Post creation hook
│ ├── useFeed.ts # Feed data fetching with pagination
│ ├── useGithubRepos.ts # GitHub repos integration
│ ├── useMediaManager.ts # Media upload management
│ ├── useDebounce.ts # Debouncing utility
│ └── ... # Other custom hooks
├── lib/
│ ├── firebase.ts # Firebase client initialization
│ ├── messages.ts # Auth error message mapping
│ ├── api/
│ │ ├── client.ts # API base URL & header utilities
│ │ ├── auth.ts # Authentication endpoints
│ │ ├── users.ts # User search & profile endpoints
│ │ ├── posts.ts # Post create, read, like endpoints
│ │ ├── comments.ts # Comment, reply, like endpoints
│ │ ├── peers.ts # Connection request endpoints
│ │ └── ai.ts # AI signal generation endpoint
│ └── utils/
│ └── validation.ts # Input validation & sanitization (comments, usernames, etc.)
├── package.json
├── .env.example
└── .gitignore
- Node.js v20+
- Python v3.10+
- A Firebase project (Auth enabled with Google & GitHub providers)
- A MongoDB Atlas cluster
- A Cloudinary account (for avatar uploads)
cd backend
python -m venv venv
# Activate virtual environment
# Windows:
.\venv\Scripts\activate
# Mac/Linux:
source venv/bin/activate
pip install -r requirements.txtEnvironment:
cp .env.example .envFill in .env with your MongoDB URI, Fernet encryption key, and Cloudinary credentials.
Firebase Admin SDK:
- Go to Firebase Console → Project Settings → Service Accounts
- Generate a new private key
- Save as
serviceAccountKey.jsonin thebackend/directory
cd frontend
npm installEnvironment:
cp .env.example .env.localFill in .env.local with your Firebase project config (found in Firebase Console → Project Settings → General).
Open two terminals:
Terminal 1 — Backend (http://localhost:8000):
cd backend
# Activate venv first
uvicorn main:app --reloadTerminal 2 — Frontend (http://localhost:3000):
cd frontend
npm run dev- User signs in via Google, GitHub, or Email on the frontend
- Firebase handles authentication and returns an ID token
- Frontend syncs the session with the backend (
POST /auth/session) - Backend verifies the ID token using the Firebase Admin SDK
- A user document is provisioned in MongoDB on first login
- Subsequent API requests pass the ID token as a
Bearertoken in theAuthorizationheader
- Posts support markdown content with optional media attachments (images, videos)
- Category tags organize content:
collab(collaboration),event(events),explore(discovery) - Optional GitHub links and collaboration metadata
- Media stored on Cloudinary with URL stored in MongoDB
- Like/Unlike posts with optimistic UI updates and count synchronization
- Real-time statistics:
likes_count,comments_count,shares - Posts are indexed by
created_atand category for efficient querying - Comment counts accurately reflect total comments including nested replies
- Collab Feed (
/collab-feed) — Shows only collaboration posts - Explore Feed (
/explore-feed) — Discovery of diverse content - Events Feed (
/events-feed) — Event-specific posts with metadata
- Nested threaded comments — Reply to any comment to create conversations
- Auto-capitalization — First letter automatically capitalized as users type
- Validation — Must start with capital letter, no consecutive spaces, non-empty
- Responsive Design — Comment and reply fields scale on smaller screens with reduced padding
- Tree Structure Building — Backend constructs parent-child relationships automatically
- Like/Unlike comments — Same as post likes with optimistic updates
- Delete Comments — Owner can delete; cascade deletes all nested replies
- Author Info — Display comment author avatar, username, and timestamp
- Proper Authorization — Only comment owners can delete their comments
CommentForm.tsx— Reusable textarea with auto-capitalization and validationCommentItem.tsx— Individual comment with actions (like, reply, delete)CommentSection.tsx— Container managing fetch, create, and tree rendering
- Endpoints:
POST /posts/{postId}/comments— Create top-level commentPOST /comments/{commentId}/reply— Add reply to commentGET /posts/{postId}/comments— Fetch comment treeDELETE /comments/{commentId}— Delete comment & repliesPOST /comments/{commentId}/like— Toggle comment like
- Collections:
comments(with indexes onpost_id,parent_comment_id) andcomment_likes - Service Logic — Builds nested tree structure with O(n) complexity, manages like counts atomically
- Send Requests — Users can request peer connections with other users
- Request Management — Accept, reject, or cancel connection requests
- Peer List — View all established connections on profile
- Identity Linking — Peers collection manages mutual relationships with indexed lookups
- Never commit
.env,.env.local, orserviceAccountKey.json— all covered by.gitignore - GitHub OAuth tokens are AES-encrypted (Fernet) before storage in MongoDB
- User search results exclude sensitive fields (tokens, providers)
- Comment and post operations require authentication (Bearer token)
- Only owners can delete their comments/posts
- The
.env.examplefiles are safe templates for other developers
POST /auth/google— Google OAuth loginPOST /auth/github— GitHub OAuth loginPOST /auth/signup— Email/password signupPOST /auth/login— Email/password loginPOST /auth/session— Sync and verify session
GET /users/search?q={query}— Search users (debounced)GET /users/{userId}— Get user profilePUT /users/profile— Update profile (authenticated)POST /users/avatar— Upload avatar (Cloudinary)
POST /posts— Create post (authenticated)GET /posts?category={category}&limit={limit}— Fetch posts with filteringGET /posts/{postId}— Get post detailsPUT /posts/{postId}— Update post (owner only)DELETE /posts/{postId}— Delete post (owner only, cascade deletes comments)POST /posts/{postId}/like— Toggle post likeGET /posts/{postId}/comments— Fetch comment tree for post
POST /posts/{postId}/comments— Create top-level commentPOST /comments/{commentId}/reply— Reply to commentDELETE /comments/{commentId}— Delete comment & replies (owner only)POST /comments/{commentId}/like— Toggle comment like
POST /peers/request— Send connection requestPOST /peers/request/{requestId}/accept— Accept requestPOST /peers/request/{requestId}/reject— Reject requestGET /peers/connections— List user's peersGET /peers/requests— List pending requests
GET /health— API health check with DB ping
| Layer | Technology |
|---|---|
| Frontend | Next.js 16, React 19, Tailwind CSS v4, Framer Motion, Lucide Icons, date-fns |
| Backend | FastAPI, Motor (async MongoDB), Firebase Admin SDK, Pydantic |
| Database | MongoDB Atlas (collections: users, posts, post_likes, comments, comment_likes, peers, peer_requests) |
| Auth | Firebase Authentication (Google, GitHub, Email/Password) |
| Storage | Cloudinary (media and avatars) |
| Encryption | Fernet (OAuth token encryption) |
| Deployment Ready | CORS configured, environment-based configuration, proper error handling |