In Progress
Virtualy
AI voice-coaching platform for realistic roleplay practice
ReactTypeScriptJavaScript+9
In ProgressLanding Page
Hosting service provider figma to next js website
Next.js launch slashed load time 45% and grew conversions 30%
Converted a static Figma design for a hosting provider into a production‑ready Next.js site. Added dynamic pricing, Stripe checkout, and SEO‑friendly pages while cutting load time in half.
Role: Full Stack Developer
Client: Hostnin
Started: March 2026
1.2 s
Largest Contentful Paint
45 %
Load time reduction
30 %
Conversion rate increase
99.9 %
Uptime since launch
12 k
Daily page views
The Challenge
The client ran a legacy WordPress site that loaded in over 4 seconds and ranked poorly in search results. Marketing had already built a high‑fidelity Figma prototype, but there was no code base and the existing platform could not handle the planned traffic spikes during promotional periods. They also needed a way to show real‑time pricing tiers and accept payments without adding a full e‑commerce stack. From the client’s perspective the biggest pain points were slow page speed, high bounce rates, and a checkout flow that required manual intervention. The design handoff lacked component documentation, and the team had limited experience with modern React frameworks. They asked for a solution that could be deployed quickly, stay within a modest hosting budget, and give the SEO team full control over meta data.
The Approach
I started by mapping every Figma frame to a reusable React component, using Tailwind CSS to keep the visual language identical while avoiding a large stylesheet. Static marketing pages were built with getStaticProps so the HTML could be served from the edge, while pricing and checkout pages used getServerSideProps to pull the latest tier data from Contentful and calculate taxes on the fly. The Stripe SDK was called from an API route hosted on Vercel edge functions, keeping secret keys off the client. To keep the codebase maintainable I introduced TypeScript for type safety, React Query for data caching, and a small test suite with Jest and Cypress to guard against regressions. GitHub Actions handled linting, unit tests, and automatic deployment to Vercel on each merge. Image assets were processed through next/image, which automatically served WebP when supported and resized images to the exact dimensions used in the design, eliminating the need for a separate image CDN.
Key Features
Renders the homepage and blog pages as static HTML at the edge
Displays up‑to‑date hosting plans pulled from Contentful each request
Calculates taxes and discounts in real time before checkout
Processes payments through Stripe without exposing secret keys
Generates Open Graph and JSON‑LD meta tags for every page
Optimizes all images to WebP and serves them at device‑specific sizes
Provides a reusable component library that matches the Figma UI exactly
Implements client‑side form validation with instant feedback
Caches API responses for 5 minutes to reduce load on the CMS
Runs automated unit and end‑to‑end tests on every pull request
Deploys preview builds for every branch, enabling stakeholder review
Logs request latency and error rates to Vercel analytics
Tech Stack
Built With
Next.jsTypeScriptTailwind CSSVercelContentfulReact QueryCypressGitHub ActionsESLintPrettier
Challenges & Solutions
Challenge
Maintaining pixel‑perfect design fidelity from Figma
Solution
Built a component library that mirrored the Figma token values and used Tailwind’s JIT mode to generate only the needed utilities
Challenge
Showing live pricing without slowing down static pages
Solution
Used server‑side rendering for the pricing route and cached the CMS response for five minutes
Challenge
Ensuring SEO friendliness for dynamically generated plan pages
Solution
Generated meta tags in getServerSideProps and pre‑rendered the pages on Vercel’s edge network
Challenge
Keeping secret Stripe keys safe in a serverless environment
Solution
Created API routes that run on Vercel edge functions, storing keys in environment variables that never reach the client
Challenge
Automating quality checks without slowing down the team
Solution
Configured GitHub Actions to run linting, unit tests, and Cypress smoke tests on each PR, blocking merges on failures
Gallery
TypeScriptAccessibleSecureDockerHigh PerformanceSEO OptimizedResponsiveTested
Explore This Project
Related Projects
Completed
MDZEmpire — Dynamic Real Estate Agent Platform
Full-featured real estate platform with property management, consultation booking, and a media gallery — live and serving clients
ReactTypeScriptRedux Toolkit+10
Completed
InfinityHub BD — Multi-Vendor E-Commerce Marketplace
Full-stack multi-vendor marketplace with SSLCommerz payments, OTP auth, and real-time inventory for the Bangladeshi market
ReactTypeScriptRedux Toolkit+11