GenieHub — MERN Stack Starter

GenieHub is a mobile-first MERN experience for publishing daily creator resources. The Express + MongoDB backend exposes the /api/v1 surface, while the Vite + React + Tailwind client renders a "link-in-bio" landing page, daily resource views, and detail pages with copy/download tooling.

Project Layout

client/   # Vite + React + Tailwind single-page app
server/   # Express API, Mongo models, seed script

Requirements

• Node.js 18+
• MongoDB 6+ running locally or remotely

1. Setup & Environment

Server

cd server
npm install
cp .env.example .env   # then edit values

.env keys:

PORT=5000
MONGO_URI=mongodb://127.0.0.1:27017/geniehub
ADMIN_TOKEN=replace-with-strong-secret
CLIENT_ORIGIN=http://localhost:5173

Client

cd client
npm install
cp .env.example .env   # optional, add VITE_API_BASE_URL for prod

VITE_API_BASE_URL defaults to /api/v1, so dev traffic is proxied to the server via Vite.

2. Seed MongoDB

cd server
node seedResources.js

The script reads resources_seed.json and upserts records by slug, so you can rerun it safely.

3. Run Locally

Open two terminals:

# Terminal 1 – API
cd server
npm run dev

# Terminal 2 – Client
cd client
npm run dev

Visit http://localhost:5173 — Vite proxies /api calls to http://localhost:5000.

API Surface

Public endpoints:

• GET /api/v1/resources?day=1&visible=true&limit=100
• GET /api/v1/resources/:id
• GET /api/v1/resources/slug/:slug
• GET /api/v1/meta/sitemap.xml
• GET /api/v1/meta/robots.txt
• GET /api/v1/health

Admin endpoint (requires header x-admin-token: <ADMIN_TOKEN>):

POST /api/v1/resources/import
Body: { "resources": [ { ... } ] }

Example bulk import:

curl -X POST http://localhost:5000/api/v1/resources/import \
	-H "Content-Type: application/json" \
	-H "x-admin-token: $ADMIN_TOKEN" \
	-d '{
		"resources": [
			{
				"day": 3,
				"slug": "day-3-example",
				"title": "Example",
				"description": "Bulk import resource",
				"type": "json_prompt",
				"tags": ["demo"],
				"json_snippet": "{\\n  \"task\": \"Demo\"\\n}",
				"visible": true
			}
		]
	}'

Frontend Highlights

• Landing page doubles as a link-in-bio hub with quick day tiles and a "today" highlight.
• Day view (/days/:day) lists that day’s resources with primary CTA buttons, copy-to-clipboard, and UTF-8 JSON downloads.
• Resource detail route (/resources/:slug) provides deep links for sharing.
• Toast feedback appears for copy/download actions, optimized for touch targets.

Production Notes

• Set CLIENT_ORIGIN on the server to a comma-separated list of allowed domains.
• Set VITE_API_BASE_URL on the client when deploying behind a different domain.
• Re-run node seedResources.js after updating resources_seed.json to sync Mongo.
• Use the ADMIN_TOKEN header to automate imports from admin tooling (can be upgraded to JWT later thanks to built-in JSON Web Token support).