Omnifood is a single-page, fully responsive restaurant website built using React and Vite, showcasing a smart 365-days-per-year food subscription service that delivers healthy, personalized meals right to your door.
This project demonstrates a modern React-based implementation of the Omnifood website. Leveraging React's component-based architecture, Vite's fast development server, and modern CSS practices, the site is highly optimized for performance and user experience.
Key highlights include a responsive navigation bar with a mobile-friendly hamburger menu, reusable React components for efficient development, and a user-friendly feedback form to enhance interactivity.
The Omnifood website has been tested using Google's Lighthouse tool to ensure optimal performance, accessibility, and SEO. Below are the scores:
- Performance: 88
- Accessibility: 96
- Best Practices: 100
- SEO: 100
- 365-days-per-year meal delivery: Omnifood delivers meals every day of the year, including holidays.
- Local and organic ingredients: All meals are prepared using fresh, local, and organic ingredients.
- Sustainable packaging: All meals are delivered in reusable containers to minimize waste.
- Pause subscription anytime: Users can pause their subscription at any time and receive a refund for unused days.
- Responsive navigation: A fully responsive navigation bar that adapts to screen size, turning into a hamburger menu on smaller screens with smooth animations.
- Reusable React components: Components for features, sections, and forms make the project modular and maintainable.
- Image optimization: All images are optimized for faster page load times, improving performance and user engagement.
- User feedback form: Includes a React-powered form with validation for user interactions.
- Error handling: All user inputs are validated, and any errors (such as invalid input) are displayed as friendly error messages.
- Vite-powered build: Leveraged Vite for faster development and optimized production builds.
- React: Component-based JavaScript library for building user interfaces.
- Vite: Modern build tool providing lightning-fast development and optimized production builds.
- CSS Modules: Scoped styles for modular and reusable components.
- Flexbox & Grid: Used for creating flexible and responsive layouts.
- Intersection Observer: Used for smooth animations triggered by scroll events.
- Responsive Design: Ensures the website works flawlessly across all screen sizes and devices.
- Image Optimization: Optimized images for faster loading times and better performance.
- SEO Best Practices: Meta tags and clean code implemented for improved search engine visibility.
- Accessibility: High contrast colors and semantic HTML elements to ensure the website is accessible to all users.
- Component-based architecture: Improved code reusability and maintainability with React components.
- Fast development with Vite: Leveraged Vite’s fast server and HMR for a smooth development experience.
- Image optimization: Reduced file sizes to improve load speed while maintaining visual quality.
- Handling responsiveness: Implemented flexible layouts with Flexbox and Grid for a seamless experience across all devices.
- Error handling in forms: Managed state in React for validating and providing feedback on user inputs.
- Meta tags: Added descriptive meta tags for search engine visibility.
- Alt attributes: Used detailed alt text for images to enhance SEO and accessibility.
- Optimized page speed: Minimized render-blocking resources and optimized images for faster loading times.
- Semantic HTML: Structured the website with clean, semantic JSX to improve indexability by search engines.
- Lighthouse SEO score: Achieved a perfect SEO score of 100 using best practices.
- Clone the Repository:
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh
