(02 / 08) — Full Case Study

Fennec Booking — Travel Marketplace

Architected and built the entire frontend platform from scratch as Lead Frontend Developer. A cross-platform mobile app (Android & iOS) with feature-based architecture spanning 8+ product lines, 90+ API routes, real-time support, a digital wallet, and multilingual support with RTL — shipped to the App Store and Google Play.

React NativeZustandTanStack QueryTypeScriptWebRTCi18n
Cover — iOS & AndroidShot 01
Fennec Booking — Travel Marketplace
90+
[API Routes]
8+
[Product Lines]
3
[Languages]
2
[Platforms]
Fact Sheet
Role
Lead Frontend Developer
Year
2024 — 2025
Client
Travel Fintech Startup
Platform
iOS & Android
Stack
React Native · Zustand · TanStack Query · TypeScript · WebRTC · i18n
The Showcase

A visual journey through the screens.

20 frames, capture by capture — how Fennec Booking actually flows, from first launch to final booking.

Chapter 01 / 20

Home & Discovery

The search surface
Frame 01 / 20Mobile · phone
Frame 01Mobile View

The search surface

The home screen opens with a trip-type switcher — Round trip, One-way, Multi-City — a city picker set to Oran (ORN), a date, two Adults, Economy, Refundable, and a Search button. Everything the traveler needs to start is right here.

Frame 02 / 20Video · recording
Frame 02Mobile ViewRecording

The platform at a glance

A single sweep across the app: home, flights, hotels, wallet and profile — the entire ecosystem in one scrolling overview.

Chapter 02 / 20

Flights

Results by price and time
Frame 03 / 20Mobile · phone
Frame 03Mobile View

Results by price and time

Flight results list prices in DZD alongside duration and stops — a 16 900 DZD departure at 11:15 SSH, a 118 880 DZD option at 14:25 — sorted and filterable by Price and Timing.

Price across the week
Frame 04 / 20Mobile · phone
Frame 04Mobile View

Price across the week

A horizontal calendar shows fares for each day — 7 sept, 8–10 sept, 12 sept — with the carrier name pinned below each date so the cheapest day is obvious at a glance.

Frame 05 / 20Video · recording
Frame 05Mobile ViewRecording

The full flight flow

From the search screen through results, fare comparison, seat selection and boarding pass — the entire flight booking flow recorded in real use.

Chapter 03 / 20

Hotels

Search by city
Frame 06 / 20Mobile · phone
Frame 06Mobile View

Search by city

Hotel results for Alger list real properties: Sheraton Club Des Pins (45 500 DZD/night), Hyatt Regency Algiers Airport (40 800 DZD/night), AZ Hotels Vague d'Or (37 300 DZD/night), Marriott Bab Ezzouar — each with a rating, refundability status, and per-night price.

The Sheraton detail
Frame 07 / 20Mobile · phone
Frame 07Mobile View

The Sheraton detail

Sheraton Club Des Pins — Club des Pins, Staoueli, Alger, 16101. Check-in September 8, check-out September 10, 2 Adults. Facilities, description and a night rate of 91 000 DZD for 2 nights.

Choose your room
Frame 08 / 20Mobile · phone
Frame 08Mobile View

Choose your room

Sheraton Club Des Pins, Choose Your Room — Room Only at 91 000, Wi-Fi TV toiletries at 98 500, a 2-Adults Refundable option at 116 200 up to 152 000. Every price, capacity and perk listed side by side.

Frame 09 / 20Video · recording
Frame 09Mobile ViewRecording

The complete hotel flow

From the Sheraton search, through room comparison, date selection and final booking — the real hotel booking flow captured in motion.

Chapter 04 / 20

E-Visa

Applicant information
Frame 10 / 20Mobile · phone
Frame 10Mobile View

Applicant information

A step-by-step form — step 3 of 7 — with fields for First Name, Last Name, Date of Birth (DD-MM-YYYY), Nationality, Country of Resident, gender (Male/Female), and a Scan your passport option. Saved traveller pre-fill is already populated.

Frame 11 / 20Video · recording
Frame 11Mobile ViewRecording

The e-visa flow in motion

Selecting a country, filling the applicant form, uploading documents and submitting — the guided e-visa application captured step by step.

Chapter 05 / 20

Fenno AI & Support

Fenno says hello
Frame 12 / 20Mobile · phone
Frame 12Mobile View

Fenno says hello

Fenno — Hello There! Am Ready for help you. Tell me how can I help you? with Terms & Conditions visible below. The AI assistant greets the user and awaits a travel question.

Support, two ways
Frame 13 / 20Mobile · phone
Frame 13Mobile View

Support, two ways

How can we help you today? Choose how you'd like to get support — Chat with our Chatbot Fenno or reach the Support Team. Bookings, anything — both paths ready.

Chapter 06 / 20

Wallet

Frame 14 / 20Video · recording
Frame 14Mobile ViewRecording

Fennec Pay in action

The digital wallet: balance, top-up, send and transaction history — all captured in a real use recording.

Chapter 07 / 20

E-SIM & Insurance

Frame 15 / 20Video · recording
Frame 15Mobile ViewRecording

Get an e-SIM

Browsing destination e-SIMs, choosing a plan, activating it — the full e-SIM purchase flow recorded on device.

Frame 16 / 20Video · recording
Frame 16Mobile ViewRecording

Travel insurance

Comparing coverage, selecting a policy and confirming purchase — the insurance flow captured from search to confirmation.

Chapter 08 / 20

Flixy — Travel Reels

Frame 17 / 20Video · recording
Frame 17Mobile ViewRecording

Discover by swiping

Short vertical destination reels — swipe up for the next place, tap to save. The Flixy feed brings travel inspiration to life.

Chapter 09 / 20

Account & Profile

Your profile
Frame 18 / 20Mobile · phone
Frame 18Mobile View

Your profile

akram said seghir — ACCOUNT, Manage profile, Favorite, Language, Currency, Policy & Terms, Voucher Settings, OTHER, Logout. One surface, every setting.

My Bookings
Frame 19 / 20Mobile · phone
Frame 19Mobile View

My Bookings

My Bookings — Pending, Confirmed, Cancelled tabs with search by PNR or by date. ALG → CDG on 9 Sep 2026, B&B HOTEL Cergy Pierrelaye, PNR 1587516, 26 Aug 2026 — all visible at once.

Notifications
Frame 20 / 20Mobile · phone
Frame 20Mobile View

Notifications

A running feed of booking updates — items added to trips with reference numbers (196857, 196832, 196670, 196631), hotels linked and itinerary changes pushed in real time.

Overview

The Algerian travel market lacked a unified mobile platform where users could search, book, pay, and manage their entire journey — flights, hotels, transfers, visas, and mobile recharge — all from their phone.

React NativeZustandTanStack QueryTypeScriptWebRTCi18n
Features

What users can do.

09product
lines
01 /09

Flights

Search, compare, customize baggage & seats, book, pay, and download digital tickets — all in one flow.

SearchCompareSeats & BaggageE-ticket
[01] · Flights
02 /09

Hotels

Search by destination, room selection, interactive map view, booking & payment integration.

SearchRoom selectionMap viewBooking
[02] · Hotels
03 /09

Travel Packages

Flight + hotel bundles in a single unified booking flow with smart pricing.

Flight + hotelOne flowSmart pricing
[03] · Travel Packages
04 /09

Airport Transfers

Search, book, and pay for ground transport to and from airports seamlessly.

SearchBookPay
[04] · Airport Transfers
05 /09

E-Visa

Browse visa requirements by country and apply online with guided document submission.

RequirementsApply onlineDocuments
[05] · E-Visa
06 /09

Mobile Recharge

Instant mobile recharge for Djezzy, Mobilis & Ooredoo — top up anywhere, anytime.

DjezzyMobilisOoredoo
[06] · Mobile Recharge
07 /09

Fennec Pay

Digital wallet with PIN security, top-up, transfers & fast payments across the platform.

PIN securityTop-upTransfers
[07] · Fennec Pay
08 /09

Fenno AI

Intelligent travel assistant powered by AI for search, support, and guided recommendations.

Search helpSupportRecommendations
[08] · Fenno AI
09 /09

Travel Reels

Destination inspiration & discovery through short-form video content.

DestinationsShort filmSave
[09] · Travel Reels
Architecture

What I built under the hood.

Feature-based Architecture

Modular code organization across flights, hotels, transfers, e-visa, wallet & support — each feature isolated and scalable in a cross-platform codebase.

Zustand + TanStack Query

Lightweight client state with Zustand, server state orchestrated via TanStack Query for optimal caching and synchronization across mobile sessions.

90+ API Routes

Comprehensive API layer handling search, booking, payments, user management, push notifications, and real-time events.

Cross-platform Mobile-first UX

Single React Native codebase for Android & iOS with touch-optimized interactions, onboarding, biometric auth flows, and adaptive layouts.

Real-time Live Support

In-app chat with AI support, Click-to-Call via WebRTC, push notifications, and instant agent connection.

Multilingual + RTL

Full English, French & Arabic with complete RTL layout support for Algeria and beyond.

Additional Capabilities

Beyond the core.

01Unified booking hub with tickets, vouchers & sharing
02Digital ticket generation and download
03Interactive map views for hotels and transfers
04Smart search across all product lines
05Push notifications and booking status updates
06Secure payment processing and wallet top-up
07Profile management and booking history
08Onboarding flows and biometric authentication