SpeedCharge
Designed & developed by Mohd Saif
01. Web Development Problems Solved
India's EV charging market is exploding, but most players lack a credible digital presence that can simultaneously convert franchise investors, educate end-users, and operate as a self-sustaining content platform. SpeedCharge needed a single website that could: (1) instantly communicate premium brand authority to franchise investors with significant capital to deploy; (2) capture and manage inbound franchise, partner, and contact leads in real time — without CRM tooling; (3) run a content marketing engine (blog) autonomously, without developer involvement for every post; (4) surface nearby charging stations via an interactive map; (5) help visitors calculate EV savings vs. petrol/diesel to accelerate EV adoption; and (6) achieve 90+ PageSpeed scores despite housing advanced GSAP animations, SASS transitions, and Three.js visuals. Building all of this solo, while maintaining a coherent red-and-black brand identity across 15+ pages and a full backend, was the central engineering and design challenge.
02. Technical Architecture & Decisions
I selected Next.js 16 as the full-stack foundation for its App Router SSR/SSG capabilities, enabling precise control over per-page SEO metadata, server-side data fetching, and static generation of the charger catalog pages — all critical for ranking on EV-related searches. SASS was chosen over utility-first CSS to support the complex, layered design system: a SASS variable sheet controls the core blacks (#050505, #101012) and brand red (#E50914) across 15+ component stylesheets, with responsive mixins keeping breakpoints DRY. For animation, I layered GSAP (for scroll-triggered section entrances and counter animations), Framer Motion (for route transitions and stagger effects), and Lenis (for studio-quality smooth scrolling) — carefully profiling each to avoid jank. The backend is a standalone Node.js + Express.js service deployed separately, communicating over a versioned REST API. This separation allows the Next.js frontend to be deployed on Vercel while the backend runs on a Node-capable host, with independent scaling. MongoDB was chosen for its flexible document model, essential for storing structurally diverse lead types (franchise, partner, career, contact) in a single collection with a Mixed 'fields' type. The real-time leads dashboard uses SSE (Server-Sent Events) rather than WebSockets — SSE is unidirectional (server → client), which matches the use case perfectly while being far simpler to implement through proxy and firewalls. For the blog CMS, Tiptap was selected over Quill or Draft.js for its modular extension architecture — I built custom callout and note blocks as Tiptap extensions, giving editors rich formatting control without exposing raw HTML. Cloudinary handles all image optimization with auto quality and format transformations, keeping Largest Contentful Paint (LCP) well under budget despite full-bleed hero imagery.
The Development Challenge
SpeedCharge (speedcharge.in) is a production-grade, full-stack EV charging infrastructure platform purpose-built for the Indian electric vehicle market. The platform serves dual audiences — end-users looking to locate, use, and learn about EV chargers, and entrepreneurs seeking to invest in the rapidly expanding EV charging franchise opportunity across India. The public-facing marketing website is engineered with a premium, high-contrast red-and-black visual identity that immediately signals authority in the EV space. It features a comprehensive suite of pages: a high-impact homepage with animated hero stats and franchise CTAs, a detailed All Chargers directory, a live Mapbox-powered station locator with state and city filters, an interactive EV savings calculator comparing petrol/diesel/EV lifetime costs (including CO2 emissions and tree equivalency), a franchise opportunity page with a dynamic ROI calculator projecting income based on city tier, station type, and utilization rate, a full-featured blog with search and filtering, and dedicated franchise/partner lead capture forms with email notification. Behind the scenes, I engineered a complete custom backend using Node.js and Express.js backed by MongoDB Atlas. The backend powers two core admin systems: a full blog CMS with a Tiptap rich-text editor (supporting tables, images, FAQs, and SEO metadata per post), and a real-time franchise lead management dashboard driven by Server-Sent Events (SSE) — the admin receives audio and visual alerts the instant a new franchise, partner, career, or contact lead lands, without a single page refresh. Every pixel of UI, every API route, every database schema, and every animation was designed and engineered solo. The site achieves 90+ PageSpeed scores on desktop while delivering sophisticated GSAP scroll-triggered animations, Framer Motion transitions, Lenis smooth scrolling, and Three.js 3D accents — all without sacrificing Core Web Vitals.
Engineering Strategy
- Sole designer and developer — architected, designed, and shipped the entire platform from concept to production without any team.
- Engineered a pixel-perfect red-and-black premium UI using Next.js 16, TypeScript, and modular SASS with custom variables, mixins, and responsive breakpoints.
- Built a multi-page marketing website covering franchise opportunities, EV charger catalog, about, blog, locator, partner forms, legal pages, and interactive calculators.
- Developed a Node.js + Express.js REST API with JWT authentication, MongoDB schemas, Cloudinary image hosting, and Helmet security headers.
- Programmed a complete blog CMS admin panel with Tiptap rich-text editing, SEO metadata fields (meta title, description, canonical, OG tags, noIndex), draft/publish/archive workflow, featured image management, FAQ accordion sections, and full-text search.
- Built a real-time franchise leads dashboard using Server-Sent Events (SSE) — admin receives instant audio (Web Audio API triple-chime) and visual notifications when new leads arrive.
- Implemented an interactive Mapbox GL station locator with state/city filtering, marker popups, and real-time search capability.
- Built a dynamic EV savings calculator computing lifetime petrol/diesel vs. EV costs, CO2 savings, and tree equivalency; and a franchise ROI calculator projecting revenue based on city tier multipliers, station type, and utilization rates.
- Orchestrated GSAP scroll-triggered animations, Framer Motion page transitions, and Lenis smooth scrolling to deliver a premium interactive experience at 90+ PageSpeed scores.
- Configured comprehensive on-page and technical SEO: structured data, canonical URLs, OG tags, sitemap (25+ URLs), and per-post SEO metadata controlled entirely from the admin panel.
Key Outcomes
- Launched a production-grade EV charging platform that positions SpeedCharge as a premium brand in India's fast-growing electric vehicle infrastructure market.
- Achieved 90+ Google PageSpeed desktop score on a heavily animated, feature-rich platform — proving that premium motion design and Core Web Vitals are not mutually exclusive.
- Enabled real-time franchise lead capture across multiple channels (franchise, partner, career, contact) with instant SSE notifications — zero lead response delay.
- Delivered a self-service blog CMS giving the SpeedCharge team full editorial autonomy: publish, schedule, archive, and SEO-optimize posts without developer intervention.
- Built an ROI calculator that converts visitors into franchise enquiries by showing tangible investment projections — city-tier adjusted, utilization-rate aware, and broken down by charger type.
- Created a 25-URL SEO-ready sitemap with structured data, dynamic canonical URLs, and per-page OG metadata — giving every page of SpeedCharge a strong organic search foundation.
- Demonstrated full-spectrum solo engineering capability: product design, frontend animations, backend API, database modeling, CMS, real-time systems, image optimization, and SEO — all delivered by one developer.
Explore More Projects
Habibi
A fully animated, 3D interactive consultancy platform helping entrepreneurs set up businesses, open bank accounts, and secure visas in Dubai.
Arena Global Manpower
A comprehensive on-demand platform for booking specialized manpower and home services. Ranked #1 on Google, offering everything from domestic repairs to international corporate recruitment.