Team Members: Islam Hesham, Mariam Tamer
A Flutter-based implementation of Amazon's core e-commerce functionality with Firebase integration.
This project focuses on analyzing and implementing the core features of Amazon, a market-leading e-commerce application. By recreating essential functionality in Flutter, we aim to understand the architectural decisions, user interface patterns, and implementation challenges of building a complex mobile commerce platform.
This report documents the completion of Milestone 1, focusing on our initial implementation efforts.
- Create a functional prototype that mimics Amazon's core user experience
- Implement the primary navigation flows and page structures
- Establish Firebase integration for authentication and data storage
- Develop a maintainable architecture to support future enhancements
- Validate the feasibility of our approach for subsequent milestones
The Home Page implements a scrollable product discovery experience featuring:
- A search bar
- Category navigation with horizontal scrolling
- Product grid displays with dynamic pricing and ratings
- Recommendation sections
The Product Detail Page provides comprehensive information about selected items:
- Multiple product images with gallery view
- Pricing
- Product specifications and description
- "Add to Cart" and "Buy Now" functionality
The Cart system allows users to:
- View all added products with images, prices, and quantities
- Adjust quantities or remove items
- See real-time subtotal calculations
- Proceed to checkout or continue shopping
The Rating and Feedback system enables:
- Star-based product ratings (1-5 scale)
- Written review submission
- Review filtering and sorting options
The Promotions page implements:
- Daily deals and limited-time offers
- Recommendation cards
- Deal categories and filtering options
- Deal progress indicators
The Authentication system provides:
- Email and password registration
- Secure login with validation
- Account creation flow
Our implementation closely follows Amazon's design patterns:
- Bottom navigation bar with five primary destinations
- Consistent use of Amazon's color scheme (navy blue, orange accents)
- Familiar iconography and button styles
- Card-based content presentation
- Hierarchical information architecture
Navigation is implemented using Flutter's Navigator 2.0 system to handle deep linking and state preservation. We've maintained Amazon's approach to progressive disclosure, where complex information is revealed gradually to avoid overwhelming users.
The application utilizes Firebase services for backend functionality:
- Firebase Authentication: Email/password authentication with secure credential storage
- Cloud Firestore: NoSQL database for products, user profiles, cart data, and reviews
- Network Images: All product images and assets are loaded via network URLs rather than stored directly in Firebase Storage
Data models are structured to optimize Firestore read/write operations, with consideration for offline capability in future milestones.
The current implementation successfully recreates Amazon's core functionality and visual identity. Key strengths include:
- Accurate representation of Amazon's navigation patterns
- Faithful color scheme and visual design
- Functional product browsing and cart management
- Working authentication system
However, some limitations exist:
- Animation smoothness does not yet match Amazon's polished transitions
- Loading states are more simplistic than Amazon's skeleton screens
- Limited product database compared to the actual application
Usability testing revealed several insights:
- Users intuitively understood the navigation structure without guidance
- The checkout flow requires additional clarity around shipping options
- Search functionality needs type-ahead suggestions for better discoverability
- The cart icon should update in real-time when items are added
- Login persistence requires improvement to avoid frequent re-authentication
Milestone 1 has successfully delivered a functional prototype that captures the essence of Amazon's mobile experience using Flutter and Firebase. We've implemented all planned screens with working navigation and data flow, establishing a solid foundation for future development.
The team has gained valuable insights into e-commerce application architecture and the challenges of recreating complex user interfaces. The implementation has validated our technical approach while highlighting specific areas for enhancement.
Our early findings suggest that Flutter provides an excellent platform for e-commerce applications, enabling rapid development while maintaining high-quality user experiences across devices. With Firebase handling backend operations, we've been able to focus development resources on user-facing functionality.
This project demonstrates the viability of using modern cross-platform technologies to recreate sophisticated commercial applications with relatively modest development resources.