IDCamp 2023/Fullstack/course

bagiCerita

This project stands out less for raw feature count and more for frontend engineering hygiene: localization setup, webpack environment separation, Firebase deployment workflow, and developer scripts are treated as core parts of delivery quality.

project links
Domain
Fullstack
Role
Frontend Engineer
Output
Web App
Category
Localized Story Platform

Context / Problem

A story-focused web app still needs maintainable frontend structure, localization support, and reliable build workflows to stay extensible over time.

Solution

Built a localized frontend with structured build scripts, Firebase hosting configuration, and modular client routing across story, auth, and dashboard views.

Source-backed Impact

Shows that frontend maturity can come from tooling quality, localization readiness, and deployment workflow discipline, not only visual output.

System Design

Webpack-bundled frontend using Lit components, localization assets, Firebase hosting setup, and route-based page modules for story and auth flows.

Responsibilities

  • Implemented frontend structure and routing flows
  • Set up localization and build tooling
  • Prepared deployment-oriented configuration for Firebase hosting

Stack Decisions

  • Used Lit for component-driven frontend structure
  • Separated webpack dev and prod flows to reduce delivery friction
  • Used Firebase hosting workflow to standardize publish path

Trade-offs

  • Accepted added tooling complexity to improve long-term maintainability
  • Prioritized engineering structure over minimal one-page implementation

Source-backed Outcomes

  • Localization configured for multiple locales
  • Firebase hosting workflow and frontend build scripts included

Lessons

  • Localization should be designed early, not retrofitted late
  • Frontend delivery quality often depends on tooling consistency as much as UI code

Retrospective

Next iteration should add setup documentation, request-flow notes, and clearer review screenshots for faster technical evaluation.