138

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.

Repository

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

  1. Requirements Analysis: Identified key features needed for efficient food discovery.
  2. UI/UX Design: Crafted a user-friendly interface using Material UI components.
  3. Frontend Development: Implemented the application using React and associated libraries.
  4. API Integration: Connected with the backend API to fetch and display food data.
  5. Testing and Refinement: Conducted user testing and made iterative improvements.

Challenges and Solutions

  • Data Management: Implemented efficient state management to handle dynamic food data.
  • Performance Optimization: Utilized React best practices to ensure smooth performance, especially when displaying multiple food options.
  • User Experience: Focused on creating an intuitive flow to minimize the time between opening the app and finding a suitable dining option.

Setup and Installation

To set up the EATS v1 frontend locally:

  1. Clone the repository: git clone https://github.com/sir-udenna/react-eats.git
  2. Navigate to the project directory: cd react-eats
  3. Install dependencies: npm install
  4. 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.