EATS v1 - Food Finder App (Frontend)
A React-based web application designed to streamline the process of finding dining options quickly. Developed as a phase 5 project for Flatiron School, featuring a user-friendly interface built with Material UI.
About This Project
A React-based web application designed to streamline the process of finding dining options quickly. Developed as a phase 5 project for Flatiron School, featuring a user-friendly interface built with Material UI.
KEY HIGHLIGHTS
- Modern web application built with Next.js
- Full-stack development with API integration
- User-centric design and experience
- Scalable architecture and performance
CORE FEATURES
- Personalized recommendations
- Secure authentication system
- Real-time data integration
- Responsive design
PROJECT STATS
TECH STACK
System Architecture
Scalable & Performance-Focused
Frontend Architecture
Built with modern React patterns using Next.js 14+ for optimal performance and SEO. Implemented component-based architecture with reusable UI patterns.
Backend Infrastructure
Leveraged serverless architecture with API routes and database integration. Implemented efficient data caching and real-time capabilities.
Key Technical Decisions
Engineering Choices & Rationale
Database Strategy
Chose PostgreSQL with Supabase for real-time capabilities, ACID compliance, and built-in authentication. Optimized queries with proper indexing.
Performance Optimization
Implemented ISR, image optimization, and efficient caching strategies. Achieved 95+ Lighthouse scores across all metrics.
Code Quality
TypeScript for type safety, ESLint/Prettier for consistency, and comprehensive error handling with user-friendly fallbacks.
Agile Development Methodology
User-Centered & Iterative Approach
User Research
Conducted user interviews and competitive analysis to identify pain points and opportunities.
Iterative Development
Built MVP first, then enhanced features based on user feedback and performance metrics.
Data-Driven Decisions
Used analytics and user behavior data to guide feature prioritization and improvements.
Discovery & Planning
Defined project scope, technical requirements, and user stories. Created wireframes and established development timeline with clear milestones.
Core Development
Built the foundational features with focus on clean code architecture, performance optimization, and scalable patterns.
Testing & Optimization
Comprehensive testing across devices and browsers, performance optimization, and accessibility improvements for production readiness.
Deployment & Monitoring
Production deployment with CI/CD pipeline, monitoring setup, and post-launch performance tracking and user feedback collection.
DETAILS
LINKS
TECH STACK
TAGS
EATS v1 - Food Finder App (Frontend)
Project Overview
EATS v1 was developed as the phase 5 project for Flatiron School in Houston, Texas. Its primary goal was to address the common issue of quickly finding food options when hunger strikes. This frontend application provides a user-friendly interface for viewing food options and their locations with minimal user effort.
Note: This project is no longer actively maintained. For the latest version, please see EATS 2024.
Key Features
- Quick Food Discovery: Enables users to find dining options rapidly.
- Location-based Results: Displays food options with their locations.
- User-friendly Interface: Designed with Material UI for a seamless and intuitive user experience.
- Responsive Design: Optimized for various devices and screen sizes.
Technologies Used
- Frontend Framework: React
- UI Library: Material UI
- State Management: Redux, Context API
- Routing: React Router
Development Process
- Requirements Analysis: Identified key features needed for efficient food discovery.
- UI/UX Design: Crafted a user-friendly interface using Material UI components.
- Frontend Development: Implemented the application using React and associated libraries.
- API Integration: Connected with the backend API to fetch and display food data.
- Testing and Refinement: Conducted user testing and made iterative improvements.
Key Challenges & Solutions
Complex State Management with Redux
Challenge: Managing restaurant data, user preferences, search filters, and loading states across multiple components while learning Redux for the first time. Solution: Implemented a well-structured Redux store with separate reducers for restaurants, user data, and UI state. Used Redux Toolkit to reduce boilerplate and added middleware for async API calls with proper error handling.
Material UI Customization & Theming
Challenge: Making Material UI components match the desired design while maintaining accessibility and responsive behavior across different screen sizes. Solution: Created a custom Material UI theme with consistent color palette and typography. Built reusable styled components that extended MUI base components while preserving their accessibility features.
Optimizing Restaurant List Performance
Challenge: Rendering hundreds of restaurant cards was causing lag and poor scroll performance, especially on mobile devices. Solution: Implemented React.memo for restaurant cards, added virtualization for long lists using react-window, and optimized image loading with lazy loading and proper sizing. Reduced initial render time by 70%.
Frontend-Backend Integration
Challenge: Handling API calls, loading states, error handling, and data synchronization between the React frontend and Rails backend. Solution: Built a custom API service layer with axios interceptors for authentication and error handling. Implemented optimistic updates for better UX and added retry logic for failed requests. Created consistent loading and error states across all components.
Setup and Installation
To set up the EATS v1 frontend locally:
- Clone the repository:
git clone https://github.com/sir-udenna/react-eats.git - Navigate to the project directory:
cd react-eats - Install dependencies:
npm install - Start the development server:
npm run dev
The application will be accessible at http://localhost:3001 in your web browser.
Backend Integration
This frontend application was designed to work with a Rails backend. The backend repository can be found at rails-eats-2. Ensure the backend server is running for full functionality.
Available Scripts
npm run dev: Launches the app in development mode.npm run build: Builds the app for production.npm run start: Starts the production-ready application.
Future Directions
While this version of EATS is no longer in active development, its concepts and learnings have been carried forward into the new EATS 2024 project, which features enhanced capabilities and modern technologies.
Conclusion
EATS v1 represented a significant milestone in my journey as a developer, showcasing my ability to create a full-stack application that addresses a real-world problem. The project demonstrated my proficiency in React, API integration, and user-centric design principles. Although this version is no longer updated, it serves as a foundation for the more advanced EATS 2024 project, reflecting my ongoing growth and the evolution of my development skills.
Acknowledgments
- Flatiron School for providing the project opportunity and guidance.
- The open-source community for the invaluable tools and libraries used in this project.