This project aims to create a modern and user-friendly kiosk website inspired by the design and functionality seen in McDonald's outlets. The website incorporates various features such as cart management, product customization, debit/credit card integration, and payment options like cash on delivery or online payment. The technologies used include EJS template, Bootstrap, Stripe API, REST API, HTML, CSS, and JavaScript.
Explore the live demo of the McDonald's style kiosk website here.
-
Product Catalog:
- Display a comprehensive list of products available for order.
- Categorize products for easy navigation.
-
Cart Management:
- Allow users to add and remove items from their shopping cart.
- Display the total cost dynamically as items are added.
-
Product Customization:
- Enable users to customize certain products (e.g., burger toppings, drink size).
-
Checkout Process:
- Provide a seamless and intuitive checkout process.
- Options for both online payment through Stripe API and cash on delivery.
-
Responsive Design:
- Ensure the website is accessible and user-friendly across various devices.
-
EJS Template Engine:
- Used for server-side rendering to dynamically generate HTML pages.
-
Bootstrap:
- Employed for responsive and visually appealing front-end design.
-
Stripe API:
- Integrated to handle secure and seamless online payments.
-
REST API:
- Developed and utilized to manage communication between the front-end and back-end.
-
HTML, CSS, JavaScript:
- Utilized to create the structure, style, and behavior of the website.
-
Clone the Repository:
git clone https://github.com/your-username/mcdonalds-kiosk.git cd mcdonalds-kiosk -
Install Dependencies:
npm install
-
Configure Environment Variables:
- Create a
.envfile and set the required environment variables (e.g., Stripe API key, database connection details).
- Create a
-
Run the Application:
node server.js
-
Access the Website:
- Open your browser and navigate to
http://localhost:8000.
- Open your browser and navigate to
- This project is a simulation and is not affiliated with McDonald's or any other brand.
- Feel free to customize and extend the functionality based on your specific requirements.
- For any issues or feedback, please contact the project maintainers.