Feasto is a food ordering system template that utilizes Swiggy's data to render food items, demonstrating the application of Industrial Design principles. The primary purpose of creating this application is to showcase how to build industrial-grade applications using built-in React features and frequently used core libraries.
Please Note: Since we're using the Swiggy API to fetch data, any changes in the API's structure could cause errors in the application. A straightforward solution is to update the data layer path to match the new API structure whenever it changes.
Tech Stack used in this application are:
- React
- JavaScript
- Tailwind CSS
The application incorporates several fundamental concepts and features, including:
- Functional Components: Utilizing React's functional programming approach for creating components.
- Fetch API: For fetching data from external sources.
- Tailwind CSS: Styling the application with a utility-first CSS framework.
- Reusable Components: Building modular components that can be reused across the application.
- Single Responsibility Principle: Each component or module has a single, well-defined responsibility, enhancing code maintainability.
- React Routing: Implementing navigation using React Router for managing routes and creating a seamless user experience.
- Lazy Loading: Optimizing application performance by loading components only when needed.
- Hooks: Leveraging React hooks like useState, useEffect, and more for state and side effect management.
- Custom Hooks: Creating reusable logic with custom hooks to encapsulate component logic.
- Standard Folder Structure: Following a consistent folder structure to organize the code for better scalability and maintainability.
- Higher Order components
- Customize Accordian
- Controlled and un-controlled components
- Props drilling
- Cart feature using Redux Store
- React Testing: Testing some React components.