Flutter Web Training

Flutter training app built on top of DummyAPI. The UI is inspired by the DummyAPI explorer

📋 Overview

The project covers Flutter Web setup, responsive UI, routing, Firebase Hosting, CI/CD, analytics, error monitoring and basic web performance optimizations. Data comes from DummyAPI: users, posts and comments with pagination. The app runs on Web, Android and iOS

🎬 Preview

flutter-web-training.mp4

🔗 Live links

Environment	URL
Production	https://web-training-prod.web.app/
Development	https://web-training-dev.web.app/
Codemagic preview channel	https://web-training-dev--dev-preview-m9l830is.web.app/

🚀 Features

• Users - paginated user list, user profile, posts by user
• Posts - paginated feed, post details, comments for a post
• Comments - paginated feed, comment details with links to post and author
• Responsive layout - sidebar on wide screens, drawer on mobile; grid/list layouts with LayoutBuilder and MediaQuery
• Routing - go_router with URL sync (/users, /user/:id, /user/:id/posts, /posts, /post/:id, /comments, /comment/:id)
• Localization - EN/UK via easy_localization, switch without app restart
• State management - Cubits, Freezed models, repository layer
• Firebase Analytics - screen views on route changes
• Firebase Hosting - manual deploy for dev and prod
• Codemagic CI/CD - auto deploy to Firebase Hosting preview channel on push to master, prod deploy on git tag
• Sentry - error reporting in cubits, release + source maps upload on prod build
• Web optimizations - deferred loading for user profile/posts screens, shimmer placeholders, avatar precache on splash, disabled page transitions

🛠 Tech stack

• Flutter / Dart
• flutter_bloc, go_router, dio, freezed
• easy_localization, cached_network_image, shimmer
• Firebase Core, Firebase Analytics, Firebase Hosting
• Sentry Flutter
• Codemagic CI/CD

📦 Prerequisites

• Flutter SDK 3.32+ / Dart 3.8+
• Firebase CLI (for manual web deploy)
• DummyAPI app id

🔧 Setup

1. Clone the repository:

git clone https://github.com/extrawest/schypailo_flutter-web-training.git
cd schypailo_flutter-web-training

2. Install dependencies:

flutter pub get

3. Create credentials files in assets/ (do not commit them):

• credentials_development.json
• credentials_production.json

Use assets/config.example.json as a template:

{
  "appName": "[DEV] Web Training",
  "apiBaseUrl": "https://dummyapi.io/data/v1",
  "appId": "your-dummyapi-app-id",
  "sentryDsn": "https://YOUR_KEY@oYOUR_ORG.ingest.de.sentry.io/YOUR_PROJECT"
}

4. Generate code (if needed):

sh ./scripts/generate.sh

▶️ Run

Web (dev flavor):

flutter run -d chrome --dart-define=FLAVOR=dev

Web (prod flavor):

flutter run -d chrome --dart-define=FLAVOR=prod

Android / iOS:

flutter run --flavor=dev
flutter run --flavor=prod

🏗 Build

Web release:

flutter build web --release --dart-define=FLAVOR=dev
flutter build web --release --dart-define=FLAVOR=prod --source-maps

Deploy to Firebase Hosting:

sh ./scripts/firebase_hosting_deploy.sh

Prod releases on Codemagic also run scripts/sentry_release.sh to upload source maps to Sentry

🧪 Tests

flutter test

📁 Project structure

lib/
├── common/          # router, DI, shared widgets, services
├── features/
│   ├── users/       # users list, profile, user posts
│   ├── posts/       # posts feed, details, post comments
│   └── comments/    # comments feed, details
├── firebase/        # dev/prod firebase options
└── network/         # dio, api client

🤖 CI/CD

Codemagic workflows are defined in codemagic.yaml:

• web-dev-workflow - push to master, deploy to Firebase preview channel
• web-prod-workflow - git tag, build with source maps, Sentry release, deploy to prod

📝 License

Licensed under the BSD-3-Clause License - see LICENSE.txt for details

👤 Author

Created by Mykola Shchypailo

Extrawest.com, 2026