Your WhatsApp developer community, organised.

This project is a full-stack implementation of DevConnect, as described in your DEV Weekend Challenge document:

• Frontend: React 18 + Vite + React Router
• Backend: Node.js + Express + Supabase (PostgreSQL)
• Auth: Supabase Auth (email + password)
• Deployment-ready: Frontend on Vercel, backend on Railway (or any Node host)

The app provides:

• Community feed with post types: Need Help, Share, Collab, Weekly Goal
• Member directory with filters by level and skills
• Resources library auto-populated from Share posts with links
• Invite-code based communities layered on top of existing WhatsApp groups

devconnect/
├── frontend/              # React + Vite SPA
│   ├── src/
│   │   ├── components/    # Avatar, PostCard, ComposeModal, Toast, SkillPicker
│   │   ├── context/       # AuthContext (global auth state)
│   │   ├── hooks/         # useToast
│   │   ├── lib/           # api.js (all fetch calls), constants.js
│   │   └── pages/         # LandingPage, AuthPages, AppPage
│   ├── index.html
│   ├── vite.config.js
│   └── .env.example
│
├── backend/               # Node.js + Express API
│   ├── src/
│   │   ├── routes/        # auth.js, communities.js, posts.js, profiles.js
│   │   ├── middleware/    # auth.js (JWT verification via Supabase)
│   │   └── lib/           # supabase.js (admin + auth clients)
│   ├── package.json
│   └── .env.example
│
└── supabase-schema.sql    # Run in Supabase SQL editor to create all tables

1. Go to https://supabase.com and create a free project.
2. In the SQL Editor, run supabase-schema.sql from this repo to create all tables and policies.
3. In Project Settings → API, copy:
   • Project URL
   • anon public key
   • service role secret key

You will use:

• The anon key in the frontend (for Supabase Auth calls via the backend)
• The service role key in the backend (for database reads/writes from Express)

cd backend
cp .env.example .env
# Edit .env and fill in:
# - SUPABASE_URL
# - SUPABASE_ANON_KEY
# - SUPABASE_SERVICE_ROLE_KEY
# - JWT_SECRET (for Express-issued session tokens, if needed)

npm install
npm run dev   # starts API on http://localhost:4000

The backend exposes the following main endpoints under /api:

• POST /api/auth/register – Create account + profile
• POST /api/auth/login – Login, returns JWT + profile
• GET /api/profiles/me – Current user profile
• PATCH /api/profiles/me – Update profile
• POST /api/communities – Create community (invite code auto-generated)
• POST /api/communities/join – Join via invite code
• GET /api/communities – Communities for current user
• GET /api/communities/:id – Community details + members
• GET /api/posts – List posts (filterable by type, tag, page)
• GET /api/posts/:id – Single post with replies
• POST /api/posts – Create post
• DELETE /api/posts/:id – Delete own post
• POST /api/posts/:id/like – Toggle like
• POST /api/posts/:id/replies – Add reply

All protected routes expect an Authorization: Bearer <access_token> header where <access_token> is the Supabase Auth JWT returned at login.

cd frontend
cp .env.example .env
# Edit .env and fill in:
# - VITE_API_BASE_URL (e.g. http://localhost:4000/api)

npm install
npm run dev   # starts app on http://localhost:5173

The React app includes:

• Landing page with call-to-action to create or join a community
• Two-step auth flow (sign-up: account → profile; login)
• Protected app shell that requires auth and loads the selected community
• Community feed with post-type and tag filters
• Member directory and resources library tabs
• Invite code display for community admins with one-click copy

• Frontend: Deploy the frontend directory to Vercel; set VITE_API_BASE_URL to your backend URL.
• Backend: Deploy backend to Railway or any Node host; configure env vars from your Supabase project.

Once both are deployed and pointed at the same Supabase project, DevConnect will be fully functional and ready for your DEV Weekend Challenge submission.