This project is a front-end food delivery website developed using React.js, HTML, CSS, and JavaScript, with Vite-Lite as the initial setup for a fast and optimized development environment. The website is designed to allow customers to easily browse through a menu, add items to their cart, and enter their address for delivery. Key React concepts such as useState, useContext, and useNavigate are utilized to efficiently manage state, context, and navigation within the application, ensuring a seamless user experience.
The home page features a well-structured and visually appealing layout, starting with a navbar that includes a logo and navigation links to Home, Menu, Mobile App, Contact, Cart, and a start icon. Below the navbar, there is a prominently styled main logo, created with special CSS techniques to stand out. Users can explore the menu through an interactive section that allows filtering of dishes, making it easy to find specific items. The full menu is displayed comprehensively, and there is also a dedicated section for mobile app downloads, encouraging users to install the app for a better experience. The footer provides additional links and information, ensuring that all necessary details are accessible.
The cart functionality is designed to be user-friendly, allowing customers to add any quantity of dishes and remove them as needed. When items are added to the cart, the cart section displays the selected items along with their prices, quantities, and the total amount, including delivery fees. A "Pay to Checkout" button leads to the Place Order page, where users can enter their address and proceed to payment. This checkout process is streamlined to ensure a smooth and efficient transaction, enhancing the overall user experience. This project exemplifies the integration of modern web development practices, creating a functional and engaging food delivery service interface.