Blips

A full-stack social network where users share short posts ("blips") with text and images, comment on each other's posts, and browse top news headlines.

Live: https://blips-steel.vercel.app  |  API: https://blips-api-ayvb.onrender.com

• Auth — register, login, logout with JWT cookies; session restored on page load
• Blips — create, edit, delete posts with optional image upload
• Comments — add, edit, delete comments on any blip
• Profiles — view your own profile or any user's public profile; upload avatar
• News banner — top US headlines shown on the home page (non-critical, fails silently)

• Node.js 18+
• Python 3.9+ (seed script only)
• A Neon PostgreSQL database
• A Cloudflare R2 bucket with public access enabled
• A GNews API key

1. Create api/.env:

   DATABASE_URL=postgresql://<user>:<password>@<host>/neondb?sslmode=require&pgbouncer=true
   DIRECT_URL=postgresql://<user>:<password>@<host>/neondb?sslmode=require
   JWT_SECRET=<your-secret>
   CLIENT_URL=http://localhost:3000
   R2_ACCOUNT_ID=<cloudflare-account-id>
   R2_ACCESS_KEY_ID=<r2-access-key>
   R2_SECRET_ACCESS_KEY=<r2-secret-key>
   R2_BUCKET_NAME=<bucket-name>
   R2_PUBLIC_URL=https://pub-<id>.r2.dev
   NEWS_API_KEY=<gnews-api-key>
   

2. Install and migrate:

   cd api
   npm install
   npx prisma migrate deploy

3. Start:

   npm run dev        # node --watch
   # or
   npm start          # production

1. Create client/.env:

   REACT_APP_API_URL=http://localhost:8080
   

2. Install and start:

   cd client
   npm install
   npm start

Populates 4 users, 8 blips (3 with images from R2), and 6 comments:

cd scripts
pip install -r requirements.txt
python seed.py

The script reads credentials from api/.env and is idempotent on user emails.

Set all api/.env variables as environment variables in Render. Set REACT_APP_API_URL (no trailing slash) in Vercel.