Projects
Capture Studio
Photography Service E-commerce Website
Overview
Capture Studio is an e-commerce website using Vue.js. I started this side project from scratch, which involved user interface design, creating wireframes, and front end programming. The website features include showcasing photography services/products, client albums, a shopping cart, and a checkout system. On the backend platform, functionalities include login authentication, management of services/products for listing and publishing, coupon management, order management, and image management.
Skills Used
- Vue.js / Vue Router / Vue Cli
- ESLint with the Airbnb syntax standards
- RESTful API
- Bootstrap
- Responsive Web Design
- SASS / SCSS
- Git Version Control
Hotel Booking Website
Reservation Service Website
- Demo Account
Account: aaa@aaa.com
Password: Aaaa1234
Overview
This hotel reservation website is a side project. I have completed all the front-end and part of the back-end website construction. The website features include a landing page, previews of various rooms, a picture lightbox, room reservation, member registration and login, password recovery, email verification for existence in the database, and order management.
Skills Used
- React.js
- Typescript
- Vite
- React Redux / Redux Toolkit / RTK query
- Tailwind CSS
- React Hook Form / Yup
- Husky
- ESLint
- Prettier
- Responsive Web Design
- RESTful API
- Git Version Control
- Node.js / Express.js / MongoDB
Mujibu
Crowdfunding Platforms
Overview
Mujibu is a side project I collaborated on with three other developers. This project was built from scratch. Initially, we discussed the idea of creating a crowdfunding website, then proceeded to create wireframes using Figma, as well as the site’s structure and functional flow chart. We also planned API specifications for frontend-backend communication and set up frontend and backend environments, before moving on to later-stage development.
In the later stages of development, I primarily handled most of the frontend functionalities, including Google third-party login for members, registration, member operation interface, member data modification, defining website components in the early stage, defining styles, setting up TypeScript schemas, creating the crowdfunding company page and the crowdfunding product listing process. As for the backend, I was responsible for implementing the functionality to upload images using Firebase.
Skills Used
- Next.js
- Typescript
- React Redux / Redux Toolkit / RTK query
- Tailwind CSS / Material UI
- Mock Service Worker
- Firebase / Third-party authentication login
- React Hook Form / Yup
- ESLint
- Prettier
- Responsive Web Design
- RESTful API
- Git Version Control
- Node.js / MongoDB
The Better Aging Website
Articles Website
Overview
The Better Aging Website is a news platform dedicated to middle-aged and elderly readers. I played a key role in redesigning the layout and implementing front-end programming using the Next.js framework. The website boasts an array of features, including a homepage carousel, a popular articles section, author-specific pages, and dedicated sections for video content and podcasts. These enhancements contribute to a more dynamic and engaging user experience, offering a diverse range of content formats to cater to the preferences of our audience.
Skills Used
- Next.js
- RESTful API
- Tailwind CSS
- Responsive Web Design
- Integration of Google Tag
- Google SEO
- Git Version Control
- Server-Side Rendering
Event Sites
Live Demos
Overview
I have previously completed various types of event sites, including event information pages, vendor product feature pages, voting campaign, survey forms, quizzes and so on.
Skills Used
- React.js / Typescript / Javascript
- Chart.js /
- React Hook Form
- Lottie Animation / GSAP
- Tailwind CSS / Material UI
- Bootstrap
- SASS / SCSS
- Responsive Web Design
- RESTful API
- Git Version Control
Big Five Personality Traits Test
Vue.js Questionnaire Assessment Tool
Overview
The Big Five Personality Traits Test is a Vue.js Single Page Application (SPA) integrated with an Open-Source Psychological Assessment API. Features include a 10-question questionnaire, questionnaire verification, test score statistics, and result analysis.
Skills Used
- Vue.js
- Axios
- RESTful API
- Responsive Web Design
- SASS / SCSS
- Git Version Control
Utility Web App
Live Demos
Skills Used
- Javascript
- jQuery
- HTML / CSS
- Responsive Web Design
- Git Version Control