System Requirements Document for achu-and-kati-kati-express

1. Introduction

The "Achu & Katikati Express" is a mobile-first web application designed to connect food buyers in Douala, Cameroon, with local cooks offering authentic Grassfield dishes. The application aims to provide a seamless platform for ordering traditional dishes like Achu, Fufu Corn, and Kati-Kati, with a focus on cultural authenticity and local engagement.

2. System Overview

The application facilitates the ordering of individual dishes from local cooks, with a focus on authentic Bamenda-style cuisine. It supports bilingual functionality (English and French) and integrates mobile money payment systems (MTN MoMo and Orange Money) with an escrow mechanism to ensure secure transactions. The platform is built using React, Tailwind CSS, TypeScript, and Supabase, ensuring a robust and scalable solution.

2a. Product Interpretation and Delivery Boundary

The application is a mobile-first web platform that connects food buyers and local cooks in Douala, Cameroon. It requires user enrollment for both buyers and cooks, with role-specific functionalities such as dish ordering and menu management. The application supports full bilingual functionality and integrates with local mobile money services for secure payments. The system is designed to be culturally vibrant, reflecting the local cuisine's authenticity.

2b. Source Content Inventory

Not applicable as no explicit content_source directive is provided.

2c. Page Content and Component Coverage

Landing

• Information/State: Display hero headlines in English and French, city selector defaulting to Douala, and category filters.
• Primary Actions: Browse cooks by category.
• Components: Hero section, city selector, category filters.
• States: Loading, empty, success, error.

Login

• Information/State: User authentication for buyers and cooks.
• Primary Actions: Login, password reset.
• Components: Login form, password reset link.
• States: Loading, success, error.

Dish Details

• Information/State: Display dish options, customization, and pricing.
• Primary Actions: Customize dish, add to cart.
• Components: Dish customization options, add-ons, pricing.
• States: Loading, success, error.

Checkout

• Information/State: Display order summary, location selection, payment options.
• Primary Actions: Confirm order, make payment.
• Components: Order summary, location selector, payment method.
• States: Loading, success, error.

Order Tracking

• Information/State: Display order status, escrow status, and PIN verification.
• Primary Actions: Verify order with PIN, track order status.
• Components: Order status, PIN verification.
• States: Loading, success, error.

Menu Management

• Information/State: Display and manage dishes, pricing, and add-ons.
• Primary Actions: Add/edit dishes, set prices.
• Components: Dish management form, pricing options.
• States: Loading, success, error.

Settings

• Information/State: Language preferences and dictionary translations.
• Primary Actions: Switch language.
• Components: Language toggle, translation settings.
• States: Loading, success, error.

3. Functional Requirements

• As a Food Buyer, I should be able to browse local cooks by category to find specific dishes. (explicit)
• As a Food Buyer, I should be able to customize my dish order with specific soup and pepper preferences. (explicit)
• As a Food Buyer, I should be able to pay for my order using MTN MoMo or Orange Money with escrow protection. (explicit)
• As a Food Buyer, I should be able to track my order status and verify pickup/delivery with a 4-digit PIN. (explicit)
• As a Local Cook, I should be able to register and manage my menu, including setting prices for dishes and add-ons. (explicit)
• As a Local Cook, I should be able to receive payments after PIN verification. (explicit)
• As a user, I should be able to switch between English and French for all application content. (explicit)

4. User Personas

• Food Buyer: Orders individual authentic dishes, selects customizations, pays via mobile money, and verifies pickup/delivery with a 4-digit PIN.
• Local Cook: Offers dishes to buyers, registers with a quarter, and manages menu pricing and add-ons.

5. Core User Flows

Food Buyer Flow

1. Access the Landing page and browse cooks by category.
2. Select a dish and customize it with preferred options.
3. Proceed to Checkout, select location, and choose payment method.
4. Complete payment via MTN MoMo/Orange Money.
5. Track order status and verify pickup/delivery with a 4-digit PIN.

Local Cook Flow

1. Register and log in to the Menu Management page.
2. Add or edit dishes, set base prices, and configure add-ons.
3. Receive notifications of new orders and verify payment release post-PIN verification.

6. Visuals Colors and Theme

• Muse: Haraldur Thorleifsson
• Palette:
  • Background: #FFF8E1
  • Surface: #FFFFFF
  • Text: #3B3B3B
  • Primary: #FF6F61
  • Accent: #FFC107
  • Muted: #BDBDBD
• Typography:
  • Headings: Sora — Bold
  • Body: Outfit
  • Scale: 1.5 modular, 48/32/24/18/16
• Shape Language: Chunky rounded cards and buttons
• Layout: Mobile-first with color-blocked sections
• Imagery: Custom illustrations of local dishes

7. Signature Design Concept

A bold hero section with large bilingual type over a coral background, featuring illustrations of local dishes. Rounded card components with vibrant color accents for dish listings. Interactive hover effects on dish images and icons to enhance engagement.

8. Interaction Model & Motion Direction

• Interaction Model: Animated
• Motion Tempo: Expressive
• Hero Dimensionality: Layered_2d
• Landing Hero Motion Brief: A bold hero section with large type over a color-blocked background featuring illustrations of local dishes. Interactive hover effects and dynamic color transitions enhance user engagement.

9. Non-Functional Requirements

• The application must be mobile-first, ensuring optimal performance and usability on mobile devices. (explicit)
• The application must support full bilingual functionality, allowing users to toggle between English and French. (explicit)
• The application must integrate with MTN MoMo and Orange Money for secure payment processing. (explicit)

10. Tech Stack

• React
• Tailwind CSS
• TypeScript
• Lucide Icons
• Supabase

11. Assumptions and Constraints

• The application will be used primarily in Douala, Cameroon, and must reflect local cultural and culinary practices.
• The default location selector option is Bonaberi.
• Orders are per individual plate, not bulk packages.
• The exact terminology "Freshly Pounded Achu" must be used.

12. Glossary

• Achu: A traditional dish from the Grassfields region of Cameroon, typically served with yellow or black soup.
• Kati-Kati: A dish made with grilled chicken, often served with Fufu Corn.
• MTN MoMo/Orange Money: Mobile money services used for payment transactions in Cameroon.
• Escrow: A financial arrangement where a third party holds and regulates payment of the funds required for two parties involved in a given transaction.