All projects
R

Full-Stack · Public Engineering Showcase

Public Engineering Showcase

Recipe Management System

“Jollof”, a Ghanaian recipe web app in PHP & MySQL, with a public site, a secure admin CRUD area and AJAX live-search.

My Role
Full-Stack Developer
Timeline
BSc coursework, Web Application Development module
Year
2026
Status
Public Engineering Showcase
PHPMySQLJavaScriptAJAX
Live site

Role

Sole developer: independent coursework, built end to end without a team.

Scope

Built the public site, the secure admin CRUD area, AJAX live-search, image upload with preview, and soft delete with restore.

Engineering depth

Prepared-statement MySQL access throughout, Nielsen usability heuristics and WCAG accessibility considerations applied to a responsive interface, and vanilla JavaScript + AJAX integrated with the PHP backend for live search.

Overview

“Jollof” is a full-stack web app celebrating traditional Ghanaian food, from Jollof rice to Kelewele, built in vanilla PHP and MySQL for Arden University's Web Application Development module.

It pairs a clean public site (home, recipes, search, about) with a secure administrative area behind a login, offering full CRUD, image upload with preview, live search and soft delete with restore. Nielsen usability heuristics and WCAG accessibility considerations were applied throughout the responsive interface.

Business problem

The brief was to build a database-backed web application with a public interface and a secured admin interface offering full CRUD, with genuine attention to usability and security, not just a working demo.

The content itself needed a clear model: recipes with a category, description, step-by-step instructions, prep and cook times, difficulty and an image.

Key achievements

  • A working, deployed recipe web app with a polished public site and a full admin CRUD area.
  • Usability and accessibility applied deliberately, not retrofitted, per Nielsen heuristics and WCAG considerations.
  • A demonstrable grasp of JavaScript, AJAX and PHP working together in the live-search.

Engineering challenges

Building the live-search

Wiring JavaScript, AJAX and the PHP backend so the table filters smoothly without a reload took careful handling of requests and rendering.

Applying usability heuristics concretely

Turning Nielsen's heuristics into specific interface decisions, rather than a checklist, shaped the create/edit flow and its feedback states.

Balancing scope against a fixed deadline

Working solo against a module deadline meant choosing depth on core CRUD, search and accessibility over breadth. Features like tagging were deliberately deferred rather than half-built.

Technology stack

Core

PHPMySQLServer-rendered

Frontend

JavaScriptAJAXResponsive UI

Quality

Nielsen heuristicsWCAG considerationsSoft delete
Technical deep dive: architecture, database, engineering decisionsFor technical reviewers

Requirements

Requirements

  • A public site to browse, view and search recipes.
  • A secure, authenticated admin area with full CRUD.
  • Image upload with preview.
  • Live search without a full page reload.
  • Soft delete with restore.
  • Usability and accessibility applied to a responsive interface.

Solution

The solution

The public site presents a featured dish, category browsing and search over a catalogue of Ghanaian recipes. The admin area, gated by a login, provides the full create/read/update/delete lifecycle over recipes, with a live image preview as fields change.

The standout admin feature is an asynchronous live-search in “Manage Recipes”: JavaScript and AJAX call the PHP backend to filter the table dynamically, with no full page reload. Deletes are soft: recipes move to a Trash and can be restored.

Nielsen's usability heuristics (visibility of system status, user control and error prevention, among others) and WCAG accessibility considerations were applied to the responsive interface throughout, not retrofitted at the end.

Architecture

System architecture

A server-rendered PHP application over MySQL. Shared includes handle configuration, the admin session/auth guard, and image upload; page scripts render the public pages and the admin CRUD flows. The live-search endpoint returns filtered results to the browser over AJAX.

Loading diagram…
High-level system architecture

Data

Database design

A recipe belongs to a category and carries a title, short description, instructions, prep and cook times, a difficulty and an image path. A soft-delete timestamp preserves removed recipes for restore, and admin users authenticate against a hashed password.

Loading diagram…
Entity-relationship model

Features

Key features

Public recipe site

Home, category browsing, search and recipe detail for traditional Ghanaian dishes.

Secure admin CRUD

A login gates full create, read, update and delete over recipes.

AJAX live-search

The admin's Manage Recipes list filters dynamically via JavaScript + AJAX, with no page reload.

Image upload & preview

Uploaded images are validated and previewed live as the form is edited.

Soft delete & restore

Removed recipes move to a Trash and can be restored, rather than being destroyed.

Usability & accessibility by design

Nielsen usability heuristics and WCAG accessibility considerations applied to a responsive interface.

Engineering

Engineering decisions

Vanilla stack by deliberate choice

No framework, chosen so the module assessment could evaluate my own handling of routing, auth and data access directly, rather than a framework's: a tradeoff of more boilerplate for more visible fundamentals.

AJAX over the PHP backend

The live-search fetches filtered results asynchronously, demonstrating JS + AJAX + PHP working together.

Soft delete over hard delete

Deleting sets a timestamp and moves the recipe to Trash, so it stays recoverable.

Usability heuristics applied deliberately

Nielsen's heuristics informed concrete decisions: visible system status on save/delete, clear error prevention on required fields.

Interface

Screenshots

Jollof recipe app public home page
The public home: “Taste the Best of Ghana”, with search and a featured dish.
Admin Manage Recipes CRUD table with live-search
The admin Manage Recipes area: CRUD table with AJAX live-search.
Admin edit recipe form with live preview
The edit form, with a live preview and image upload.

Reflection

Lessons learned

01

Applying usability heuristics during design, not after, changes which decisions you even consider.

02

A small async touch like live-search noticeably improves how responsive an admin tool feels.

What's next

Future roadmap

  • Push the source to a public repository as the flagship open code example on this portfolio.
  • Tagging and richer public search and filtering.

Next case study

Flayona

Marketplace backend, payment integration and BNPL lending for a commercial e-commerce client: distributor pricing, Paystack, Mobile Money, KYC.