SOP: Web Application Development

Status: DRAFT (V1.0)

Last Updated: 2025-12-22
Owner: Nqobizitha Mlilo

---

🌐 Modern Web Stack

We focus on modern, performant, and developer-friendly frameworks to build the Nafuna platform and client apps.

1. Frameworks:
   • Nuxt.js: Primary framework for Vue-based high-performance web applications (e.g., the Nafuna LMS).
   • Vite: used for fast development cycles and modern JS builds.
2. Back-end & Data:
   • Directus: Used as our Headless CMS and Backend-as-a-Service (BaaS) for managing all company data, contacts, and content.
   • PostgreSQL: Underlying database for robust data storage.
3. Styling:
   • Vanilla CSS / TailwindCSS: Depending on project requirements, prioritizing clean, premium UI designs.

---

🏗 Development Philosophy

• Productization: We build modules (like the Ngano framework) that can be reused across different client applications.
• API-First: Every application should communicate seamlessly with our central Directus data hub.
• Performance: Prioritize fast load times and optimized Nuxt SSR (Server-Side Rendering).

---

🔄 Workflow

1. UI/UX Design: Drafted in Affinity or Figma.
2. Schema Design: Define collections and relationships in Directus.
3. Frontend Build: Implement layouts and logic using Nuxt/Vite.
4. Integration: Connect the frontend to the Directus API using tokens.
5. Deployment: Production builds optimized for mobile-first web experiences.