ProjectsLearn to code
Learn to code
Stack
- Next.js
- React
- TypeScript
- Tailwind
Rebuilt in Next.js, October 2026 · History
Learn to code repository (opens in a new tab)
What it is
An intro component with a sign-up form, built from a supplied design. "Learn to code by watching others" and "Try it free 7 days then $20/mo. thereafter" are the challenge stock lines. The "$20/mo." figure is that stock offer, not a fee I charged.
Why it exists
I built this demo during my post-bootcamp job search as work for Breakthrough Development. I wanted a deployed reference for a responsive form and its input feedback.
How it works
The form validates first name, last name, email and password. Valid submission stays in the browser and does not create an account. The trial offer and price are supplied sample content.
Story
What happens when someone tries the form?
The supplied design put an offer beside a sign-up form. The page also needed to answer back when the input was missing or an email was invalid.
I wanted to sharpen my frontend skills and finish with deployed code I could open, inspect and use as a reference later.
The form takes a first name, last name, email and password. I built the responsive page and its validation messages in React with TypeScript. Empty fields and malformed email give it observable states beyond the initial design.
The result is a deployed form that answers back when a field is empty or an email is malformed. It gives me a reference for presenting an offer, arranging the fields and showing feedback.
Design: Frontend Mentor's Intro component with sign-up form (opens in a new tab). Build: Royer Adames. The demo is an October 2026 rebuild by AI coding agents; the code link is my 2021 original.
History
Rebuilt in Next.js
· By AI coding agents
Before:
Stack
- React
- TypeScript
- Sass
Every Frontend Mentor project moved to one locked stack: Next.js, TypeScript and Tailwind CSS.
- Changed Create React App with Sass to Next.js with Tailwind CSS.