When I started learning to build software, I jumped between multiple tools—HTML/CSS/JS, Nuxt, Python, plain React. Each step taught me something, but it also revealed the same pattern: if I want to build apps that genuinely influence people’s lives, I need a stack that lets me ship fast, think clearly, and grow into professional-grade engineering.

That’s how I arrived at Next.js + Supabase as my main stack, supported by Prisma, Shadcn UI, and Figma for product design.

Below is the reasoning behind every choice—explained the way a recruiter, hiring manager, or engineer would evaluate a junior developer’s decision-making.

1. I Chose a Stack That Lets Me Focus on What Actually Matters: Building Real Products

My goal isn’t to memorize syntax.
My goal is to build apps that influence people’s behavior, mindset, and daily life.

To do that, I need:

• Rapid iteration
• A full-stack system without heavy backend ops
• Great developer experience
• Production-ready patterns used by serious companies

Next.js + Supabase meets all of those requirements without overwhelming me.

2. Why Next.js (React Framework) Is My Core Frontend Choice

A. It’s the industry default for modern web apps

Next.js is used across startups and big tech—Vercel, Notion, TikTok, Airbnb, etc.
Choosing it means I’m learning the patterns companies already expect:

• Server Components
• File-based routing
• App Router
• Server actions
• Incremental static regeneration
• Built-in API endpoints

This reduces the distance between my personal projects and real company codebases.

B. It gives me full-stack power without backend complexity

With Next.js, the backend is inside the same repo:

• Authentication happens in server components
• APIs are just files under /api
• I can run server logic securely (fetching data, using secrets, calling Supabase/Prisma)

This means I’m not learning fragmented technologies.
I’m learning a coherent system where everything fits together.

C. It keeps me focused on meaningful features

Instead of figuring out tooling, deployments, or routing, I focus on:

• user flows
• data modeling
• UI feel
• product logic

This matches my goal: create apps that actually shape users’ habits and emotions (ex: Lumi Diary Digest, Charm).

3. Why Supabase Instead of Firebase or Custom Databases

A. SQL + Postgres is a real-world, transferable skill

Learning Postgres means learning:

• Schemas
• Relationships
• Constraints
• Indexing
• Migrations

These matter in any professional environment.

Firebase’s NoSQL structure is convenient at first but teaches patterns that don’t transfer well and often become messy at scale.

B. Supabase gives me everything I need in one place

A full backend without DevOps:

• Auth
• Database (Postgres)
• Storage
• Edge functions
• Realtime updates
• Dashboard for monitoring

For a solo developer building multiple apps, this reduces cognitive load dramatically.

C. The learning curve is smoother for beginners but powerful enough for advanced work

It lets me grow fast without boxing me in later.

Supabase → Postgres → Can switch to any production database in the future.

Firebase → Locked patterns → Harder to transition.

4. Why I Added Prisma on Top of Supabase

On paper, Supabase already provides an SQL client.
So why Prisma?

Because Prisma gives:

• strongly typed queries
• schema as code
• auto-generated client
• database safety (less risk of breaking things)
• clearer data modeling

This is exactly how professional teams maintain consistent backend logic.

And there is zero conflict: Prisma works great with Supabase’s Postgres database.

For my apps—diary entries, user data, summaries—Prisma makes the backend reliable and maintainable.

5. Why Shadcn UI Instead of a CSS Library or a Component Library

I care a lot about UI aesthetics and user emotional experience.
Shadcn UI gives the best of both worlds:

• Tailwind-powered components
• Accessible
• Copy-paste + customize (not a locked library)
• Production-quality
• Matches modern design systems (ex: Vercel, Linear)

This means my apps look polished without bloating the codebase.

For user-facing apps like Lumi Diary Digest or Charm, UI feel matters as much as functionality.

6. Why Figma Is Part of My Stack

Because engineers who think like product builders stand out.

I use Figma to:

• design flows before coding
• ensure components match intentional UX
• plan mobile/desktop behavior
• maintain visual identity
• work faster when building UI

Figma + Next.js + Shadcn makes me a developer who can own both design and implementation.

Recruiters value this.

7. Why I Didn’t Stick With the Earlier Tools I Tested

Bare HTML/CSS/JS

Great fundamentals, but slow to ship complex apps.
Not scalable for full products.

Nuxt (Vue)

I liked it, but React/Next.js dominates the industry.
As a beginner aiming for employability + product building, I needed the mainstream path.

Python

I enjoy Python, but for full-stack web apps, it slowed me down.
Switching between frameworks, servers, and frontend made me lose momentum.

Plain React

Good start, but missing routing, API layer, and server rendering.
Next.js fixed all of these.

8. What This Stack Enables Me to Build (Strategically)

This stack lets me build apps that combine:

• personalization
• emotion-driven UX
• private data storage
• AI-powered features
• real user data
• fast iteration

Examples:

• Lumi Diary Digest → AI summaries of life experiences
• Charm → a financial wellness tool shaping mindset
• Portfolio site → fast, aesthetic, responsive
• future tools with authentication, dashboards, and databases

I’m using the same stack startups would use to build real products.

9. The Bigger Picture: I’m Building From the Basics, but Aiming for Real Impact

I’m not here to be “a person who learned a framework.”

I’m building a foundation where I can:

• create tools that change how people think
• deploy apps that can scale
• work in Japan, APAC, or fully remote
• join teams using React/Next as their core
• build startups in the future
• pivot into backend/data when needed
• integrate AI into real-world workflows

Choosing this stack is not random.
It’s a long-term, strategic choice.

Final Thought

My guiding principle is simple:

Choose technologies that remove friction from learning, reduce barriers to shipping, and bring me closer to building meaningful products.

Next.js + Supabase + Prisma + Shadcn + Figma gives me that exact path—starting from beginner-friendly foundations and scaling all the way to production-ready engineering.