← All projects

Home Portal

Collaborative course project (CS3773 Software Engineering), rebrand and redesign solo afterward

  • Next.js
  • React
  • Prisma
  • PostgreSQL
  • Stripe
  • NextAuth
  • Tailwind CSS

Problem

A CS3773 Software Engineering assignment asked for a full-stack web application built to professional conventions: a real database, real payments, and a team workflow with code review and CI, not a solo weekend project. The original build (then called Grocery Portal) shipped with placeholder-grade catalog data and default shadcn styling, which worked but didn't hold up as a real storefront demo.

Approach

The underlying architecture carried over unchanged: Next.js App Router, Prisma/PostgreSQL, NextAuth, and Stripe checkout, with cart logic that merges sessions, applies discount codes, and persists across visits. On top of that foundation, I rebranded the storefront from a grocery concept to Home Portal, a home & lifestyle catalog, swapping the product data over to DummyJSON's furniture, decor, and kitchen-accessory categories and rewriting the site copy (nav, hero, footer, empty states) to match.

I also built out a real design system: warm stone neutrals with an amber accent, Fraunces serif headings paired with Inter body text, and semantic tokens for success/destructive/CTA states, applied consistently across the homepage, catalog, checkout, dashboard, orders, and auth screens, with full dark mode rather than an inverted-color light theme. I added a new About Us page with original copy, linked from the navbar and footer, and fixed a few real bugs along the way: catalog pagination that rendered every page number in a row now truncates with ellipses, the footer moved from homepage-only to the root layout so it renders site-wide, and a checkout test with a silent gap (missing request headers in its mock) got fixed so it would actually catch a regression.

On the infrastructure side, I bumped Next.js off a version with several patched CVEs, including a critical RCE, to the latest 15.x patch; added regression test coverage for the server-side pricing calculation that prevents client-side cart tampering (fixed prior to this pass); and resolved an @types/node/vitest peer conflict that was breaking CI and Vercel installs.

Outcome

Home Portal supports browsing, filtering, authenticated checkout, and order history backed by PostgreSQL, now running on a real product catalog with consistent styling and dark mode instead of placeholder data and default component theming. The rebrand and redesign were a content and visual pivot on top of the same engineering foundation: the auth, ordering, and payment logic carried over unchanged.