Trip Task - Senior Flutter Engineer Interview Task

Overview

This project is a responsive Flutter web application that displays a list of trips, built to match a pixel-perfect Figma design. The application implements clean architecture principles with proper separation of concerns across data, domain, and presentation layers.

Task Description

Objective

Build a responsive Flutter web screen that displays a list of trips, pixel-perfect to the provided Figma design.

Requirements

• UI Implementation:

  • The user interface must be a pixel-perfect match to the attached Figma design with accurate colors, fonts & assets.

• Architecture:

  • Implement the feature using scalable clean architecture principles, include all 3 layers (data, domain, presentation).
  • Note: You don't need to share the source code, but full code review will only happen if you advance to the technical interview.

• State Management & Design Pattern:

  • You may choose your preferred state management solution and design pattern.

• Local Data Source:

  • Use the provided trips_mock.json file as your local data source.
  • The file must be included in your project and imported as an asset.

• Deployment:

  • Build your finished product and host it using Firebase's free hosting service.
  • Share the live URL with us for review.

• Time Limit:

  • You have 5 days to complete the task starting from the time you receive it.

Evaluation Criteria

• Accuracy in UI Implementation:

  • How closely the app matches the provided design.

• UI Responsiveness:

  • How well the UI adapts to different screen sizes and resizing.

• Speed of Delivery:

  • How quickly you complete the task.

• Code Standards & Project Architecture:

  • Will be reviewed in detail if you advance to the technical interview.

Attachments

• Design Figma File
• trips_mock.json (local mock data file)

Architecture & Implementation

Clean Architecture

The project follows clean architecture principles with three distinct layers:

1. Domain Layer

• Entities: Pure business objects (Trip, TripDates, TripParticipant)
• Repository Interfaces: Abstract contracts for data operations
• Use Cases: Business logic encapsulation (e.g., GetTripsUsecase)

2. Data Layer

• Models: Data transfer objects with JSON serialization
• Data Sources: Local data source implementation (TripDataSource)
• Repository Implementation: Implements domain repository interfaces

3. Presentation Layer

• Cubits: State management using Flutter Bloc (Cubit pattern)
• Screens: UI screens for different features
• Widgets: Reusable UI components

Project Structure

lib/
├── core/                          # Shared core functionality
│   ├── app/                       # App-level widgets
│   ├── bloc/                      # Bloc observer configuration
│   ├── config/                    # App configuration (colors, icons, images, JSONs, styles)
│   ├── failure/                  # Error handling (exceptions, failures, helpers)
│   ├── injection/                # Dependency injection setup (GetIt)
│   ├── route/                    # Routing configuration (GoRouter)
│   ├── theme/                    # App theme configuration
│   └── widgets/                  # Reusable core widgets
│
├── features/                      # Feature modules
│   ├── home/                     # Home screen with navigation
│   │   ├── home_inj.dart         # Feature dependency injection
│   │   └── presentation/
│   │       ├── cubit/            # Header navigation state management
│   │       ├── screens/          # Home screen
│   │       └── widgets/          # AppBar, Drawer, Tabs
│   │
│   ├── trip/                     # Trip feature (clean architecture example)
│   │   ├── trip_inj.dart         # Feature dependency injection
│   │   ├── data/                 # Data layer
│   │   │   ├── datasources/     # Local data source (JSON loading)
│   │   │   ├── models/          # Trip models with JSON serialization
│   │   │   └── repositories/    # Repository implementation
│   │   ├── domain/               # Domain layer
│   │   │   ├── entity/          # Business entities
│   │   │   ├── repository/      # Repository interface
│   │   │   └── usecases/        # Business logic (GetTripsUsecase)
│   │   └── presentation/         # Presentation layer
│   │       ├── cubit/           # Trip state management
│   │       ├── screens/         # Trip listing screen
│   │       └── widgets/         # Trip cards, grid view, loading states
│   │
│   ├── analytics/                # Analytics screen
│   ├── info/                     # Info screen
│   ├── pricing/                  # Pricing screen
│   └── tasks/                    # Tasks screen
│
└── main.dart                     # Application entry point

Technology Stack

State Management

• Flutter Bloc (v9.1.1): Using Cubit pattern for state management
• Equatable (v2.0.7): Value equality for state objects

Dependency Injection

• GetIt (v8.2.0): Service locator for dependency injection

Routing

• GoRouter (v16.3.0): Declarative routing solution

UI & Design

• Responsive Framework (v1.5.1): Responsive UI components
• Flutter SVG (v2.2.1): SVG image support
• Cached Network Image (v3.4.1): Image caching for network images
• Shimmer (v3.0.0): Loading shimmer effects
• Flutter Animate (v4.5.2): Animation utilities
• Lottie (v3.3.2): Lottie animation support
• HTML (v0.15.4): HTML parsing support

Functional Programming

• Dartz (v0.10.1): Functional programming utilities (Either type for error handling)

Localization

• Intl (v0.20.2): Internationalization and localization

Fonts

• Roboto Font Family: Custom Roboto font weights (100-900) from assets

Features Implemented

Core Features

• ✅ Responsive Flutter Web Application
• ✅ Pixel-perfect UI matching Figma design
• ✅ Clean Architecture with 3 layers (data, domain, presentation)
• ✅ Local Data Source using trips_mock.json loaded from assets
• ✅ State Management using Flutter Bloc (Cubit pattern)
• ✅ Dependency Injection using GetIt
• ✅ Declarative Routing using GoRouter

UI Features

• ✅ Responsive Design for different screen sizes using Responsive Framework
• ✅ Navigation Drawer with tab switching
• ✅ App Bar with responsive tabs
• ✅ Trip Cards with participant images and trip details
• ✅ Loading States with shimmer effects
• ✅ Error Handling with proper failure management
• ✅ SVG Icons support
• ✅ Custom Fonts (Roboto family with all weights)

Screens

• Home Screen: Main screen with navigation drawer and app bar
• Trip Screen: Displays list of trips with cards in grid layout
• Pricing Screen: Pricing information
• Info Screen: Information display
• Tasks Screen: Tasks management
• Analytics Screen: Analytics visualization

Getting Started

Prerequisites

• Flutter SDK (latest stable version, compatible with Dart 3.9.2+)
• Dart SDK (^3.9.2)
• Chrome browser (for web development)

Installation

1. Clone the repository
2. Install dependencies:

flutter pub get

1. Run the application:

flutter run -d chrome

Build for Production

To build the web application for deployment:

flutter build web

The output will be in the build/web directory, ready for Firebase Hosting or any static hosting service.

Data Source

The application uses local JSON data from assets/jsons/trips_mock.json:

• Loading Method: Uses Flutter's rootBundle.loadString() to load JSON from assets
• Data Structure: JSON contains a trips array with trip objects
• Mapping: JSON data is mapped to domain entities through models using clean architecture flow

Assets

Mock Data

• assets/jsons/trips_mock.json: Trip data source

Icons

• assets/icons/: SVG icons (calendar, filter, menu, more, notification, setting)

Images

• assets/images/logo.png: Application logo

Font Assets

• assets/fonts/: Complete Roboto font family with all weights:
  • Roboto-Thin (100)
  • Roboto-ExtraLight (200)
  • Roboto-Light (300)
  • Roboto-Regular (400)
  • Roboto-Medium (500)
  • Roboto-SemiBold (600)
  • Roboto-Bold (700)
  • Roboto-ExtraBold (800)
  • Roboto-Black (900)

Deployment

The application is built for web and can be deployed to:

• Firebase Hosting: Follow Firebase hosting documentation
• Any Static Hosting: The build/web folder contains all static files needed

Code Standards

• Clean Architecture: Strict separation of concerns
• Dependency Injection: All dependencies injected via GetIt
• Error Handling: Using Either type (Dartz) for functional error handling
• State Management: Cubit pattern for predictable state updates
• Null Safety: Full null safety support
• Type Safety: Strong typing throughout the codebase