DishDash is a modern web application for managing a menu and handling orders. It features a dynamic interface that adapts to light and dark modes, allowing users to explore and order food items such as burgers and pizzas.
Menu Display : View a list of available menu items with details such as name, ingredients, price, and an emoji.Order Management : Add and remove items from your order and see the total price updated in real-time.Theming : Toggle between light and dark themes for a customized viewing experience.Payment Modal : Enter payment details and complete your order.Printable Order Receipt : Print the order receipt for reference.
You can view a live demo of the application here .
React : JavaScript library for building user interfaces.Tailwind CSS : Utility-first CSS framework for rapid UI development.React Icons : A collection of customizable icons for React.Local Storage : To persist user theme preferences.
To get started with the project locally:
Clone the repository:
git clone https://github.com/dhiashalabi/dishdash.git Copy
Navigate to the project directory:
cd dishdash Copy
Install dependencies:
npm install Copy
Start the development server:
npm start Copy The application will be running at http://localhost:3000
Toggle Theme : Click the sun/moon icon in the top-right corner to switch between light and dark modes.Add Items : Click the "Add" button next to menu items to add them to your order.Remove Items : Click the "Remove" button next to items in your order to remove them.Complete Order : Click the "Complete Order" button in the footer to open the payment modal and finalize your purchase.Print Receipt : After payment, a print dialog will appear to print your order receipt.
Contributions are welcome! If you'd like to contribute to the project, please follow these steps:
Fork the repository. Create a new branch (git checkout -b feature-branch Make your changes and commit them (git commit -am 'Add new feature' Push to the branch (git push origin feature-branch Create a new Pull Request.
This project is licensed under the MIT License - see the LICENSE file for details.
Tailwind CSS : For the beautiful and customizable styling.React Icons : For providing a wide range of icons.React : For building the interactive UI components. 