A modern Flutter job search and career management application built with clean architecture principles, GetX state management, and Supabase backend.
πΊ YouTube Tutorial Series: Flutter API Integration Masterclass: Build a Real Job Finder App | Next Step
π¨ Figma Design: NextStep App Design
- About
- Features
- Architecture
- Design Patterns
- Dependencies
- Getting Started
- Project Structure
- State Management
- Authentication Flow
- Theming
- Technical Implementation
- Coding Standards
- Testing
- Supported Platforms
- Key Highlights
- Screenshots
- Contributing
- Roadmap
- Troubleshooting
- Quick Start
- Best Practices
- Resources
- FAQ
- Version History
- License
- Authors
- Support
NextStep is a comprehensive mobile application that helps users find their next career opportunity. The app provides a complete job search ecosystem with user authentication, profile management, job discovery, application tracking, and personalized recommendations.
- Splash Screen - Animated app introduction with smooth transitions
- Onboarding Flow - Multi-step introduction to app features
- User Registration - Secure account creation with validation
- User Login - Authentication with Supabase backend
- Profile Completion - Guided multi-step profile setup
- Home Dashboard - Personalized job recommendations and suggestions
- Job Search - Advanced search with filters and categories
- Job Details - Comprehensive job information and requirements
- Job Listings - Browse available opportunities with rich UI
- Apply to Jobs - Streamlined application process
- Resume Upload - Upload and manage your CV/resume
- Application Status - Track application progress
- Application History - View all submitted applications
- Favorites - Bookmark and save interesting job listings
- Profile Management - Update profile, experience, and preferences
- Settings - Customize app preferences and account settings
- Privacy & Terms - Access privacy policy and terms of service
- Bottom Navigation - Easy access to all main sections
- Responsive Design - Optimized for different screen sizes
- Custom Theming - Consistent Material Design with DM Sans typography
- Offline Support - Local caching with Hive database
The project follows a feature-first clean architecture with clear separation of concerns:
lib/
βββ core/ # Core application utilities
β βββ config.dart # App-wide configuration & environment
β βββ api/ # API client implementation
β βββ constants/ # Constants (colors, images, strings)
β β βββ app_color.dart
β β βββ app_image.dart (auto-generated)
β β βββ app_strings.dart
β βββ functions/ # Utility functions
β βββ middlewares/ # Route protection
β β βββ auth_middleware.dart
β β βββ onboarding_middleware.dart
β β βββ complet_profile_middleware.dart
β βββ network/ # Network layer (deprecated - use api/)
β βββ services/ # App services
β β βββ cache_service.dart # SharedPreferences wrapper
β β βββ supabase_service.dart # Supabase client
β βββ theme/ # Theme configuration
β β βββ app_theme.dart
β βββ utils/ # Helper utilities & validators
β
βββ features/ # Feature modules
β βββ splash/ # Animated splash screen
β β βββ screens/
β βββ onboarding/ # App introduction
β β βββ controller/
β β βββ screens/
β β βββ widgets/
β βββ auth/ # Authentication
β β βββ controllers/ # Login & Register controllers
β β βββ screens/ # Login & Register screens
β β βββ widgets/ # Auth forms
β β βββ models/ # User model
β βββ profile_setup/ # Profile completion & updates
β β βββ controllers/
β β βββ screens/
β β βββ widgets/
β βββ home/ # Dashboard
β β βββ controllers/
β β βββ screens/
β β βββ widgets/
β βββ jobs/ # Job listings & details
β β βββ controllers/
β β βββ screens/
β β βββ widgets/
β β βββ models/
β βββ search/ # Job search functionality
β β βββ controllers/
β β βββ screens/
β β βββ widgets/
β βββ favorites/ # Saved jobs
β β βββ controllers/
β β βββ screens/
β β βββ repos/
β β βββ models/
β βββ apply/ # Application flow
β β βββ controllers/
β β βββ screens/
β βββ layout/ # Bottom navigation layout
β β βββ controllers/
β β βββ screens/
β βββ settings/ # App settings
β βββ controllers/
β βββ screens/
β
βββ routes/ # Navigation and routing
β βββ app_routes.dart # Route definitions & middlewares
β
βββ shared/ # Shared widgets across features
β βββ buttons/ # Reusable button widgets
β βββ inputs/ # Input field widgets
β βββ card/ # Card components
β βββ indicator/ # Loading indicators
β βββ spacer.dart # Spacing utilities
β
βββ main.dart # Application entry point
Each feature is self-contained with its own:
- Controllers - Business logic using GetX
- Screens - UI layouts
- Widgets - Feature-specific components
- GetX - Reactive state management and dependency injection
- Controllers handle business logic and state
- Screens observe state changes reactively
- GetX Routing - Type-safe navigation with named routes
- Middlewares - Route guards for authentication and onboarding checks
- Centralized theme configuration
- Custom color palette (AppColor)
- DM Sans typography system
- flutter_sdk: ^3.9.2 - Flutter framework
- get: ^4.7.3 - State management, routing, and dependency injection
- supabase_flutter: ^2.12.0 - Backend as a Service (authentication, database, storage)
- http: ^1.6.0 - HTTP client for API calls
- hive: ^2.2.3 - Fast, lightweight local database
- hive_flutter: ^1.1.0 - Hive integration for Flutter
- shared_preferences: ^2.5.4 - Simple key-value storage
- cached_network_image: ^3.4.1 - Image caching
- eva_icons_flutter: ^3.1.0 - Eva icons library
- flutter_svg: ^2.2.3 - SVG rendering support
- svg_flutter: ^0.0.1 - Additional SVG support
- flutter_spinkit: ^5.2.2 - Loading animations
- cupertino_icons: ^1.0.8 - iOS-style icons
- flutter_dotenv: ^6.0.0 - Environment variable management
- file_picker: ^10.3.8 - File selection from device
- image_picker: ^1.2.1 - Image selection from camera/gallery
- intl: ^0.20.2 - Internationalization and formatting
- flutter_test: sdk - Testing framework
- flutter_lints: ^5.0.0 - Linting rules
- build_runner: 2.4.13 - Code generation
- hive_generator: ^2.0.1 - Hive type adapter generation
- Flutter SDK: ^3.9.2 or higher
- Dart SDK: ^3.9.2 or higher
- IDE: Android Studio, VS Code, or IntelliJ IDEA
- Android: Android Studio with Android SDK
- iOS: Xcode (macOS only)
- Supabase Account: For backend services
-
Clone the repository
git clone https://github.com/LaithMahdi/NextStep-FrontEnd cd nextstep -
Environment Setup
Create a
.envfile in the project root:# Backend API BACKEND_BASE_URL=your_backend_api_url # Supabase Configuration SUPABASE_URL=your_supabase_project_url SUPABASE_ANON_KEY=your_supabase_anon_key
β οΈ Important: Never commit the.envfile to version control. It's already in.gitignore. -
Install dependencies
flutter pub get
-
Generate Hive Adapters (if needed)
flutter packages pub run build_runner build --delete-conflicting-outputs
-
Run the app
# Debug mode on connected device/emulator flutter run # Run on specific device flutter devices # List available devices flutter run -d <device-id> # Release mode flutter run --release
Android:
# APK for testing
flutter build apk --release
# App Bundle for Play Store
flutter build appbundle --releaseiOS:
# Build iOS app
flutter build ios --release
# Build IPA for distribution
flutter build ipa --releaseWeb:
flutter build web --releaseDesktop:
# Windows
flutter build windows --release
# macOS
flutter build macos --release
# Linux
flutter build linux --releaseThe core/ directory contains shared application resources:
- config.dart - Environment configuration (API URLs, Supabase credentials, app constants)
- api/ - API client implementation for HTTP requests
- constants/ - Centralized constants (colors, images, text)
- middlewares/ - Route protection (authentication, onboarding, profile completion)
- services/ - App-wide services
cache_service.dart- SharedPreferences wrappersupabase_service.dart- Supabase client initialization
- theme/ - Material theme configuration with custom color scheme
- utils/ - Validators and helper functions
Each feature module follows this structure:
feature_name/
βββ controllers/ # GetX controllers for business logic
βββ screens/ # Full-screen views
βββ widgets/ # Feature-specific reusable components
βββ models/ # Data models (optional)
βββ repos/ # Data repositories (optional)
Implemented Features:
-
Splash (
splash/)- Animated splash screen with logo
- Auto-navigation after animation
-
Onboarding (
onboarding/)- Multi-page introduction flow
- OnboardingController for page navigation
- First-launch detection with middleware
-
Authentication (
auth/)- Login & Register screens
- LoginController & RegisterController
- Form validation
- Supabase authentication integration
- User model with Hive persistence
-
Profile Setup (
profile_setup/)- Complete profile flow for new users
- Update profile for existing users
- Multi-step form with validation
- Profile completion middleware
-
Home (
home/)- Dashboard with job suggestions
- HomeController for data management
- Job listings feed
-
Jobs (
jobs/)- Job detail view with full description
- Job application screen
- JobDetailController
- JobApplicationController
-
Search (
search/)- Job search functionality
- Search modal bottom sheet
- SearchController for query management
-
Favorites (
favorites/)- Bookmark jobs for later
- FavoriteController with repository pattern
- Local storage with Hive
-
Apply (
apply/)- Resume upload functionality
- Application status tracking
- File picker integration
-
Layout (
layout/)- Bottom navigation structure
- LayoutController for tab management
-
Settings (
settings/)- App settings and preferences
- Privacy policy screen
- Terms and conditions screen
Reusable widgets used across multiple features:
- buttons/ - Custom button components (primary, secondary)
- inputs/ - Form input widgets with validation
- card/ - Card components for job listings
- indicator/ - Loading indicators and spinners
- spacer.dart - Consistent spacing utilities
User Interaction (Screen)
β
Controller Method
β
Business Logic / API Call
β
Update Observable State
β
UI Auto-Updates (Reactive)
Example:
// Controller
class LoginController extends GetxController {
var isLoading = false.obs;
void login() async {
isLoading.value = true;
// API call
isLoading.value = false;
}
}
// Screen
Obx(() => controller.isLoading.value
? CircularProgressIndicator()
: LoginButton()
)App Launch
β
Splash Screen (3s animation)
β
OnboardingMiddleware
β
ββ First Launch β Onboarding Screens
β β
ββ Returning User β AuthMiddleware
β
ββ Not Logged In β Login Screen
β β
β Register Option
β β
ββ Logged In β CompletProfileMiddleware
β
ββ Profile Incomplete β Complete Profile
β β
ββ Profile Complete β Layout/Home Screen
The app uses GetX middlewares for route protection:
- OnboardingMiddleware - Shows onboarding only on first launch
- AuthMiddleware - Redirects unauthenticated users to login
- CompletProfileMiddleware - Ensures profile is completed before accessing main app
/ # Splash Screen
/onboarding # Onboarding Flow
/login # Login Screen (protected)
/register # Register Screen
/complete-profile # Profile Setup (protected)
/layout # Main App Layout with Bottom Navigation
/home # Home Dashboard
/job-detail # Job Details
/job-application # Apply to Job
/upload-resume # Resume Upload
/status-applied # Application Status
/favorites # Saved Jobs
/search # Job Search
/settings # App Settings
/update-profile # Update User Profile
/privacy-policy # Privacy Policy
/terms-and-conditions # Terms & ConditionsThe app uses a custom color scheme defined in AppColor:
// Access colors throughout the app
AppColor.primary // Primary brand color
AppColor.secondary // Secondary accent color
AppColor.background // Background colors
AppColor.text // Text colors- Font Family: DM Sans (Regular, Medium, SemiBold, Bold)
- Custom font weights (400, 500, 600, 700)
- Consistent text styles across the app
// Material theme with custom configurations
Theme.of(context).colorScheme.primary
Theme.of(context).textTheme.headlineLarge- Images:
assets/images/- App images and illustrations - Icons:
assets/images/icones/- Custom icon assets - Logos:
assets/images/logo/- App logos - Data:
assets/countries.json,assets/jobRoles.json- Static data
Reactive Variables:
class ExampleController extends GetxController {
var isLoading = false.obs; // Observable
var userData = UserModel().obs;
void fetchData() async {
isLoading.value = true;
// API call
isLoading.value = false;
}
}Reactive UI:
Obx(() => controller.isLoading.value
? CircularProgressIndicator()
: DataWidget()
)// main.dart - Initialize services
await Get.putAsync<ApiClient>(() async => ApiClient());
Get.put(FavoriteRepo());
Get.put(FavoriteController());
// Use in widgets
final controller = Get.find<FavoriteController>();Supabase Service:
- Authentication (Sign up, Sign in, Sign out)
- Database queries
- File storage (Resume uploads, Profile pictures)
- Real-time updates (Future feature)
API Client:
- HTTP requests with base URL configuration
- Request/response interceptors
- Error handling
Hive Database:
// Type-safe local storage
Hive.box<UserModel>(Config.userBox)SharedPreferences:
// Simple key-value storage via CacheService
CacheService.instance.saveData(key, value)Centralized validators in core/utils/:
- Email validation
- Password strength
- Phone number formatting
- Required field checks
- Files: snake_case (e.g.,
login_screen.dart) - Classes: PascalCase (e.g.,
LoginScreen) - Variables: camelCase (e.g.,
isLoading) - Constants: camelCase with const (e.g.,
appName)
class MyScreen extends StatelessWidget {
const MyScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
// UI implementation
);
}
}class MyController extends GetxController {
// Observable state
var data = ''.obs;
// Lifecycle
@override
void onInit() {
super.onInit();
loadData();
}
// Methods
void loadData() {
// Logic here
}
}# Run all tests
flutter test
# Run with coverage
flutter test --coverage| Platform | Status | Version |
|---|---|---|
| β Android | Supported | API 21+ |
| β iOS | Supported | iOS 12+ |
| β Web | Supported | Modern browsers |
| β Windows | Supported | Windows 10+ |
| β macOS | Supported | macOS 10.14+ |
| β Linux | Supported | - |
- Clean Architecture - Maintainable and scalable codebase
- Feature-First Structure - Each feature is self-contained and modular
- GetX Framework - Reactive state management with minimal boilerplate
- Supabase Backend - Modern, scalable backend-as-a-service
- Offline Support - Local caching with Hive for offline functionality
- Middleware Protection - Secure route navigation with authentication guards
- Type-Safe Models - Hive type adapters for compile-time safety
- Environment Configuration - Secure credential management with dotenv
- Responsive Design - Optimized for different screen sizes
- Custom Theme - Consistent Material Design implementation
- Repository Pattern - Clean data layer abstraction (favorites feature)
- Multi-Step Forms - User-friendly profile completion flow
- File Management - Resume and image upload capabilities
- Form Validation - Comprehensive input validation
Add screenshots of your app here to showcase the UI and features
- Splash Screen
- Onboarding
- Login
- Register
- Home Dashboard
- Job Listings
- Job Details
- Search
- Favorites
- Profile
We welcome contributions to NextStep! Here's how you can help:
-
Fork the repository
git clone https://github.com/YourUsername/NextStep-FrontEnd cd nextstep -
Create a feature branch
git checkout -b feature/amazing-feature
-
Make your changes
- Follow the existing architecture patterns
- Write clean, documented code
- Add appropriate comments for complex logic
- Test your changes thoroughly
-
Commit your changes
git add . git commit -m 'Add: amazing feature description'
-
Push to your branch
git push origin feature/amazing-feature
-
Open a Pull Request
- Provide a clear description of changes
- Reference any related issues
- Include screenshots for UI changes
- Follow Dart/Flutter style guide
- Use meaningful variable and function names
- Keep functions small and focused
- Add comments for complex logic
- Run
flutter analyzebefore committing
- Use clear, descriptive commit messages
- Format:
Type: DescriptionAdd: new featureFix: bug descriptionUpdate: component/feature nameRefactor: code sectionDocs: documentation update
- Follow feature-first structure
- Place new features in
lib/features/ - Use GetX controllers for state management
- Create reusable widgets in
shared/if used across features - Add routes to
app_routes.dart - Use middlewares for route protection
- Test on multiple devices (Android & iOS)
- Verify responsive behavior
- Test with and without internet
- Check error handling
- Update README.md if adding new features
- Add code comments for complex logic
- Update ARCHITECTURE.md if changing structure
- π Bug fixes
- β¨ New features from roadmap
- π Documentation improvements
- π¨ UI/UX enhancements
- βΏ Accessibility improvements
- π Internationalization
- π§ͺ Writing tests
- π§ Performance optimizations
This project is licensed under the MIT License - see the LICENSE file for details.
- Laith Mahdi
For support, email support@nextstep.com or join our Slack channel.
- Splash screen with animations
- Onboarding flow
- User authentication (Login/Register)
- Supabase integration
- Profile setup and management
- Home dashboard
- Job listings and details
- Job search functionality
- Favorites/Bookmarks
- Job application flow
- Resume upload
- Application status tracking
- Bottom navigation layout
- Settings page
- Privacy policy & Terms
- Local caching with Hive
- Image and file pickers
- Form validation
- Complete backend API integration
- Enhanced job filtering and sorting
- User profile avatar upload
- Application history timeline
- Real-time notifications for job updates
- Chat with recruiters/employers
- Resume builder and editor
- Interview preparation resources
- Salary insights and comparison
- Company reviews and ratings
- Advanced search filters
- Job recommendations using AI
- Dark mode support
- Multiple resume management
- Cover letter templates
- Application analytics dashboard
- Job alerts and email notifications
- Social media integration (LinkedIn)
- Multi-language support
- Accessibility improvements
Issue: Dependencies not resolving
flutter clean
flutter pub getIssue: Build fails on iOS
cd ios
pod deintegrate
pod install
cd ..
flutter clean
flutter runIssue: Hot reload not working
# Press 'R' in terminal for full restart
# Or restart with:
flutter run --no-hotIssue: Hive type adapter errors
# Regenerate Hive adapters
flutter packages pub run build_runner build --delete-conflicting-outputsIssue: .env file not loading
- Ensure
.envfile is in project root (not in lib/) - Check
.envfile has correct variable names (BACKEND_BASE_URL, SUPABASE_URL, SUPABASE_ANON_KEY) - Restart the app completely after creating/editing
.env
Issue: Supabase connection errors
- Verify SUPABASE_URL and SUPABASE_ANON_KEY in
.env - Check internet connection
- Verify Supabase project is active
Issue: Image/file picker not working on Android
<!-- Add to android/app/src/main/AndroidManifest.xml if needed -->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.CAMERA"/>Issue: Build gradle errors on Android
cd android
./gradlew clean
cd ..
flutter clean
flutter pub get
flutter runWant to get up and running quickly? Follow this condensed guide:
-
Install Flutter - flutter.dev/docs/get-started/install
-
Clone & Setup
git clone https://github.com/LaithMahdi/NextStep-FrontEnd cd nextstep -
Configure Environment Create
.envfile:BACKEND_BASE_URL=your_api_url SUPABASE_URL=your_supabase_url SUPABASE_ANON_KEY=your_supabase_key
-
Install & Run
flutter pub get flutter run
-
Build
flutter build apk # Android flutter build ios # iOS
- Lazy Loading - Controllers are initialized only when needed
- Image Caching - Network images are cached automatically
- Efficient State Management - GetX uses minimal rebuilds
- Local Storage - Hive for fast, efficient data persistence
- Environment Variables - Sensitive data in
.env(never committed) - Authentication - Secure Supabase authentication
- Route Protection - Middlewares prevent unauthorized access
- Input Validation - All forms have validation rules
- Linting - flutter_lints package enforces best practices
- Type Safety - Strong typing throughout codebase
- Error Handling - Try-catch blocks for async operations
- Code Organization - Feature-first structure for maintainability
- Flutter Documentation
- Dart Language Guide
- GetX Documentation
- Supabase Documentation
- Material Design Guidelines
Q: What is NextStep? A: NextStep is a comprehensive job search and career management mobile application built with Flutter that helps users find and apply for jobs.
Q: Is this app free and open source? A: Yes, the frontend is open source. Check the license for details.
Q: Which platforms does NextStep support? A: Android, iOS, Web, Windows, macOS, and Linux.
Q: Why GetX instead of other state management solutions? A: GetX provides reactive state management, dependency injection, and routing in one package with minimal boilerplate and excellent performance.
Q: Can I use a different backend instead of Supabase?
A: Yes, the app is designed with abstraction. You can replace SupabaseService with your preferred backend solution.
Q: How do I add a new feature?
A: Create a new folder in lib/features/, add controllers, screens, and widgets. Register routes in app_routes.dart.
Q: Where should I put reusable widgets?
A: If a widget is used across multiple features, place it in lib/shared/. If it's specific to one feature, keep it in that feature's widgets/ folder.
Q: How do I handle API calls?
A: Use the ApiClient in core/api/ or SupabaseService for backend operations. Controllers should handle business logic.
Q: Can I run this without Supabase? A: You'll need to modify the authentication and data services, but the UI and most features will work. Consider it as a starting template.
Q: Where do I get Supabase credentials? A: Create a free account at supabase.com, create a project, and find credentials in Settings > API.
Q: The app crashes on startup. What should I do?
A: Ensure your .env file exists and has all required variables. Run flutter clean and flutter pub get.
Q: How do I test the app on my phone?
A: Enable USB debugging (Android) or trust your computer (iOS), connect via USB, and run flutter run.
- β¨ Initial release
- π¨ Complete UI implementation
- π Authentication system
- πΌ Job browsing and search
- β Favorites functionality
- π± Multi-platform support
- ποΈ Local caching
- π Job application flow
This project is licensed under the MIT License - see the LICENSE file for details.
Main Developer
- Laith Mahdi - Initial work - GitHub Profile
Contributors
- We welcome contributions! See Contributing section.
- π§ Email: support@nextstep.com
- π¬ Issues: GitHub Issues
- π Wiki: Project Wiki
- β Star this repository
- π Watch for updates
- π΄ Fork to contribute
- Flutter team for the amazing framework
- GetX community for excellent state management
- Supabase for backend services
- All contributors and supporters
- NextStep Backend - Backend API (if available)
- NextStep Admin - Admin dashboard (if available)
