A modern, full-featured restaurant mobile application built with React Native, demonstrating professional UI/UX design, navigation patterns, and user interaction flows.
Part of the Meta Professional Certificate in Mobile App Development
Little Lemon is a Mediterranean restaurant application that showcases a complete user journey from onboarding through menu browsing and profile management. The application emphasizes clean, intuitive design and smooth user interactions.
- Onboarding - User registration and welcome flow
- Home - Menu browsing with search and filtering capabilities
- Profile - User account management and preferences
- Reservations - Booking system (future implementation)
- User registration and onboarding flow
- Profile management with avatar support
- Notification preferences
- Secure logout functionality
- Dynamic menu browsing with category filtering
- Real-time search functionality with debouncing
- High-quality menu item displays with descriptions and pricing
- Database persistence with SQLite
- Custom-styled alert dialogs
- Responsive design for multiple screen sizes
- Brand-consistent color palette and typography
- Smooth animations and transitions
- Accessibility considerations
- React Native - Cross-platform mobile framework
- React Navigation - Navigation and routing
- Expo - Development and deployment platform
- SQLite - Local data persistence
- AsyncStorage - User preferences and session management
- React Native Vector Icons - Icon system
- Expo Image Picker - Avatar/photo selection
- React Native Mask Text - Phone number formatting
- JavaScript ES6+ - Modern syntax and features
- Expo CLI - Development server and build tools
- Node.js (v14 or higher)
- npm or yarn
- Expo CLI (
npm install -g expo-cli)
- Clone the repository
git clone https://github.com/yourusername/LittleLemonProject.git
cd LittleLemonProject- Install dependencies
npm install
# or
yarn install- Install Expo fonts (optional but recommended)
npx react-native-asset- Start the development server
expo start
# or
npm start- Run on device or emulator
- Press
ifor iOS simulator - Press
afor Android emulator - Scan QR code with Expo Go app on physical device
- Press
- Primary:
#495E57(Dark Green) - Secondary:
#F4CE14(Golden Yellow) - Accent:
#EE9972(Warm Orange) - Light:
#EDEFEE(Off White)
- Headers: Playfair Display (Bold)
- Body: Inter / Karla (Regular)
- Accent: Markazi Text (Traditional)
- xs: 4px
- sm: 8px
- md: 16px
- lg: 24px
- xl: 32px
LittleLemonProject/
├── MyProject/
│ ├── screens/
│ │ ├── Home.js # Menu browsing screen
│ │ ├── Onboarding.js # User registration
│ │ ├── Profile.js # User account management
│ │ └── Reservations.js # Booking system
│ ├── utils/
│ │ ├── HeroBanner.js # Hero component
│ │ ├── database.js # SQLite configuration
│ │ └── validation.js # Form validation utilities
│ ├── assets/
│ │ ├── images/ # Restaurant photos
│ │ ├── icons/ # Icon assets
│ │ └── fonts/ # Custom fonts
│ ├── navigation/
│ │ └── Navigation.js # Route configuration
│ ├── App.js # Main application entry
│ └── app.json # Expo configuration
└── README.md
Development Mode:
npm startProduction Build:
eas build --platform ios
# or
eas build --platform android- User launches app → Onboarding screen
- Enters first name and email
- Profile created and saved
- Navigates to Home screen
- User views hero banner with restaurant info
- Browses menu items in scrollable list
- Filters by category or searches by name
- Views item details (description, price)
- User navigates to Profile
- Updates personal information and photo
- Adjusts notification preferences
- Saves changes or logs out
This project includes a complete QA automation setup for a React Native (Expo) application:
- Unit tests: validation utilities (Jest)
- Component tests: onboarding flow, validation, and error handling
- Data-layer mocking: SQLite/database and AsyncStorage
- UI state testing: loading, empty state, filtering with debounce
- CI: GitHub Actions running tests and coverage on every push / PR
Tools:
- Jest
- React Native Testing Library
- GitHub Actions
- Onboarding form validation
- Menu search and filter functionality
- Profile update and persistence
- Avatar upload and display
- Custom alert interactions
- Navigation between screens
- Responsive layout on different devices
See TESTING.md for detailed test scenarios and expected results.
- User data stored securely with AsyncStorage
- Form validation before submission
- Error handling with user-friendly messages
- Proper logout and session clearing
- Input sanitization
- Debounced search queries (500ms)
- Optimized list rendering with FlatList
- Lazy-loaded images
- Efficient state management
- Minimal re-renders with proper hooks usage
- Reservations system not yet implemented
- No backend API integration
- Offline-only functionality
- Reservations/Booking system
- Order management
- Payment integration
- Customer reviews and ratings
- Push notifications
- Multi-language support
- React Native Documentation
- React Navigation Documentation
- Expo Documentation
- Meta Mobile Developer Certificate
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
Your Name
- GitHub: @OmonUrkinbaev
- LinkedIn: @OmonUrkinbaev
Have questions or found a bug? Please open an issue on GitHub or contact me directly.
Last Updated: January 15, 2026