Multilingual business website with a custom integration-driven architecture. I owned frontend development, multilingual infrastructure, form systems, and all third-party service integrations.
TypeScript
React
Next.js
Tailwind CSS
Material Tailwind
Framer Motion
Firebase
Resend
React Email
client
NOISM Hairculture
platform
Business Website
role
Development, Product
status
Production
01
Assessment
1.1 / Overview
Multilingual Business Website
NOISM Hairculture is a multilingual business website for a premium hair salon brand. The platform serves people interested in hair extension services, users exploring educational offerings, and potential clients joining waitlists for high-demand appointments. It acts as the primary digital presence of the business and a direct driver of incoming client flow.
Role: Frontend & Product Developer
I led the project end-to-end, working directly with a non-technical founder, and design team to replace an existing Squarespace website with a custom, integration-driven solution.
System Design
Designing system architecture based on product and business needs.
Layout & UI
Implementing page layouts for multiple content sections.
Multilingual System
Building a custom localization infrastructure across three languages.
Form Engineering
Developing multi-step forms with validation and user feedback.
Backend Integrations
Setting up Firebase, Resend API, Google Sheets, and Acuity connections.
Platform Migration
Replacing an existing Squarespace site with a custom Next.js solution.
The Business Requirement
The project required balancing visual presentation, SEO, and operational functionality — all within a tight scope working alongside a founder who needed to own the result without technical involvement.
1.2 / Visual Identity
Premium Positioning Through Design
To reflect the premium positioning of NOISM, the platform was built around high-quality fashion photography and the Akzidenz-Grotesk typeface. Strong visual hierarchy and careful use of whitespace create a presentation that justifies high-value services.
The project required both technical expertise and product ownership — bridging business requirements, visual execution, and integration complexity across a solo development environment.
01
Non-Technical Ownership
The system had to be operated without technical support. Architectural decisions had to account for a non-developer running the platform long-term.
02
Form Complexity
The business required multiple form types: contact forms, multi-step waitlist flows, and booking-related interactions with file upload support.
03
Integration-Driven Architecture
Instead of a traditional backend, the system needed to connect email delivery, file storage, scheduling, and data collection services.
04
Visual Expectations
The brand relies on high-quality photography, typography, and presentation to justify premium positioning. Execution had to match this standard.
03
The Solution
3.1 / Architecture Overview
Integration-Driven Architecture
The platform was rebuilt as a custom Next.js application, replacing the limitations of Squarespace with a flexible, integration-driven architecture. Instead of a monolithic backend, the system acts as a hub connecting multiple services — enabling complex workflows without heavy infrastructure overhead.
Static-first architecture ensures strong SEO and performance, while API routes handle all dynamic operations: form submissions, file uploads, and email delivery.
Technical Foundation
01
TypeScript
Type-safe architecture across the codebase
02
React
Component-driven UI
03
Next.js
Unified full-stack framework
04
Tailwind CSS
Utility-first styling system
05
Resend
Cloud-based transactional emails via API
06
Firebase
Image storage for form submissions
Why Firebase
Selected for serverless file handling without infrastructure maintenance. Enables secure image uploads from form submissions directly to cloud storage, with accessible URLs included in email notifications.
Why Resend
Chosen for reliable transactional email delivery with React Email templates. Enables structured, styled communication for every form type — contact, waitlist, and inquiry — without manual follow-up.
Why Next.js
Static Generation: Performance and SEO-first for all marketing and service pages
API Routes: Form handling, file uploads, and email triggers server-side
Flexibility: Supports custom multilingual solution without framework overhead
04
Key Features
4.1 / Delivered Functionality
Production Capabilities
The platform was built to handle the full client journey — from multilingual content discovery to structured booking flows and file-based submissions.
001
Custom Multilingual System
Three-language support with locale files and client-side switching — no heavy i18n framework.
Three-language support with locale files and client-side switching — no heavy i18n framework.
002
Advanced Form System
Multiple contact flows, multi-step waitlist forms, and structured validation guiding users through conversion.
Multiple contact flows, multi-step waitlist forms, and structured validation guiding users through conversion.
003
File Upload & Storage
Firebase Storage integration for secure image uploads directly from form submissions.
Firebase Storage integration for secure image uploads directly from form submissions.
004
Transactional Email System
Resend API with React Email templates for automated contact, waitlist, and inquiry communication.
Resend API with React Email templates for automated contact, waitlist, and inquiry communication.
005
Booking Integration
Embedded Acuity Scheduling for seamless in-site booking — exploration to appointment without friction.
Embedded Acuity Scheduling for seamless in-site booking — exploration to appointment without friction.
006
SEO & Discoverability
Clean, indexable structure with per-page metadata, sitemap, and robots configuration.
Clean, indexable structure with per-page metadata, sitemap, and robots configuration.
05
Technical Deep Dive
5.1 / Architecture
Static-First, Integration-Driven
The application is built as a static-first Next.js (Pages Router) application, with API routes handling all dynamic operations. There is no traditional backend server — the architecture connects multiple specialized services, each responsible for a specific capability.
RenderingStatic pages for SEO performance
API LayerNext.js routes for form + integrations
BackendIntegration-driven, no monolithic server
StorageFirebase (files), Google Sheets (data)
EmailResend API + React Email templates
BookingAcuity Scheduling embedded
5.2 / Forms
Form Handling Flow
Each form type follows a structured server-side flow, keeping sensitive logic out of the client and ensuring consistent, reliable behavior.
Client Submission
User submits form with custom client-side validation.
01
API Route
Request hits a dedicated Next.js API route for that specific form type.
02
Payload Validation
Server-side validation re-runs the same schemas for safety.
03
File Upload (if present)
Files are uploaded to Firebase Storage and the returned URL is appended to the payload.
04
Email Trigger
Resend API sends structured notification to the business with all data and any file references.
05
Data Persistence (Waitlist)
Waitlist submissions are appended to Google Sheets for structured tracking.
06
Security: All sensitive operations (file upload, email trigger, data persistence) happen server-side. The client only receives a success or error response.
File Upload Pipeline
The file upload pipeline is integrated into the form submission flow, enabling clients to submit reference images as part of the waitlist process.
FILE_UPLOAD_PIPELINE
client →
User selects file in form input
api →
File received in Next.js API route
firebase →
File uploaded to Firebase Storage bucket
url →
Storage URL returned and attached to email payload
email →
Business receives file link alongside form data
5.3 / Emails
Delivery System
Emails are generated using React Email components and sent via Resend API. Each email type is tied to a specific API endpoint, ensuring clear separation of concerns.
Separation
Each form type has a dedicated API route and email template — no shared logic.
Consistency
React Email ensures styled, structured output regardless of email client.
Reliability
Resend provides high-deliverability infrastructure without self-hosting SMTP.
5.4 / Internationalization
Multilingual Implementation
Rather than adopting a heavy i18n framework, a lightweight custom solution was built that covers all requirements with minimal overhead.
Approach
Locale files store structured content per language
Language state managed client-side
Preference persisted in localStorage across sessions
Custom hooks provide translated strings to components
Custom vs. Framework
MetricCustomFramework
Bundle SizeMinimalHeavy
ControlFullLimited
SetupHoursDays
FlexibilityHighOpinionated
5.5 / Performance
Speed Through Simplicity
The architecture prioritizes speed and simplicity over abstraction-heavy solutions. Static generation ensures fast load times, with minimal runtime logic on the client.
SSG
Static Generation
All marketing and service pages are pre-rendered at build time for instant delivery.
Lean
Minimal Client Logic
Runtime computation is limited to language switching and form interactions.
Conscious
Selective Libraries
Component libraries chosen with awareness of bundle tradeoffs — Material Tailwind used selectively.
06
Outcomes & Impact
6.1 / Capability
Business Capability Expansion
The new platform removed the hard limitations of the previous Squarespace setup, unlocking workflows that were previously impossible — directly improving how the business handles and converts incoming clients.
Migration Status:Complete
From a constrained no-code platform to a fully custom integration-driven system capable of supporting all operational workflows.
EnabledComplex form workflows
EnabledImage-based client submissions
EnabledStructured waitlist system
EnabledSeamless booking integration
EnabledMultilingual content delivery
Operational Efficiency
Reducing manual coordination and enabling the business to focus on clients, not administration.
Before
Manual Client Coordination
Forms were handled manually. Client inquiries required back-and-forth messaging to collect basic information.
No File Collection
Reference images had to be shared through separate channels, creating fragmented client communication.
Result: High manual overhead, fragmented client data.
After
Automated Communication
Every form submission triggers structured email delivery — the business receives complete, organized data instantly.
Client Workflow
Submit
Notify
Respond
Impact: Structured, automated, scalable.
Zero Manual Follow-up
Contact form submissions now deliver complete client data directly to the business inbox — no chasing needed.
Automated Waitlist
Waitlist data is structured and stored in Google Sheets automatically. No manual entry or tracking required.
Centralized File Submissions
Client reference images are stored in Firebase and linked in email notifications — eliminating scattered communication.
6.2 / Brand
Premium Positioning Through Execution
The new website aligns with the brand's premium positioning — building trust and perceived value that justifies high-ticket services.
Hero Asset
Photography
High-quality fashion photography as the core visual anchor of every page.
Clean layouts with deliberate whitespace and strong visual hierarchy.
6.3 / Stability
Technical Stability
The platform runs reliably as a static-first application. The integration-based architecture reduces points of failure and requires no complex backend maintenance.
Optimal
Static-First Reliability
Pre-rendered pages load instantly and are not subject to server downtime or runtime failures.
Isolated
Integration Isolation
Each service (email, storage, scheduling) is independent — a failure in one does not cascade to others.
Serverless
Zero Backend Maintenance
No server to maintain or scale. Integrations handle their own infrastructure and reliability guarantees.
07
Lessons Learned
7.1 / Architecture
Integration-Based Architecture Is Powerful
Instead of building a full backend, the project connects specialized services for each concern — email, storage, scheduling, data collection. This approach enables rapid development while supporting complex workflows.
Email delivery (Resend)
File storage (Firebase)
Scheduling (Acuity)
Data collection (Sheets)
The result is a system that is simple, predictable, and easy to maintain — with no single point of failure.
7.2 / Product
Form Design Is Product Design
Forms are not just inputs — they are conversion tools, communication channels, and data pipelines. Designing multi-step flows and structured inputs had a direct impact on usability and business efficiency.
Conversion Tool
Multi-step waitlist forms guide users through a structured journey — increasing completion rates and data quality.
Data Pipeline
Each submission feeds structured data directly into the business workflow — email, storage, and spreadsheet in a single flow.
7.3 / Libraries
Library Tradeoffs Matter
Using Material Tailwind accelerated early development, but introduced bundle size concerns and reduced control over component behavior.
The Tradeoff
In future iterations, a fully custom Tailwind component system would provide better long-term flexibility and a leaner bundle. Choosing component libraries is a product decision, not just a developer convenience.
Bundle Size
Material Tailwind adds weight that a custom Tailwind system avoids entirely.
Customization
Framework components limit visual control — custom components are fully owned.
Maintenance
Dependency on an external library creates upgrade and compatibility surface.
7.4 / i18n
Multilingual Doesn't Always Need Heavy Tooling
A custom lightweight solution proved sufficient and easier to control than adopting a large i18n framework. It reinforced the principle:
The simplest solution that fits the problem is often the best one.
The custom i18n approach remains easy to extend, fully controlled, and adds zero framework overhead to the bundle.
7.5 / Collaboration
Working With Non-Technical Founders Requires Structure
Requirements evolve, scope shifts, and priorities change. Working directly with a non-technical founder demands proactive communication and strong independent decision-making.
The Challenge
Requirements are often loosely defined and evolving. The developer must take ownership of both technical and product decisions without a technical sparring partner.
The Outcome
This project strengthened the ability to operate independently in ambiguous environments — a capability that transfers directly to any early-stage or founder-led product context.
Developer as Product Owner
In this engagement, the developer role extended beyond code — to architecture decisions, scope management, and translating business intent into technical execution. Clear communication and proactive ownership are essential in this context.
