قعدت قهوة (Qahwah)

A virtual café for Syrians around the world — reconnecting community through media, conversation, and play.

---

Overview

قعدت قهوة (Qahwah) is a web-based social media platform inspired by the traditional Syrian café culture — where people gather to talk, watch content, play games, and share moments.

The idea was simple:

If we can’t gather physically anymore, we build the café online.

This was a university capstone project developed by a team of 5:

• 3 Backend Developers (Laravel)
• 1 Frontend Engineer & UI/UX Designer (Me)
• 1 Supporting Backend/Integration

Final Grade: 96%

---

Vision

Syrians around the world used to gather in cafés — to watch TV, debate, play chess, and socialize.

With diaspora and distance increasing, we designed Qahwah to:

• Recreate digital gathering spaces
• Enable media sharing (videos & podcasts)
• Allow group conversations ("tables")
• Support real-time communication
• Integrate classic café games (Chess)

The product blends:

• YouTube-style video feeds
• Instagram-like profiles
• Twitch-inspired stream concept
• Real-time chat & calls
• Community gaming

---

My Role

UI/UX Design

• Designed visual identity
• Created user flow diagrams before development
• Defined typography system
• Defined color system
• Designed core layouts in Figma
• Designed logo

Frontend Engineering (React)

• Built the entire client-side application
• Integrated REST APIs
• Managed state architecture
• Implemented authentication flows
• Built video feed, podcast system, chat UI, profile system
• Implemented chess game integration

---

Tech Stack

Frontend

• React
• TailwindCSS
• DaisyUI
• React Query
• Axios
• Jotai (atomic state management)

Backend

• Laravel
• Laravel Sanctum (Authentication)
• Laravel Echo (Realtime)
• MySQL

Infrastructure

• AWS S3 (media storage)
• REST API Architecture

Communication & Calls

• GetStream.io (Video Calls)
• Laravel Echo (Realtime Messaging)

---

Design System

Typography

• Primary Titles: Clash Display Variable
• Secondary Text: Roboto

Color System

• Primary: #8F5B3D
• Background / Spacing: #F6F4EE
• Base: Black

The color palette was inspired by:

• Coffee tones
• Café wood textures
• Warm, community-focused atmosphere

---

User Flow

Before development, I created a full user flow diagram mapping:

• Registration → OTP verification
• Content browsing
• Upload flow
• Social interactions
• Chat entry points
• Game access

---

Authentication System

• Email-based registration
• OTP verification
• Sanctum-based authentication
• Protected routes
• Persistent login

Built using:

• Axios for API communication
• React Query for async state
• Jotai for global atomic state

---

Core Features

Video Feed

Inspired by YouTube.

Features:

• Infinite scroll
• User-uploaded videos
• Category-based recommendation logic
• Like (filled cup)
• Dislike (spilled cup)
• Show page (video detail page)

Recommendation logic:

• Based on watched categories
• Weighted by engagement

---

Podcast System

Users can:

• Upload audio content
• Play in background
• Continue browsing while listening

Features:

• Persistent player
• Engagement system (Like/Dislike)
• Show page

---

Profile System

Inspired by Instagram.

Users can:

• View uploaded content
• See followers/following
• Edit profile
• Access history (watched content)

 

---

Search & Social Graph

• Search for other users
• Follow system
• View public content
• Discover creators

---

Real-Time Chat

Built with:

• Laravel Echo
• WebSockets

Supports:

• One-to-one messaging
• Group chats ("Tables")
• Realtime message updates

---

Video Calls

Integrated using:

• GetStream.io

Supports:

• 1:1 calls
• Group calls

---

Chess Game

To simulate café culture.

Built using:

• React chess libraries

AI:

• Local AI (~800 ELO)

Purpose:

• Casual, community-focused gameplay
• Recreational engagement

---

TV Concept (Design Phase)

Designed but not fully implemented.

Concept:

• Curated video queues
• “Channels” managed by users
• Community watch experience

---

Architecture & State Strategy

Since the application was large and multi-featured, I structured the frontend carefully:

State Management

• Jotai for atomic global state
• React Query for server state
• Separation between client and remote state

Data Strategy

• REST API calls via Axios
• Optimistic updates where possible
• Query invalidation strategy

Component Strategy

• Modular UI components
• Reusable layout shells
• Clean separation of feature domains

---

Challenges

1. Managing a Large Feature Scope

This wasn’t a simple CRUD app — it included:

• Media streaming
• Realtime chat
• Video calls
• Game integration

Balancing scope vs time was a major challenge.

2. Realtime Synchronization

Handling:

• Live chat updates
• Presence
• Group messaging

3. Media Performance

• Infinite scroll optimization
• Efficient rendering
• Handling user-uploaded content

4. UX Consistency

Without formal research phases, I had to:

• Think systemically
• Maintain visual consistency
• Avoid UI fragmentation

---

Outcome

• Final Grade: 96%
• Fully functional large-scale web app
• Successfully presented and demonstrated
• Hosted on AWS infrastructure
• Delivered under academic deadline constraints

---

What I Learned

• How to architect large frontend applications
• Realtime systems integration
• State management at scale
• Designing while engineering
• Cross-team coordination with backend developers
• Feature prioritization under time pressure

---

Future Improvements

If developed further:

• True streaming system
• Advanced recommendation engine
• Full TV channel implementation
• Speed control for podcasts
• Design system documentation
• Mobile version
• Multilingual support

---

Reflection

Qahwah was more than a university project.

It was:

• My first large-scale frontend system
• My first real-time app
• My first cultural product design

It represents the intersection of:
Engineering × Design × Identity