Production period: October 2025 – ongoing (feature additions and improvements continue after initial launch) Release date: January 8, 2026

Background / Request

The project started from a request to publish subscriber-only articles and videos, and to track how much each piece of content was being viewed.

Key Features

Member Registration & Two-Factor Authentication

・A simple sign-up flow requiring only an email address and password

・Two-factor authentication via Supabase Auth OTP (email/phone) to prevent unauthorized login

・The same verification code confirmation applies at login, ensuring account security

Subscription Billing & Payment

・Monthly subscription model: the enrollment month is free, billing starts the following month

・The payment schedule (today's charge and the amount from the month after next) is shown clearly on screen so users can sign up with confidence

・Automatic monthly card billing manages recurring payments

Content Delivery & Member-Only Content

・Articles and videos are listed and organized by publish date and category tags

・A lock icon marks member-only content, communicating value to non-members ("visible, but not accessible")

・Newest-first sorting lets users quickly see the latest content

Design Approach

We aimed for a warm design that feels close to a mother's daily life, while using shadcn/ui for rapid implementation. After requirements were defined, we skipped the wireframe stage and went straight to design, and collaborated with AI (Claude) during implementation. We adopted Feature-Sliced Design to balance speed with long-term maintainability.

Production Flow

Requirements definition → Design → Development → Release → Continuous improvement

※Wireframing was skipped to prioritize speed. Feature additions and improvements continue after launch (most recent update: last week).

Tools & Technologies

・Next.js 15 — frontend/backend framework

・TypeScript — type-safe development language

・Tailwind CSS / shadcn/ui — UI styling and component library

・Supabase — authentication and database

・microCMS — headless CMS for article content management

・Feature-Sliced Design — frontend architecture

・Vitest / Playwright — unit and E2E testing

Credit

Client: Rizapuro Education Institute

Design: Yuria Umeda (GiFT, inc.)

Development: Naoki Ioroi, Mizuki Murata (GiFT, inc.)