web · TypeScript · 2025
ENT Crews
Front-end for the EEPIS News and Network Team. Built React + TypeScript on top of designs from the campus journalism organization's design division.
Case study · STAR
The story
Situation
ENT Crews is the public site for EEPIS News and Network Team, the campus journalism organization at Politeknik Elektronika Negeri Surabaya. The team needed a real website to host division pages, coverage submissions, and outward-facing material. The previous version was outdated and the design division had a fresh redesign ready for implementation.
- Public-facing site for a campus journalism org
- Fresh design handed over by the in-house design division
- Needed to wire the static design into a working front end
Task
As Front-end Developer my job was to implement the front end and connect it to the back-end services so the redesign actually shipped, not just sat in Figma.
- Translate design files into a working React app
- Connect the front end to the back-end services
- Hold the implementation close to the design intent
Action
I built the front end in React with TypeScript and Tailwind on top of the design division's mockups. The work pushed me to take a design-to-development workflow seriously, instead of guessing layouts from a static image. I also wired the front end to the back-end endpoints so coverage submissions and division pages worked end-to-end.
- React + TypeScript + Tailwind front end
- Layouts kept faithful to the design division's mockups
- Front-end and back-end services wired through real API calls
- Tight feedback loop with the design team during implementation
Result
The redesigned site shipped at ent.pens.ac.id. Beyond the launch, the project changed how I approach design hand-off. Working directly with the design division forced the front-end work to respect the design decisions instead of inventing around them.
- Shipped at ent.pens.ac.id
- Stronger working relationship with the design division
- Reusable React + Tailwind component patterns for follow-up work
- Role
- Front-end
- Stack
- React · TypeScript · Tailwind
- Status
- Live
Tech notes
- React + TypeScript + Tailwind, built against the design division’s mockups
- Front end wired to existing back-end services for coverage and division pages
- Live at ent.pens.ac.id