Luminary - IWD Project

Introduction

It's the month of March, and the month of International Women's day, and at the Rise Academy frontend track, we've been split across 3 teams to work on impactful projects solving real problems women in society - Nigeria and Africa more specifically - face today.

One of these projects which I was assigned to and would be writing about is Luminary.

Luminary is a community-powered directory and news platform celebrating women who are driving change across all fields — business, science, arts, activism, sport, technology, agriculture, education, and more. It allows anyone to nominate or self-submit, is searchable by name and field, and surfaces daily and weekly news of women making impact globally.

My Team and I would be working over the next few weeks to bring Luminary to life, for this week, we created the Landing page. I would be writing about how it went, my role in the project, and the lessons I learned so far.

Week 1

Project Setup Phase

The setup phase for the project started out with each team member getting a role assigned, we are all primarily frontend developers on the project, but all have a supplementary role to manage one aspect of the project,
available roles were;

• Product Lead: Owns the PRD, scope, and feature prioritisation.
• Engineering Lead: Oversees technical architecture and approves all PRs into the prod branch.
• Design Lead: Owns the Design System, logo, and UI consistency.
• Lead Maintainer: Manages the repository and branching strategy.
• Backend Lead: (Borrowed from other tracks) Manages API integration and database schema.
• People Manager: Manages workflows, team synergy, and escalates issues to the instructor.

Once we had our roles assigned, the Lead maintainer, Isaac Shosanya created the repository to manage the project, I was assigned the role of Product Lead along with Ramnan Ramyil and we worked on the product documentation and feature prioritization. Other team members carried out their respective roles and documentation. A designer from the design track joined the team and helped create a Figma design file for the landing page. Once the foundation for the project was complete, we begun development.

My Contributions as Product Lead and Frontend Engineer

As a Frontend engineer on the project, I worked on the Hero section of the landing page, it consisted of a header text, a cta, image and some metric information for Luminary, using placeholder numbers for now.

As a Product Lead, I also carried out the following;

• Onboarded team members to our project channel on the project management tool being utilized - ClickUp
• I created custom task statuses that would align our project management process closer to our development processes
• I added tasks and assignees for each member to the ClickUp board
• I recorded a walkthrough video for the full task completion pipeline, from issue creation -> feature/task completion, and all that is required of team members in between.

Lessons Learned

So far, I have learnt and picked up improvements to writing commit messages from the standards in the documentation laid down by our Lead maintainer.

Week 2

Specific Features Implemented

This week I developed the UI and API integrations for Nominations of other women via a Nomination form on the application;

• Built the full nomination form UI.
• Integrated backend APIs for frontend consumption during nomination and self-submission form submissions.

Technical Implementation Breakdown

• Form UX logic: Implemented tab switching between nomination and self-submission panels, section collapse/expand accordion behavior to match designs precisely, and dynamic link inputs.
• Image preview: Added file preview rendering in the thumbnail circle using the FileReader API.
• Payload mapping: Transformed UI inputs into the backend payload shape .
• Submission flow: Added async JavaScript fetch integration with status feedback and error handling.

BaaS Tool and Integration

We chose Supabase as our BaaS. I reviewed the nomination service and payload requirements, and matched the frontend submission shape to match the Supabase-backed tables as expected on the backend for nominations, nominee & nominator.

Challenges & Resolutions

• Field mismatches between UI and API: The backend expected first_name/last_name fields, so I added name-splitting logic for to match the required payloads.
• Handling two form modes: I scoped dynamic elements and payload building to the active panel so both nomination and self-submission submit correctly.

What I Learned This Week

This week, from my work on the submissions flow for nominations, I learnt how to integrate API requests for complex form structures and improved my skills with UI DOM and Data manipulation in Frontend development.

Week 3

Specific Features Implemented

This week I worked on the admin-side management interfaces and the user-facing news experience for the application;

• Built the admin nominations management UI with filtering, approval and rejection actions.
• Developed the admin news article interfaces, including the add article page and shared admin sidebar behavior.
• Built the user-facing news listing page and linked it into the existing user navigation.

Technical Implementation Breakdown

• Admin nominations dashboard: Implemented a responsive nominations table and card view, filter controls, action menus, and status badges to support moderation workflows.
• Backend integration for moderation: Reviewed the nomination service and related admin routes, then connected the frontend list, search, approval and rejection actions to the authenticated backend endpoints.
• Reusable admin shell: Refactored the sidebar styles and JavaScript into shared files so the same layout and active state behavior can be reused across admin pages.
• News experience UI: Built the add article page for admins and the public news page for users, using clean mock data and responsive image handling to match the provided designs closely.

BaaS Tool and Integration

We continued using Supabase through the existing backend layer. For this week, I reviewed the nomination admin service, controller and routes, and mapped the frontend moderation UI to the backend responses so nomination records could be fetched, filtered, approved and rejected correctly from the admin interface.

Challenges & Resolutions

• Matching backend data to the UI structure: The nomination data returned from the backend needed normalization before it could fit the table design, so I mapped nested nominee and nominator fields into a frontend-friendly shape.
• Reusable navigation across admin pages: The sidebar active state did not initially work consistently across routed pages, so I updated the matching logic to normalize paths and moved the sidebar code into shared files for reuse.

What I Learned This Week

This week, from building both the admin tools and the public news experience, I learnt more about integrating authenticated frontend flows with backend endpoints, structuring reusable UI logic across multiple pages, and translating design mockups into responsive interfaces that are easier to extend as Luminary grows.

Contributors

-Product Lead 1: Ramnan Ramyil
-Product Lead 2: Awoyemi Abiola
-People Manager: Emmanuel Dania
-Lead Maintainer: Isaac Shosanya
-Design Lead: Michael Omonedo
-Engineering Lead: Daniel Chisom
-Backend Lead: Isaac Shosanya
-Volunteer (UI/UX): Ariyo Taiwo

Github Repository

Luminary