Untitled

// Super Sodas App

// Core Technologies: React (Frontend), Node.js (Backend), MongoDB (Database)

// Create a basic project structure
// src/
//   - components/
//     - DrinkOrder.js
//     - LoyaltyProgram.js
//     - PaymentOptions.js
//   - pages/
//     - Home.js
//     - Menu.js
//     - OrderSummary.js
//   - App.js
//   - theme.js

// Frontend (React)
import React from "react";
import { BrowserRouter as Router, Route, Routes, Link } from "react-router-dom";
import { ThemeProvider, createTheme } from "@mui/material/styles";
import Home from "./pages/Home";
import Menu from "./pages/Menu";
import OrderSummary from "./pages/OrderSummary";

const theme = createTheme({
  palette: {
    primary: {
      main: "#ff5722", // Default theme color
    },
    secondary: {
      main: "#03a9f4",
    },
  },
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Router>
        <nav>
          <Link to="/">Home</Link>
          <Link to="/menu">Menu</Link>
        </nav>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/menu" element={<Menu />} />
          <Route path="/summary" element={<OrderSummary />} />
        </Routes>
      </Router>
    </ThemeProvider>
  );
}

export default App;

// pages/Home.js
import React from "react";

const Home = () => (
  <div>
    <h1>Welcome to Super Sodas!</h1>
    <p>Customize your drinks and snacks just the way you like!</p>
    <button><Link to="/menu">Order Now</Link></button>
  </div>
);

export default Home;

// pages/Menu.js
import React, { useState } from "react";

const Menu = () => {
  const [order, setOrder] = useState({
    drink: "", size: "", syrups: [], extras: []
  });

  const handleInputChange = (event) => {
    const { name, value } = event.target;
    setOrder((prevOrder) => ({ ...prevOrder, [name]: value }));
  };

  const handleExtrasChange = (extra) => {
    setOrder((prevOrder) => {
      const extras = prevOrder.extras.includes(extra)
        ? prevOrder.extras.filter((e) => e !== extra)
        : [...prevOrder.extras, extra];
      return { ...prevOrder, extras };
    });
  };

  const handleSubmit = () => {
    console.log("Order Summary:", order);
  };

  return (
    <div>
      <h2>Customize Your Order</h2>
      <form>
        <label>
          Drink Choice:
          <select name="drink" onChange={handleInputChange}>
            <option value="cola">Cola</option>
            <option value="lemonade">Lemonade</option>
            <option value="iced_tea">Iced Tea</option>
          </select>
        </label>
        <label>
          Size:
          <select name="size" onChange={handleInputChange}>
            <option value="small">Small</option>
            <option value="medium">Medium</option>
            <option value="large">Large</option>
          </select>
        </label>
        <label>
          Syrups:
          <input
            type="checkbox"
            value="vanilla"
            onChange={() => handleExtrasChange("vanilla")}
          />
          Vanilla
          <input
            type="checkbox"
            value="cherry"
            onChange={() => handleExtrasChange("cherry")}
          />
          Cherry
        </label>
        <label>
          Extras:
          <input
            type="checkbox"
            value="whipped_cream"
            onChange={() => handleExtrasChange("whipped_cream")}
          />
          Whipped Cream
          <input
            type="checkbox"
            value="extra_shot"
            onChange={() => handleExtrasChange("extra_shot")}
          />
          Extra Shot
        </label>
        <button type="button" onClick={handleSubmit}>
          Submit Order
        </button>
      </form>
    </div>
  );
};

export default Menu;

// pages/OrderSummary.js
import React from "react";

const OrderSummary = ({ order }) => (
  <div>
    <h2>Order Summary</h2>
    <p>Drink: {order.drink}</p>
    <p>Size: {order.size}</p>
    <p>Syrups: {order.syrups.join(", ")}</p>
    <p>Extras: {order.extras.join(", ")}</p>
    <p>Total: $XX.XX</p>
    <p>Choose Payment Option:</p>
    <button>Pay In-Store</button>
    <button>Pay Online</button>
  </div>
);

export default OrderSummary;

// Additional features to include:
// - Loyalty Program Component for members to earn points.
// - Customization of fonts and colors via the theme.js file.
// - Backend API endpoints for managing orders and payments.
// - Database (MongoDB) for user data and loyalty points.