Video Script: Exploring CrunchyBanana Through Four Key Software Themes

Presenter: "Hello I’m Sanjeev Kumar Shrestha and my UoB Registration Number is
2146514. Today, I’m going to explore the project, focusing on four key software
themes: software design principles (OOP), event-driven programming, interoperability,
and virtual identity."

Presenter: " Let's start with a short demonstration of the game. Here's my game UI.
As you can see, it's a straightforward and engaging interface. Users can login or
register if don’t have login credentials. Now I am creating Sanjeev as a username and
password and login to the game portal. The main menu provides options to start a
new game with three difficulty levels with a timer and without a timer where players
can enjoy the game with challenges. When Enable Timer is checked Timer difficulty is
increased and Timer will have low amount of time. 3 minutes for Easy, 2 minutes for
Medium and 1 minute for Hard, I am choosing Easy with timer. Lives system where
players have 9 attempts to answer. Players lose a life for each incorrect answer. The
game also includes timeout-based events, such as the countdown timer in the game
and if the timer runs out, the game will be over. Also, games have Leaderboard which
shows the user highest score with difficulty level achieved as score history and current
score board."

Presenter: "Now, let’s talk about the project and how it runs. CrunchyBanana is
structured using the three-tier architecture, which includes the database (MySQL), the
server (Node.js), and the client (React TypeScript)."

Presenter: " Here’s my main server file, server.ts."

[Highlighting lines 19-22 in server.ts]

// server/server.ts

app.use(cors({

credentials: true,

origin: ["http://localhost:5173", "*"],

}));

Presenter: "Here, I’ve enabled CORS on lines 19 to 22 to allow my server to handle

HTTP requests from any site. And Line 20 Allows credentials (cookies, headers, etc.) to
be sent with requests.

[Highlighting lines 32-42 in server.ts]

// server/server.ts

app.use('/api/auth', auth);

Page | 1
 app.use('/api/user', users);

app.use('/api/games', authorize, game);

Presenter: "Also From lines 32 to 42, I’ve defined various endpoints or routes to
handle different HTTP requests, such as authentication, user management, and game
records."

[Switching to client directory and showing App.tsx]

Presenter: "Now let’s see On the client side, in App.tsx, I manage page loading
states using the isLoading state. If the user is already logged in and their session
hasn't expired, they’re redirected to the dashboard. Otherwise, they’re taken to the
Authpage where user need to provide credentials username and password or register."

[Highlighting lines 10-20 in App.tsx]

// client/src/App.tsx

if (isLoading) {

return <div>Loading...</div>;

if (user) {

return <Dashboard />;

return <AuthPage />;

[Scene switches back to presenter]

Presenter: "Now, let’s dive deeper into the four main themes, starting with software
design principles (OOP). My project is divided into modules like models, views,
controllers, services, and hooks, making it highly modular and maintainable."

Page | 2
OOP
[Server directory: userController.ts]

Presenter: "In my server directory, controllers like userController.ts handle HTTP

requests and responses, while models contain data and business logic. This separation
of concerns is a hallmark of good object-oriented design."

[Highlighting lines 32-35 in userController.ts]

// server/controllers/userController.ts

users.post('/register', async (req, res) => {

const { username, password, fullname } = req.body;

// Registration logic...

});

[Highlighting lines 45 in userController.ts]

// server/controllers/userController.ts

users.post('/login', async (req, res) => {

const { username, password } = req.body;

// Login logic...

});

Another example Client directory SignupPage Line 4 code

Another example, In this code, I can see an example of the Single Responsibility
Principle (SRP) in action.

const SignUpForm = () => {

// ...

Here, I have a single function SignUpForm that is responsible for rendering the sign-
up form and handling its submission. This follows the SRP principle, which states that
a function should have only one reason to change.

Line 5 and 8

Another principle I can see here is the Don't Repeat Yourself (DRY) principle. I’m using
React hooks like useState and useRef to manage state and references, which helps
us avoid duplicating code.

const [error, setError] = useState<string | null>(null);

const fullNameRef = useRef<HTMLInputElement>(null);

Page | 3
EVENT-DRIVEN PROGRAMMING
Presenter: "Next, let’s discuss event-driven programming. My client-side React
components, such as SigninPage.tsx, utilize event handlers like handleSubmit to
respond to user actions and Handles the form submission event."

[Client directory: SigninPage.tsx]

[Highlighting lines 12 in SigninPage.tsx]

const handleOnSubmit = (e: FormEvent<HTMLFormElement>) => {

Presenter: "Here On lines 12, I’m defining a function handleOnSubmit that will be
called when the form is submitted. This function will handle the submission event and
perform the necessary actions. "

Another example of event-driven programming is the use of React's useState hook to

manage state changes.

[Highlighting lines 8 in SigninPage.tsx]

const [error, setError] = useState<string | null>(null);

Client/src/components/Timer.tsx

Another example is Handling Timer Events Line 12 - 25

In the Timer component, I have a timer that triggers an event every second:

useEffect(() => {

const timer = setInterval(() => {

// Handle timer event logic here

}, 1000);

return () => clearInterval(timer);

}, []);

This is an example of Event-Driven Programming, where I define a function that will be

called every second (1000 milliseconds). The function is called with no arguments,
and it will handle the timer event logic.

Page | 4
INTEROPERABILITY
[Scene switches back to presenter]

Client/src/services/apiClinet.ts

Presenter: "Interoperability is another key aspect. My service layer, particularly

apiClient.ts, manages HTTP requests and responses. This refers to the ability of
different systems or components like frontend and backend to work together and
communicate seamlessly."

[Client directory: apiClient.ts]

Presenter: "In apiClient.ts, located at client/src/services/apiClient.ts, I configure the

base URL and create methods to interact with my backend APIs."

[Highlighting lines 10-20 in apiClient.ts]

// client/src/services/apiClient.ts

const apiClient = axios.create({

baseURL: 'http://localhost:3000/api',

withCredentials: true,

});

Presenter: "Lines 4-9 set up my API client to handle HTTP requests with the correct
parameters."

Another example

Client/src/pages/SignupPage.tsx Line 1-2

Here, I’m importing React hooks and a custom hook useSignUp from another file.
This shows how React and TypeScript can work together to provide a robust and
maintainable codebase.

Another example of interoperability is the use of CSS classes to style my components.

Line 42 SignupPage

Page | 5
VIRTUAL IDENTITY
[Scene switches back to presenter]

Presenter: "Finally, let's discuss virtual identity. I’ve used session cookies to maintain
user identity across multiple requests, ensuring a consistent and secure user
experience."

[Server directory: server.ts handling session cookies]

Presenter: "In server.ts, lines 25-28, I’ve managed session cookies to keep users
authenticated across different parts of the application."

[Highlighting lines 25-28 in server.ts]

// server/server.ts

app.use(cookieParser());

app.use(express.json({ limit: '2048mb' }));

Presenter: "These lines handle the session cookies, ensuring that each user remains
logged in during their session."

[Client directory: useSignin.ts showing session handling]

Presenter: "My useSignin.ts hook, located at client/src/hooks/useSignin.ts, sends

user credentials to the server and manages the session cookie, maintaining the user's
virtual identity."

[Highlighting lines 4-34 in useSignin.ts]

// client/src/hooks/useSignin.ts

const useSignin = () => {

const [isLoading, setLoading] = useState(false);

const signIn = async ({ username, password }) => {

setLoading(true);

const response = await apiClient.post('/auth/login', { username,

password });

setLoading(false);

return response.data;

};

return { signIn, loading };

};

Presenter: "Lines 4-34 in useSignin.ts show how it handle user sign-in and manage
their session."

Page | 6
SignupPage.tsx Line 17 - 24

Another example In this code, I can see an example of virtual identity in the way it is
handling user input and validation.

const fullName = fullNameRef.current!.value;

const username = usernameRef.current!.value;

const password = passwordRef.current!.value;

if (!/^[A-Za-z]+\s[A-Za-z]+$/.test(fullName)) {

setError("Full name must contain at least two words.");

return;

Here, I’m using references to access user input values and performing validation on
those values. This shows how my code is managing user identity and data.

[Closing Scene: Presenter summarizing]

Presenter: "In summary, I've shown how the four themes of software design
principles, interoperability, event-driven programming, and virtual identity are
reflected in this project. By following software design principles, I can write
maintainable and efficient code. Interoperability allows us to work with different
systems and components seamlessly. Event-driven programming helps us handle user
interactions and drive the flow of my program. And finally, virtual identity helps us
manage user data and identity effectively.

Thanks for watching, and I hope this video has helped you understand these
important themes in software design!"

Page | 7