Mr. Johnson, the owner of a popular local burger joint called "Bite Me Burgers," approached a software development team to create an online platform for customers to order burgers conveniently.

The team comprises of 2 developers Jack and Emma, Jack being an inexperienced developer and Emma being an experienced developer with complete understanding of design patterns and SOLID principles.

For the initial version, Mr Johnson asks for a list page which shows the list of burgers available and a details page which shows complete details of the selected burger. Mr Johnson says that his menu currently has only Cheese Burger and he wants that to be shown in the menu.

Jack enthusiastically builds the initial version and pushes it live.

This is how Jack's first version of code looked like

CheeseBurger.tsx

export class CheeseBurger {
  getBurgerType() {
    return "cheese";
  }
  getName() {
    return "Cheese Burger";
  }
  getDescription() {
    return "A cheeseburger is a classic and popular type of hamburger that includes the addition of cheese, typically melted over the patty.";
  }
  getIngredients() {
    return [
      "Hamburger bun",
      "Cheese",
      "Lettuce",
      "Tomato",
      "Mayonaisse",
      "Beef patty",
    ];
  }
  getImageArray() {
    return [RegularTop, Tomato, Mayo, Cheese, Beef, RegularBottom];
  }
}

BurgerList.tsx

import React from "react";
import Row from "antd/es/row";
import Col from "antd/es/col";
import Typography from "antd/es/typography";
import { useNavigate } from "react-router";
import { CheeseBurger } from "../burgers/CheeseBurger";

const BurgerListCard: React.FC<{
  burger: CheeseBurger;
  onClick: () => void;
}> = ({ burger, onClick }) => {
  return (
    <Row
      justify={"center"}
      className="my-2 cursor-pointer hover:bg-blue-200"
      onClick={onClick}
    >
      <Col className="border-b border-b-gray-300 p-2">
        <Row>
          <Col>
            <b>{burger.getName()}</b>
          </Col>
        </Row>
        <Row>
          <Col>
            <p className="text-gray-500">{burger.getDescription()}</p>
          </Col>
        </Row>
      </Col>
    </Row>
  );
};
const BurgersList = () => {
  const cheeseBurger = new CheeseBurger();
  const { Title } = Typography;
  const navigate = useNavigate();
  return (
    <Row className="w-full h-full overflow-y-scroll" justify={"center"}>
      <Col className="space-y-2 p-2" span={22}>
        <Row>
          <Col>
            <Title>Menu</Title>
          </Col>
        </Row>
        <Row justify={"center"}>
          <Col span={18}>
            <BurgerListCard
              burger={cheeseBurger}
              onClick={() =>
                navigate(`/no-patterns/${cheeseBurger.getBurgerType()}`)
              }
            />
          </Col>
        </Row>
      </Col>
    </Row>
  );
};

export default BurgersList;

BurgerDetails.tsx

import React, { useEffect } from "react";
import { useParams } from "react-router";
import Row from "antd/es/row";
import Col from "antd/es/col";
import { CheeseBurger,BurgerTypes, Burger } from "../burgers/CheeseBurger";
const BurgerDetails = () => {
  const [burger, setBurger] = React.useState<CheeseBurger>();
  const { burgerName } = useParams();

  const getBurger = (burgerName: BurgerTypes) => {
    if (burgerName === "cheese") return new CheeseBurger();
    else return new CheeseBurger();
     };
  useEffect(() => {
    setBurger(getBurger(burgerName as string));
  }, [burgerName]);
  return (
    <Row className="w-full h-full" justify={"center"}>
      <Col className="space-y-8 py-8" span={22}>
        <Row gutter={16} justify={"center"}>
          <Col span={20}>
            <Row>
              <Col>
                <b>Name</b>
                <p>{burger?.getName()}</p>
              </Col>
            </Row>
            <Row>
              <Col>
                <b>Description</b>
                <p>{burger?.getDescription()}</p>
              </Col>
            </Row>
            <Row>
              <Col>
                <b>Ingredients</b>
                <p>{burger?.getIngredients().join(", ")}</p>
              </Col>
            </Row>
          </Col>
          <Col span={4}>
            <Row>
              <Col>
                <Row>
                  <Col>
                    {burger?.getImageArray().map((image) => (
                      <Row>
                        <Col>
                          <img
                            src={image}
                            alt="alt"
                            width={100}
                            height={"auto"}
                          />
                        </Col>
                      </Row>
                    ))}
                  </Col>
                </Row>
              </Col>
            </Row>
          </Col>
        </Row>
      </Col>
    </Row>
  );
};

export default BurgerDetails;

Mr Johnson is happy with version one of the application and he starts using it as his digital menu in the store. You can find the first version of Bite Me Burgers in the below link

Bite Me Burgers v1

While this is working as expected, lets see what potential problems would Jack face in the next articles of the series and how Emma comes to his rescue.