Top-level pages
3
Back to Projects
Project Detail
Eklas Solution Website
A Next.js (App Router) marketing/site frontend that renders company pages (Home, About, Contact) with interactive client-side components (carousels, animations, contact form UI, map embed). The codebase produces server-rendered HTML and cl...
Frontend EngineerDuration: 2 weeksType: platform
Key Achievement Metrics
Top-level components
21
UI primitive files (components/ui)
57
Architecture View
Processing state: architecture signal graph is initializing...
Decision Log
Use Next.js App Router with mixed server/client components
Improves first-paint performance for static markup while retaining interactivity where necessary.
Trade-off: Client bundles increase JS payload for interactive pages; requires careful partitioning to avoid over-hydrating.
Serve images unoptimized via Next config (images.unoptimized = true)
Simpler deployment (avoids extra CPU at request-time or need for remote image service) and prevents build-time image transforms.
Trade-off: Larger bandwidth and worse LCP for image-heavy pages; offloads optimization responsibility to CDN or pre-processed assets.
Simulated contact form (no backend)
Minimal scope and avoids needing a server-side endpoint for initial delivery.
Trade-off: No lead capture persistence; real deployments require a secure backend or third-party form service.
Architecture Narrative
Challenge
Provides an information and lead-capture surface for a regional telecom and digital-finance distributor (content delivery, basic contact UX, localized marketing pages).
Solution
Monolithic single-repository web application using Next.js App Router (server + client components), delivered via static assets/CDN and server-side rendering where required.
Result
Key measurable signals: Top-level pages (3), Top-level components (21), UI primitive files (components/ui) (57).
Trade-off Matrix
| Dimension | Selected Option | Impact | Compromise |
|---|---|---|---|
| Server Components vs Client Components | Default server components for layout and static content; use client for interactive widgets. | Faster initial paint, smaller server-side bundle for non-interactive UI. | Higher client bundle size where interactivity is required. |
| Image Optimization | images.unoptimized = true (explicit disable). | Simpler runtime and fewer build-time transforms. | Larger network transfer size and worse LCP; offloads optimization responsibility. |
What I'd Do Differently
+
Implement a server-side contact submission endpoint (API route or serverless function) with validation, rate limiting, and CAPTCHA; persist leads to a secure datastore (e.g., a managed DB or external CRM integration).
+
Re-enable image optimization pipeline (Next Image optimization or upstream CDN resizing) and audit all public/ image sizes for appropriate pre-scaling to reduce LCP.