Building the Footer for Ekehi: My Frontend Contribution to an Open-Source Resource Platform

Introduction
Ekehi is a searchable and continuously updated business resource centre designed to support women entrepreneurs across Africa.
The goal of the MVP is to provide a lightweight, fast-loading system where users can search and filter funding opportunities, discover business resources, and bookmark relevant programs.

As part of the frontend development team, my role involved implementing the landing page footer using Vanilla HTML based on the project design and technical requirements.

This article documents the setup phase, my contribution to the project, and the lessons learned while collaborating on the Ekehi MVP for the first sprint.

Project Architecture Overview

The system follows a simple but scalable architecture consisting of four major components:

Frontend (Presentation Layer)
The user interface is built using Vanilla HTML, CSS, and JavaScript. The frontend is responsible for displaying funding opportunities, handling search interactions, and communicating with the backend API. The application is hosted on Netlify to provide fast global content delivery and automatic deployment.

Backend API (Application Logic)
The backend is built with Node.js and Express.js. It acts as the middle layer between the frontend and the database. This ensures that sensitive operations such as authentication and data updates are handled securely. The backend also manages integrations with email services such as Resend or Mailgun.

Database and Authentication Layer
The project uses Supabase (PostgreSQL) as the database. Supabase provides built-in authentication, allowing users to register, log in, and manage their accounts securely. PostgreSQL full-text search capabilities enable fast querying of funding opportunities and resources.

Admin CMS
An Admin CMS powered by Directus allows the team to manage and update resources directly within the database without modifying application code. This enables continuous updates and ensures that information remains current.

SETUP PHASE
To start contributing to the project, contributors follow a structured Git workflow to ensure smooth collaboration.

First, I forked the repository and cloned their fork locally.

git clone https://github.com/YOUR_USERNAME/ekehi.git
cd ekehi

Next, the upstream repository is added so updates from the main project can be synchronized.

git remote add upstream https://github.com/Tabi-Project/Ekehi.git

The project uses a branching strategy with the following core branches:

main – production-ready code
dev – integration branch for active development
feature/ – new features
fix/ – bug fixes
docs/ – documentation updates
All development work begins from the dev branch.

git checkout dev
git pull upstream dev
git checkout -b feature/landing-page-footer

This workflow ensures that all changes are isolated, reviewable, and integrated through pull requests.

My Role and Contribution

My primary contribution to the project was implementing the Landing Page Footer for the Ekehi website using semantic HTML and responsive layout principles.
The footer acts as a key navigation area of the platform and contains the Ekehi brand identity, grouped navigation links, and project information.

Brand Section
The first part of the footer displays the Ekehi logo, wordmark, and tagline describing the purpose of the platform.
Example implementation:

<div class="footer-brand">
  <img src="../assets/icons/ekehi-logo.png" alt="Ekehi Logo">

  <h1>ekehi</h1>

  <p>
    A searchable, continuously updated business resource centre built for
    women entrepreneurs across Africa.
  </p>
</div>

This section visually communicates the platform’s identity while also providing a clear description of the service offered.

Navigation Link Groups
The footer contains three structured navigation groups: Explore, For Partners, and About.
Each group was implemented using semantic headings and lists for accessibility and proper document structure.
Example implementation:

<div class="footer-group">
  <h4>EXPLORE</h4>
  <ul>
    <li><a href="#">Browse funding</a></li>
    <li><a href="#">Training programmes</a></li>
    <li><a href="#">Mentorship</a></li>
    <li><a href="#">Resources</a></li>
  </ul>
</div>

Using <h4> headings instead of plain text helps maintain semantic structure and improves accessibility for screen readers.
Footer Bottom Bar
The final section of the footer contains copyright information, an open-source contribution notice, and legal navigation links.
Example implementation:

<section class="footer-bottom">
  <p>© 2026 Tabi Project (TEE Foundation)</p>

  <p>Open Source & Open for Contributions</p>

  <div class="footer-legal">
    <a href="#">Privacy</a>
    <a href="#">Terms</a>
    <a href="#">Policy</a>
    <a href="#">Accessibility</a>
  </div>
</section>

This bottom bar ensures that important project information and legal links remain visible across all pages.

Lessons Learned
Working on the Ekehi project provided valuable insights into collaborative software development.

One of the most important lessons for me was understanding the importance of structured Git workflows. Using feature branches and pull requests helped to prevent conflicts and ensured that code is properly reviewed before merging.

Another key takeaway was the importance of semantic HTML and accessibility. I made sure to use meaningful HTML elements to improve both readability and usability.

I also learned how clear technical documentation improves team coordination. By defining architecture, branching rules, and coding standards early in the project, I was able to understand the project quickly and work more efficiently without confusion.
Finally, working in an open-source style environment reinforced the importance of writing clean, readable code that other developers can easily understand and extend.

Conclusion
The Ekehi MVP aims to simplify access to funding opportunities and business resources for women entrepreneurs across Africa. By combining a lightweight frontend, scalable backend, and structured collaboration workflow, the project establishes a solid technical foundation for future growth.

Contributing to this project provides hands-on experience with collaborative development, semantic frontend implementation, and structured project workflows.

Contributors
Special thanks to my fellow contributors for their collaboration on the Ekehi MVP:
@aj1732