Rehan Codes

Premium, showcase-first portfolio + shop website for a Roblox Developer, UI Designer, and active Software Engineering student.

Live site: https://www.rehan.codes

Stack

• React
• TypeScript
• Vite
• Tailwind CSS
• Framer Motion
• React Router
• Firebase Authentication
• Polar-ready checkout architecture
• shadcn/ui primitive

What Changed

• Rebuilt the app into a routed portfolio/shop product instead of a single scrolling landing page.
• Made Roblox work the primary conversion path with case-study style project pages.
• Added a secondary shop experience with product detail pages and Polar handoff structure.
• Added real Firebase frontend auth scaffolding with email/password, Google sign-in, persistent sessions, password reset, and a protected dashboard route.
• Centralized editable content into typed data files so projects, products, services, testimonials, and navigation are easy to update.
• Added route-level code splitting, lazy media handling, semantic metadata, and recruiter/client-ready page structure.

Setup

npm install
cp .env.example .env.local
npm run dev

Production build:

npm run build

Environment

Configure Firebase to enable live auth:

VITE_FIREBASE_API_KEY=
VITE_FIREBASE_AUTH_DOMAIN=
VITE_FIREBASE_PROJECT_ID=
VITE_FIREBASE_STORAGE_BUCKET=
VITE_FIREBASE_MESSAGING_SENDER_ID=
VITE_FIREBASE_APP_ID=
VITE_FIREBASE_MEASUREMENT_ID=

Polar checkout links:

VITE_POLAR_SUCCESS_URL=https://www.rehan.codes/shop/success?checkout_id={CHECKOUT_ID}
VITE_POLAR_CANCEL_URL=https://www.rehan.codes/shop/cancel
VITE_POLAR_CHECKOUT_TOWER_DEFENSE_CORE_KIT=
VITE_POLAR_CHECKOUT_PREMIUM_SHOP_UI_PACK=
VITE_POLAR_CHECKOUT_PROGRESSION_TEMPLATE_BUNDLE=
VITE_POLAR_CHECKOUT_CREATOR_ASSET_PACK=

Architecture

src/
├─ app/                 # root providers
├─ animations/          # shared motion config
├─ components/
│  ├─ auth/             # auth UI + protected route
│  ├─ common/           # SEO, media, section headings, icons
│  ├─ forms/            # contact form section
│  ├─ layout/           # header, footer, routed shell
│  ├─ sections/         # homepage / explorer sections
│  └─ ui/               # shadcn primitives
├─ context/             # auth context
├─ data/                # editable site content
├─ hooks/               # auth hook
├─ lib/                 # Firebase, Polar, SEO, contact helpers
├─ pages/               # route-level pages
└─ types/               # shared content types

Editing Content

Most content edits happen in src/data/site.ts:

• Update hero copy and trust metrics.
• Add/remove projects and case study content.
• Add products, pricing labels, tags, and future Polar checkout URLs.
• Update services, testimonials, socials, and about timeline entries.

Firebase Notes

• Auth is real frontend auth, not mocked.
• The site will compile without Firebase env vars, but sign-in actions will stay disabled until configured.
• Persistent sessions are enabled through browserLocalPersistence.
• Protected routes are handled by ProtectedRoute.tsx.

Polar Notes

• No fake backend checkout logic was added.
• All storefront products can resolve directly to Polar checkout links from env vars.
• Product cards resolve to either a direct Polar checkout URL or a disabled buy state until the Polar link is configured.
• Use checkout links like https://buy.polar.sh/polar_cl_... in the Vite frontend.
• Do not put POLAR_ACCESS_TOKEN or any polar_oat_... value in VITE_... variables. Those are server secrets, not client checkout links.
• VITE_POLAR_SUCCESS_URL and VITE_POLAR_CANCEL_URL are appended to checkout links as success_url and cancel_url redirect parameters.
• Dedicated storefront return routes are available at /shop/success and /shop/cancel.
• To activate direct purchases, add polarCheckoutUrl values in site.ts.
• The current shop products read their checkout links from .env so you can paste Polar checkout URLs without touching layout code.
• For future server-backed checkout sessions, extend polar.ts.
• Order sync, webhook fulfillment, gated downloads, and customer records should be added on a backend layer later.

Media Notes

• Project and product data already support video URLs plus poster fallbacks.
• Drop real showcase clips into public/media/ and replace the placeholder paths in site.ts.
• If a video is missing, the UI falls back cleanly to poster imagery instead of breaking the layout.

Contact

• Email: rorehxn@gmail.com
• GitHub: github.com/RehanMehtaIND
• LinkedIn: linkedin.com/in/rehan-mehta-31039a362