Dec 2022
Responsive
lulu
Overview
I created this online clothing store using React and Firebase.Through Firebase authentication, users can use their Google credentials to register an account.
All users can read and sort products that are registered in Firebase.
However, only registered users can add them to a shopping card based on the product detail pages and selection options. Additionally, If the user’s UID matches the admin’s UID on Firebase then the dashboard shows the pencil icon to add a product. Otherwise a non-admin is not allowed due to the protected routes. VScode React Tailwindcss Firebase
Nov 2022
Responsive
Youtube clone
Overview
This YouTube clone was made using React and YouTube’s open API.In addition, the necessary core components passed unit, integration, and E2E tests which improved both maintainability and product quality. This testing is also good in terms of productivity as it enables easier and more accurate code improvement if refactoring or additional features are considered in the future.
You can watch popular videos, videos according to keywords, and related videos. When you click on a video, you can check the detailed page for the corresponding video.
In addition, light mode and dark mode functions have been added for the user’s convenience.
VScode React Tailwindcss JEST React testing library cypress
Sept 2022
Responsive
Airmug-Pro
Overview
I am very interested in interactive design.In order to better understand the fundamental principles of user interaction,
I created this project using only vanilla JS, restricting myself from using any library elements.
It was implemented with a focus on mobile device optimization.
Creating an Apple website clone, specifically the scrolling features,
required me to learn about and understand several concepts: using a canvas for high-resolution image processing,
smooth interaction with high-resolution video using requestAnimationFrame, and keyframe and elements control using scroll.
Completing this project gave me more confidence in the development of difficult visual implementations. VScode HTML CSS Javascript Canvas
Jun 2022
Responsive
Monsquad
Overview
This is a fictional brand.Monsquad means a team of monster villains who love skateboarding. It is a portmanteau of ‘monster’ and ‘squad.’
The brand reflects the street and skateboarding cultures of teenagers.
Their free-spirited and rebellious nature manifests itself in the form of monsters.
As my first personal responsive brand website, I planned, designed, and then constructed the branding from scratch
while ensuring the pieces fit together harmoniously. VScode HTML CSS Javascript