MyRole
Design, Frontend, Project Lead
Team
Taeyang Park Backend
Hyeonjun An Backend
Yunseon Im Game
Timeline
4 Months, starts December 2023
Tech Keywords
Vanilla JavaScript, Figma, HTML, CSS, Tailwindcss, Docker, Git/GitHub
Overview
Transcendence is a Pong game website project. From the design stage, I planned a componentized structure using Figma and applied consistent styles using Tailwind CSS.
The frontend was built using vanilla JavaScript. Modularized components were considered for code reusability, improving maintainability and scalability.
A SPA architecture with a custom router was applied for a smooth user experience without page refreshes.
A custom state management system was implemented using a Store pattern similar to Redux or Vuex.
HIGHLIGHTS
Transcendence is a website project reinterpreting the classic Pong game.
DESIGN
How should we approach design?
Design Componentization
Initially, I started designing without considering components and development. However, I realized this might lead to difficulties during development. Thinking it would be better to reuse designs when possible, I began a redesign process over three days.
I created components with reusability in mind and designed pages using these components. As a result, during development, I was able to reduce unnecessary time spent thinking about which components to create and where to place them when writing code.
COMPONENT
What should we do to implement SPA?
Code Component Modularization
I referred to React components. To componentize, I created a component class, and all functional classes inherit from this component, rendering through the render() method.
class Component {
//...
render() {}
initialize() {
//...
}
}
export default Component;The Component class has a render() method.
Component.js
FriendsButton.js
createComponent.js
ComponentSwitch.js
ROUTER
How can we switch pages without refreshing?
Custom Router Implementation
The Router class returns the appropriate page based on the URL. Using JavaScript's History API-related functions, it detects URLs, manages history, finds the root id, and returns the page component.
this.router = new Router({
"/home/": HomePage,
"/options/": OptionsPage,
"/profile/": ProfilePage,
"/gameMode/": GameModePage,
"/game/": GamePage,
});;The App class serves as the starting point of the application, creating a Router object that defines the rules for matching URLs with their corresponding pages.
app.js
router.js
routing
render
PUB/SUB
How should we manage dark mode, profile status, and game mode states?
Pub/Sub Pattern
Referring to Redux's store, I used the Publisher/Subscriber pattern where changes in one place are detected and reacted to by other parts subscribing to those changes.
class PubSub {
constructor() {
this.events = {};
}
subscribe(event, callback) {
//..
}
publish(event, data = {}) {
//..
}
}The PubSub class implements a mechanism for publishing and subscribing to events.
pubsub.js
store.js
mutation.js
using example
COLLABORATION
Efforts for collaboration
GitHub flow
I proposed systematic development and managed branches through a Git collaboration scenario based on the GitHub flow branch strategy.
We collaborated using GitHub Issue labels, Issue Templates, PR Templates, and Git Commit Convention rules.
Issue Create
Branch Add
Work
PR Create
Review
Test
Merge
Notion
I used Notion to bridge information gaps between team members.
