HiRE – Green Jobs Platform

I worked on the frontend implementation of HiRE, a web platform under the Society of Renewable Energy (SRE) that provides information about green jobs, internships, and career preparation.

This project marked my first production experience using Next.js, where I was responsible for translating designs into a production-ready frontend and managing the deployment workflow.

---

Context & Project Scope

HiRE was built to support a series of career-related initiatives, including webinars and a virtual career fair, aimed at helping younger generations explore opportunities in sustainability-focused careers.

From a frontend perspective, the platform needed to be:

• accessible across devices
• content-driven and easy to navigate
• ready for public-facing production use

---

Frontend & UI Implementation

Design-to-Code Execution
Worked closely with a UI/UX designer to translate high-fidelity Figma designs into responsive and accessible UI using React (Next.js), TypeScript, and Tailwind CSS.

The implementation focused on maintaining layout consistency, visual clarity, and usability across different screen sizes.

Key Pages Implemented

• Landing Page — hero sections, testimonials, and call-to-action components
• Career Page — job listings and application-related views
• Course Listing & Detail Pages — structured content layout, pagination, and detail views
• Learning Dashboard — navigation and progress-oriented layout

---

Routing & Page Structure

Next.js Routing
Utilized file-based routing and dynamic routes to support content-driven pages while keeping URLs SEO-friendly.

State & Conditional Rendering
Handled UI states and conditional rendering to ensure smooth navigation and clear feedback across different user flows.

---

Deployment & Development Workflow

Vercel Deployment
Managed deployment using Vercel, including preview deployments for development branches and production releases. Handled environment variable configuration and ensured builds were stable across environments.

Backend Integration Awareness
Collaborated with the backend team using Firebase, focusing on frontend integration while backend logic and data handling were managed separately.

---

Key Takeaways

• First production project using Next.js
• Strong design-to-code frontend implementation
• Hands-on experience with dynamic routing and SEO-friendly pages
• Ownership of deployment workflow using Vercel
• Collaboration with UI/UX and backend teams
• Building a public-facing platform for sustainability-focused initiatives

---

Tech Stack

• Frontend: React, Next.js, TypeScript
• Styling: Tailwind CSS
• Backend Integration: Firebase
• Deployment: Vercel
• Approach: Component-based UI, responsive layouts, CI/CD workflow