Itumò Institute - Research & Knowledge Platform

The Itumò Institute is a research and knowledge initiative focused on promoting rigorous ideas, independent thinking, and shared progress across African societies. Its mission requires a digital platform capable of communicating its vision while making research, articles, and analyses accessible to a broader audience.

I designed and developed the institute's official website using a full-stack architecture built around Laravel, Vue.js, and MySQL. Rather than treating the website as a collection of static pages, the implementation was structured to support dynamic content delivery and a clear separation between backend business logic and frontend presentation.

Architecture and technical implementation

The application follows a client-server architecture in which Laravel manages server-side logic, data access, and API endpoints, while Vue.js handles the interactive user interface.

This separation makes the application easier to maintain and allows frontend components to consume structured data through API endpoints.

REST API design with Laravel

One important aspect of the implementation is the use of API endpoints to expose content to the frontend. For a content platform, a resource-oriented API provides a consistent way to retrieve articles and research publications.

The following is an illustrative example of how a Laravel API endpoint for published articles could be structured. It demonstrates the architectural approach rather than reproducing the original project's source code.

use App\Http\Controllers\Api\ArticleController;
use Illuminate\Support\Facades\Route;
 
Route::get('/articles', [ArticleController::class, 'index']);
Route::get('/articles/{slug}', [ArticleController::class, 'show']);

A corresponding controller can handle publication visibility and return structured responses:

public function index()
{
    return Article::query()
        ->where('status', 'published')
        ->latest('published_at')
        ->paginate(10);
}
 
public function show(string $slug)
{
    return Article::query()
        ->where('slug', $slug)
        ->where('status', 'published')
        ->firstOrFail();
}

This pattern illustrates several useful backend principles: resource-oriented routing, filtering published content, predictable responses, and pagination for growing collections of articles.

Frontend integration with Vue.js

On the frontend, Vue.js provides a component-based approach for displaying content retrieved from the Laravel API. This supports reusable article cards, publication listings, detail pages, and other content-driven interface elements.

An illustrative Vue component using the Fetch API could retrieve the article collection:

<script setup>
import { ref, onMounted } from 'vue';
 
const articles = ref([]);
const loading = ref(true);
 
onMounted(async () => {
  try {
    const response = await fetch('/api/articles');
 
    if (!response.ok) {
      throw new Error('Unable to load articles');
    }
 
    const data = await response.json();
    articles.value = data.data ?? data;
  } catch (error) {
    console.error(error);
  } finally {
    loading.value = false;
  }
});
</script>
 
<template>
  <section>
    <p v-if="loading">Loading publications...</p>
 
    <article v-for="article in articles" :key="article.id">
      <h2>{{ article.title }}</h2>
      <p>{{ article.excerpt }}</p>
    </article>
  </section>
</template>

The separation between data retrieval and presentation makes the frontend easier to extend and maintain.

SEO and content visibility

For an institute whose mission depends on the dissemination of research and ideas, discoverability is an important technical consideration.

I incorporated SEO best practices and social-sharing considerations to help content reach readers through search engines and social platforms. Depending on the rendering strategy, this includes descriptive page titles, relevant meta descriptions, canonical URLs, and social metadata such as Open Graph tags.

For example, a publication page can expose metadata in the following form:

<meta name="description"
      content="Discover research, articles, and perspectives
      from Itumò Institute.">
 
<meta property="og:type" content="article">
<meta property="og:title" content="Publication title">
<meta property="og:description" content="Publication summary">
<meta property="og:url" content="https://example.org/publication">

These tags are illustrative. In a production application, their values should be generated dynamically from the actual publication being displayed.

Engineering considerations

The main technical focus was bringing together a maintainable backend, a dynamic frontend, and a content-oriented user experience. The project required attention to API contracts, data consistency, frontend integration, and the discoverability of published material.

Technologies: Laravel, PHP, Vue.js, JavaScript, MySQL, REST APIs, SEO.