Kartik's DevOps Journey — Tracker & Public Portfolio

A public, task-based DevOps learning tracker for one student, gated by mentor review. A task only counts as done when the student attaches proof (repo + explainer video, plus LinkedIn where required) and the mentor approves it. Approved work automatically appears on a recruiter-facing public portfolio at /<slug> (default /kartik).

• Stack: Next.js (App Router, TypeScript) · Supabase (Auth + Postgres + Storage) · Tailwind · Vercel
• Auth: invite-only GitHub OAuth — only two allowlisted GitHub accounts (student + mentor) can log in; the public browses without any login.
• Roles: student (submits) and mentor (reviews & approves)
• Domain: production site is kartikbuilds.in
• This is Phase 1 + the schema. The submission form, file uploads, and the mentor review/approve panel are Phase 3 — stubbed in the UI and fully specified in Kartik-DevOps-Tracker-Plan.md.

---

What's in here

kartik-devops-tracker/
├── supabase/migrations/
│   ├── 0001_schema.sql        # 7 tables, RLS policies, the evidence-gate trigger
│   └── 0002_seed_roadmap.sql  # starter fresher DevOps roadmap (edit freely)
├── src/
│   ├── app/
│   │   ├── page.tsx                     # landing (redirects logged-in users)
│   │   ├── login/                       # email + password login
│   │   ├── auth/callback/               # code exchange (for magic-link/OAuth later)
│   │   ├── (private)/dashboard/         # STUDENT: roadmap + status
│   │   ├── (private)/review/            # MENTOR: review queue
│   │   └── kartik/                      # PUBLIC portfolio (anon, RLS-protected)
│   ├── lib/supabase/                    # browser / server / middleware clients
│   └── types/db.ts
└── middleware.ts                        # auth + role-based routing

---

Setup (about 15 minutes)

1. Create the Supabase project

1. Go to supabase.com → New project. Note the project URL and the anon public key (Project Settings → API).
2. Open the SQL Editor and run, in order:
   • supabase/migrations/0001_schema.sql
   • supabase/migrations/0002_seed_roadmap.sql
   • supabase/migrations/0003_github_auth.sql

2. Set up GitHub OAuth (the only way to log in)

1. On GitHub → Settings → Developer settings → OAuth Apps → New OAuth App:
   • Homepage URL: https://kartikbuilds.in (use http://localhost:3000 while developing)
   • Authorization callback URL: https://<YOUR-PROJECT-ref>.supabase.co/auth/v1/callback
   • Copy the Client ID and generate a Client secret.
2. In Supabase → Authentication → Providers → GitHub: enable it and paste the Client ID + secret.
3. In Supabase → Authentication → URL Configuration: set Site URL to https://kartikbuilds.in and add redirect URLs https://kartikbuilds.in/** and http://localhost:3000/**.

3. Invite the two users (allowlist)

Sign-in is invite-only: only emails in auth_allowlist can create an account. In the Supabase SQL Editor, add your two real GitHub-account emails:

insert into auth_allowlist (email, role, name, public_slug) values
  ('you@example.com',    'mentor',  'Your Name', null),
  ('kartik@example.com', 'student', 'Kartik',    'kartik')
on conflict (email) do nothing;

The email must match the primary email on the GitHub account used to sign in. On first login the profiles row is created automatically with the right role, name, slug, and GitHub avatar/URL. To fill in Kartik's headline/bio later:

update profiles
set headline = 'Aspiring DevOps Engineer · AWS • Docker • Kubernetes • Terraform',
    bio = 'Learning DevOps in public, one verified project at a time.',
    linkedin_url = 'https://linkedin.com/in/kartik'
where public_slug = 'kartik';

4. Create the storage bucket (for screenshots / videos / PDFs)

Supabase → Storage → New bucket → name it proofs. Keep it private; the app will generate signed URLs in Phase 3. (Skippable until you build uploads.)

5. Run locally

cp .env.local.example .env.local   # then fill in your Supabase values
npm install
npm run dev

Open http://localhost:3000 and click Continue with GitHub. Sign in with the mentor's GitHub account → you land on /review; sign in as Kartik → /dashboard. Visit /kartik (no login) for the public page.

---

Deploy to Vercel (→ kartikbuilds.in)

1. Push this folder to a GitHub repo.
2. On vercel.com → New Project → import the repo.
3. Add the environment variables from .env.local.example (set NEXT_PUBLIC_SITE_URL=https://kartikbuilds.in).
4. Add the custom domain kartikbuilds.in in Vercel → Project → Settings → Domains, and point your DNS at Vercel.
5. In Supabase → Authentication → URL Configuration, set Site URL to https://kartikbuilds.in and add https://kartikbuilds.in/** to the redirect allowlist.
6. Deploy. The public portfolio is live at https://kartikbuilds.in/kartik.

---

The evidence gate (why this isn't just a checklist)

0001_schema.sql defines a trigger, enforce_submission_rules, that runs in the database. A submission can only move to approved when:

1. the acting user is a mentor, and
2. every proof the task requires (requires_repo, requires_video, requires_linkedin) is actually attached as an artifact.

Because it's enforced in Postgres — not the UI — a green "Approved" on the public page provably means mentor-reviewed, with attached proof. That's the credibility a fresher's portfolio needs. The flip side: the value depends on the mentor actually holding the bar. Rubber-stamping defeats the purpose.

Row-Level Security, in one paragraph

Every table has RLS on. The public (anon) key can read only: published tasks, approved submissions and their artifacts, public profile fields, and LinkedIn posts. Private feedback (reviews) and mock-interview notes are visible only to the mentor and the owning student. Students can edit only their own not-yet-approved submissions. There's no admin backdoor in the app — role changes are done in SQL. This is what makes it safe to serve the portfolio publicly with the anon key.

---

🧑‍💻 For Kartik — How to work on this project

This section is your onboarding guide. There are two ways you'll use this project:

1. As the student — logging in to the live site to learn and submit work (your daily activity).
2. As a developer — running the code locally and making changes to the site itself.

Fun fact: this website is itself a DevOps artifact — it lives on GitHub, deploys automatically through Vercel (a real CI/CD pipeline), and runs on a custom domain. Learning to work on it is DevOps practice.

---

Part 1 — Daily use as the student (the main thing)

📖 Full step-by-step usage guide: HOW-TO-USE.md — read this first. The summary below is the short version.

You don't need to touch any code for this. Just:

1. Go to https://kartikbuilds.in → click Continue with GitHub → you land on your Dashboard.
2. Pick a topic from the roadmap and learn it.
3. Build the assignment — create a separate GitHub repo for each project (e.g. devops-project-05-...). This is your real proof of work.
4. Open the topic on your dashboard → attach proof (repo link, commit link, explainer video, live demo, LinkedIn post) → write your notes, challenges, and lessons → Submit for review.
5. Wait for Shivsai's review. If he requests changes, read the feedback, improve, and resubmit. If he approves, it appears on your public portfolio automatically. 🎉

The whole point: a topic is only "done" when there's real proof and mentor sign-off. No shortcuts — that's what makes the portfolio credible to recruiters.

---

Part 2 — One-time local setup (to run the code)

Prerequisites: install Node.js 18+, Git, and VS Code.

# 1. Clone the repo
git clone https://github.com/MeShivsai/KartikDevOpsRestart.git
cd KartikDevOpsRestart

# 2. Install dependencies
npm install

# 3. Create your local env file
cp .env.local.example .env.local
# then ask Shivsai for the Supabase URL + anon key and paste them in.
# NEVER commit .env.local — it's already git-ignored.

# 4. Run it locally
npm run dev
# open http://localhost:3000

---

Part 3 — The git + deploy workflow (making changes)

Golden rule: main is always live. Every push to main auto-deploys to kartikbuilds.in in ~1–2 minutes. So we never push broken code to main. Use a branch instead:

# 1. Start from the latest main
git checkout main
git pull origin main

# 2. Create a branch for your change
git checkout -b feature/short-description

# 3. ...make your edits...

# 4. VERIFY before committing (this is what keeps main safe)
npm run build       # must succeed
npm run typecheck   # must be clean

# 5. Commit
git add -A
git commit -m "Add: short description of what you changed"

# 6. Push your branch
git push -u origin feature/short-description

7. Vercel automatically builds a Preview deployment for your branch and posts a unique URL — open it and check your change on a real server (not production).
8. On GitHub, open a Pull Request from your branch into main. Shivsai reviews it.
9. When it's merged into main, Vercel auto-deploys it to production (kartikbuilds.in).

For tiny, safe changes you can commit straight to main — but when in doubt, use a branch + preview.

---

Golden rules (read these twice)

• 🔒 Never commit secrets. .env.local stays on your machine only. If you ever see it in git status, stop.
• ✅ Always run npm run build before pushing. A failed build won't take the live site down (Vercel keeps the last good version), but it saves everyone time.
• 🌿 main = production. Anything risky goes on a branch first.
• ↩️ Rollback is easy. If something breaks in production, Shivsai can promote a previous deployment in the Vercel dashboard in one click.
• 🔁 Pull before you start. git pull origin main so you're not working on stale code.

Handy commands

Command	What it does
npm run dev	Run the site locally at localhost:3000 (hot-reloads on save)
npm run build	Production build — run this before every push
npm run typecheck	Check TypeScript types
npm run lint	Check code style
git status	See what you've changed
git pull origin main	Get the latest code
git checkout -b name	Create + switch to a new branch

Where things live (quick map)

Path	What's there
src/app/	The pages (dashboard, review, public portfolio, login)
src/app/(private)/	Logged-in pages: student dashboard + mentor review
src/app/kartik/	Your public portfolio page
src/lib/supabase/	Database/auth client setup
src/types/db.ts	TypeScript types for the data
supabase/migrations/	Database schema + seed data (SQL)