RPG ASSIGNMENT

[shivamsoni1]

Project — Start / Run Instructions

This document contains the minimal steps to get both backend and frontend running locally for development, plus quick troubleshooting tips (subscriptions, auth, CORS).

Prerequisites

• Node.js (v20+ recommended)
• npm
• (Optional) SQLite / Postgres / MySQL if you changed DB config (project default uses TypeORM config in backend)
• Terminal on macOS

Repository layout

• backend/ — NestJS + GraphQL server
• frontend/ — Vue 3 + Vite SPA

1 — Install dependencies
Open two terminals or run sequentially.

Backend

# from repo root
cd /Users/shivamsoni/Desktop/rpg-assignment/backend
npm install

Frontend

cd /Users/shivamsoni/Desktop/rpg-assignment/frontend
npm install

If you hit dependency peer errors with Apollo packages, run:

# in frontend
npm install --legacy-peer-deps

(Recommended: align package versions instead of forcing; see project package.json.)

2 — Environment variables (dev)
Create a .env or export variables in your shell. Minimum required:

Backend

• JWT_SECRET — secret used to sign/verify tokens (must be set for auth to work)
• PORT — optional (defaults to 3200)

Example (macOS bash/zsh)

# from backend folder
export JWT_SECRET="devSecret"
export PORT=3200

Frontend

• VITE_GRAPHQL_HTTP — optional, defaults to http://localhost:3200/graphql
• VITE_GRAPHQL_WS — optional, defaults to ws://localhost:3200/graphql

3 — Start servers (dev)

Start backend (NestJS)

cd /Users/shivamsoni/Desktop/rpg-assignment/backend
# ensure JWT_SECRET is exported
npm run start:dev
# server should listen at http://localhost:3200/graphql

Start frontend (Vite)

cd /Users/shivamsoni/Desktop/rpg-assignment/frontend
npm run dev
# Vite will print the dev URL (e.g. http://localhost:5173)

4 — Quick manual checks & API examples

Register / Login (example)
```bash
# register
curl -s -X POST http://localhost:3200/graphql \
  -H "Content-Type: application/json" \
  -d '{"query":"mutation Register($input:CreateUserInput!){register(input:$input){id username email}}","variables":{"input":{"username":"u","email":"u@a.com","password":"pass"}}}' | jq

# login -> get token
curl -s -X POST http://localhost:3200/graphql \
  -H "Content-Type: application/json" \
  -d '{"query":"mutation Login($input:LoginInput!){login(input:$input){accessToken}}","variables":{"input":{"email":"u@a.com","password":"pass"}}}' | jq

Create post (authenticated)

# replace <TOKEN> with returned accessToken
curl -s -X POST http://localhost:3200/graphql \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer <TOKEN>" \
  -d '{"query":"mutation CreatePost($content:String!){createPost(content:$content){id content createdAt}}","variables":{"content":"hello"}}' | jq

5 — Subscriptions (real-time)

• Frontend uses graphql-ws (ws://localhost:3200/graphql). Ensure the frontend Apollo client (GraphQLWsLink) is configured and DefaultApolloClient is provided in main.ts.
• Backend must expose graphql-ws subscriptions in GraphQLModule.forRoot and accept connectionParams (Authorization) if your subscriptions require auth.

Debugging subscriptions

• Confirm websocket connection in browser DevTools → Network → WS → /graphql and inspect frames (CONNECTION_INIT, then DATA frames when events arrive).
• Server-side test script (node) — run from backend folder (requires ws installed):

# example script path: backend/scripts/ws-test.js
node scripts/ws-test.js
# This script subscribes via graphql-ws and prints events received from server.

6 — Common issues & fixes

CORS / Missing Authorization header

• If browser requests fail with "Failed to fetch" or missing header, enable CORS in backend main.ts:

// backend/src/main.ts
app.enableCors({
  origin: 'http://localhost:5173', // change to your Vite dev URL
  credentials: true,
  allowedHeaders: ['Content-Type', 'Authorization'],
});

Restart the backend after changes.

Unauthorized on createPost

• Confirm localStorage token is present (in browser Console: localStorage.getItem('token')) and network request includes Authorization header.
• Ensure backend uses the same JWT_SECRET that was used to sign tokens. Start backend with the same JWT_SECRET env var.

Subscriptions deliver to Node client but not browser

• Confirm frontend ws link is created using graphql-ws and the split link routes subscriptions to ws.
• Check for websocket frames in DevTools. If no WS entry appears, the client did not open the socket (check apollo.ts and that DefaultApolloClient is provided).
• Confirm backend GraphQLModule subscriptions key uses 'graphql-ws' and logs onConnect.

7 — Helpful logs to add (temporary)
Add these during debugging and remove before final submission:

• In backend main.ts: log incoming Authorization header.
• In JwtStrategy.validate: console.log(payload) and user lookup result.
• In PostsService.create: console.log when publish occurs.
• In PostsResolver subscription: console.log when iterator created.

8 — Production notes

• Use a real DB with migrations (TypeORM migrations) instead of synchronize: true.
• Set secure JWT_SECRET and other production env variables.
• Consider enabling HTTPS / secure WS (wss) and proper CORS origins for deployment.

Contact

• For issues reproducing locally, paste the backend terminal log and the browser Network/WebSocket frames so I can help debug further.