Back to Works

HiRE – Green Jobs Platform

Frontend implementation of a public-facing green jobs platform under the Society of Renewable Energy (SRE), focusing on scalable UI, content-driven pages, and production deployment.

HiRE – Green Jobs Platform

HiRE – Green Jobs Platform

HiRE is a public-facing green jobs platform developed under the Society of Renewable Energy (SRE), aimed at connecting job seekers with opportunities in sustainability-focused careers.

I worked on this project as a frontend developer, responsible for implementing production-ready UI, structuring content-driven pages, and supporting deployment to a live environment. This project became my first real production experience using Next.js.


Context & Product Scope

HiRE was built to support multiple career initiatives, including job listings, learning resources, webinars, and virtual career events.

From a frontend perspective, the platform needed to:

  • scale across content-heavy pages
  • remain accessible and readable on all devices
  • support SEO-friendly public pages
  • feel stable and trustworthy for first-time visitors

The emphasis was not on experimental UI, but on clarity, performance, and production readiness.


Frontend & UI Implementation

Design-to-Code Execution
I worked closely with a UI/UX designer to translate high-fidelity designs into responsive and maintainable interfaces using Next.js, TypeScript, and Tailwind CSS.

The focus was on:

  • layout consistency across pages
  • predictable component behavior
  • clean separation between layout, content, and interaction

Key Areas Implemented

  • Landing and campaign pages for public outreach
  • Job and career-related listing and detail pages
  • Learning-related pages with structured navigation
  • Dashboard-style layouts for logged-in users

Details around internal logic and data handling are intentionally kept at a high level.


Routing, State & Content Handling

Dynamic Routing & SEO Awareness
Implemented dynamic routes for content-driven pages while maintaining clean, SEO-friendly URLs suitable for public indexing.

UI State & Conditional Rendering
Handled various UI states to ensure smooth transitions, clear feedback, and predictable behavior across different user flows, including logged-in and public contexts.


Deployment & Workflow

Production Deployment
Supported deployment to a live production environment, including environment configuration and preview-based release workflows.

Collaboration with Backend
Worked alongside backend engineers handling authentication and data services. My responsibility stayed on frontend integration and presentation, ensuring backend complexity was not exposed to users.


Key Takeaways

  • First production-scale project using Next.js
  • Strong design-to-code frontend execution
  • Experience building SEO-friendly, content-heavy pages
  • Exposure to real production deployment workflows
  • Collaboration with designers and backend engineers
  • Building a public platform with real users and visibility

Specific implementation details are intentionally described at a conceptual level to respect organizational and platform boundaries.

Related Skills:

Frontend Development

Next.js React TypeScript Tailwind CSS Component-based Architecture

UI Implementation

Figma-to-code Responsive Layouts Design System Consistency Accessibility Awareness

Routing & Content Handling

Dynamic Routing SEO-friendly Pages Conditional Rendering Content-driven UI

Deployment & Production

Production Deployment Environment Configuration Preview & Release Workflow Post-launch Stability


Portfolio of

Riani BM

Riani BM

Frontend Developer
from Indonesia


Links: