CODING BANG

Built Codingbang, a web development studio platform that operates simultaneously as a digital storefront and an educational tech blog. The platform's architecture was designed to transition a passive portfolio into an active client acquisition engine, with a business goal of increasing inbound client inquiries by 3x (targeting ≥15 inquiries/month). This is achieved by leveraging interactive cost calculators and transparent pricing structures.

Architecture & Tech Stack

Core Framework & UI

• Framework: Built with Next.js (v16.2.6), utilizing the App Router for Server Components and Static Site Generation (SSG). Achieving a Lighthouse performance score of 90+.
• Styling & Animation: Styled with Tailwind CSS (v4.0) and animated with physics-based micro-interactions via Framer Motion.
• Typography: Integrated Geist and Geist Mono variable fonts via next/font/google.

Content Management & Blog

• Blog Architecture: Implemented a file-based blogging system rendering Markdown/MDX files from the local filesystem.
• Parsing & Search: Utilized next-mdx-remote and gray-matter for frontmatter parsing, with client-side fuzzy search via Fuse.js.

Backend & Database Infrastructure

• Database & Auth: Integrated Supabase (PostgreSQL) to manage the contact inquiries pipeline, portfolio CRUD operations, and administrator authentication utilizing Row Level Security (RLS) policies.
• Validation: Enforced end-to-end type safety via Zod combined with Next.js Server Actions.
• Caching & Rate Limiting: Integrated Upstash Redis edge caching to handle rate limiting on contact forms (max 5 submissions/IP/hour), mitigating spam vectors.

System Features & Business Logic

• Target Audience Personas: Designed user journeys tailored for specific B2B segments: SME owners (seeking transparent pricing), Startup Founders (seeking custom web apps and verifiable track records), and Personal Brands (seeking affordable landing pages).
• Custom Design System: Established a "Cream + Dark Green" design language with a functional Light/Dark mode toggle. Implemented specific design tokens (--background, --card, --accent) to ensure visual consistency across all UI components.
• Interactive Pricing Calculator: Developed a multi-step client-side state machine allowing prospective clients to estimate project costs dynamically based on features, page counts, and timeline urgency. It then passes the estimate to WhatsApp for direct client outreach.
• Admin Dashboard: Built a role-gated CMS dashboard allowing administrators to perform CRUD operations on portfolio items, client reviews, and blog posts without touching the codebase.

Core Competencies

Next.js, Supabase, PostgreSQL, Tailwind CSS, MDX, Framer Motion, Web Architecture