Amd. Francis Gabriel OKE website

This project involved building a dynamic web application with a clear separation between the user interface, backend processing, and persistent data.

Laravel was used to implement server-side functionality and expose application data through routes, while Vue.js handled the frontend experience. The project also included an administrative appointment management module built with FullCalendar, providing a calendar-based interface for organizing and coordinating appointments.

The combination of these technologies made it possible to build an application that goes beyond static content and supports data-driven interactions.

Application architecture

The application is organized around three principal technical layers:

Laravel routes provide the entry points for application requests. Controllers can then retrieve the required data and return responses consumed by Vue.js components.

Dynamic data retrieval with Laravel

A key aspect of this architecture is the ability to retrieve data dynamically rather than embedding content directly into the frontend.

For example, a Laravel route can expose an appointment collection to the calendar interface. The following is an illustrative implementation, not the confirmed original project code.

use App\Http\Controllers\AppointmentController;
use Illuminate\Support\Facades\Route;
 
Route::get(
    '/appointments',
    [AppointmentController::class, 'index']
);

The controller can transform appointment records into a structure suitable for calendar consumption:

public function index()
{
    return Appointment::query()
        ->select('id', 'title', 'start', 'end')
        ->get()
        ->map(fn ($appointment) => [
            'id'    => $appointment->id,
            'title' => $appointment->title,
            'start' => $appointment->start,
            'end'   => $appointment->end,
        ]);
}

This approach keeps data access on the backend and gives the frontend a predictable response format. In a production implementation, authentication, authorization, validation, and date-range filtering should also be applied as required.

Appointment management with FullCalendar

One of the project's notable features was the integration of FullCalendar into the administrative area.

Calendar-based interfaces are particularly useful for appointment management because they provide a chronological view of scheduled activities. Rather than working exclusively with a list of records, administrators can inspect appointments in a calendar and understand how they are distributed over time.

The integration creates a bridge between the application's stored appointment data and its visual scheduling interface.

An illustrative Vue.js integration with FullCalendar looks like this:

<script setup>
import FullCalendar from '@fullcalendar/vue3';
import dayGridPlugin from '@fullcalendar/daygrid';
 
const calendarOptions = {
  plugins: [dayGridPlugin],
  initialView: 'dayGridMonth',
  events: '/api/appointments',
};
</script>
 
<template>
  <FullCalendar :options="calendarOptions" />
</template>

Here, FullCalendar requests events from an API endpoint and displays them in a monthly calendar. The example illustrates the integration pattern; it does not imply that the original project used this exact configuration.

Administrative coordination

The appointment module provides a visual workspace for organizing scheduled activities. Its value lies in connecting the calendar interface to the application's underlying data rather than treating scheduling as an isolated visual component.

From an engineering perspective, this type of feature requires consistency between the backend's appointment records and the events displayed on the frontend. It also creates a foundation for additional capabilities, such as appointment creation, modification, filtering, and role-based access, where those capabilities are required by the business rules.

Technical considerations

The project combined several complementary concerns:

• Dynamic content delivery: Retrieving application data through Laravel routes instead of relying on static frontend content.
• Frontend-backend integration: Connecting Vue.js components to backend responses.
• Calendar integration: Using FullCalendar to represent appointment data in a visual scheduling interface.
• Data consistency: Maintaining a consistent representation of dates and events between the database, API, and calendar.
• Maintainable architecture: Separating presentation, server-side logic, and data persistence.

Technologies: Laravel, PHP, Vue.js, JavaScript, MySQL, FullCalendar.