Katppy is an online store that specializes in decoden DIY craft supplies such as kawaii resin charms, toy figures, crystal beads, and blind bag toys.

Role: Project Leader, Developer

I was assigned, along with other 2 members, to build this website as a part of our capstone project under NAIT's Digital Media & I.T. program.

Our client wants to decrease the service cost of running an online shop, so she decides to switch platform— from Etsy to WooCommerce.

The goal of the project was to create a custom, visually appealing, and user-friendly WooCommerce store tailored to Katppy’s niche audience such as DIY crafters and collectors.

My personal goal for this project is to build a thousand-dollar looking e-commerce website to showcase in my portfolio.

My role as a lead developer is to ensure the technical requirement are met, while maintaining best practices. Such actions include developing a custom WordPress (with WooCommerce) support and integrating third-party services ( for email, payments, marketing).

As the project leader, I make sure all deliverables are finishined in a timely manner.

I also collaborated with my design team and client to align decisions with Katppy’s branding and aesthetic.

Custom Theme Development

• Built the site using the Underscores (_s) WordPress starter theme for flexibility and performance
• Developed custom plugins to showcase products and reviews on the landing page

TailwindCSS Integration

• Utilized Tailwind CSS into the WordPress theme to rapidly build a clean and modern-looking user interfaces

WooCommerce Customization

• Implemented AJAX filter and search bar to improve online shopping experience

Accessibility (WCAG) Enhancements

• Followed WCAG standards by adding aria labels to improve screen reader support
• Used semantic HTML and accessible navigation patterns
• Applied accessible typography guidelines, including proper contrast ratios, scalable font sizes, and readable typefaces

Mailchimp Integration

• Integrated Mailchimp for email marketing and customer retention
• Prepared for future campaigns like welcome emails, new arrivals, and seasonal promos to keep the community engaged

Stripe Integration

• Set up Stripe as the future payment gateway for seamless and secure checkout
• Enabled express checkout like Apple Pay, and Google Pay options to improve the payment process speed

Gmail SMTP Integration

• Configured Gmail SMTP for reliable and secure transactional email delivery
• Ensured that contact form messages land in the inbox (not spam), supporting seamless customer communication

The shop is not live in public since our client is still organizing some products, so here are some screenshots of it.

Shop page preview:

Product detail page preview:

Order Confirmation Email via Gmail SMTP:

By building this website, we established a solid e-commerce foundation for the business to grow and scale product offerings. The shop also creates a personalized shopping experience for Katppy's customers.