Candy Fluffs is an eCommerce website for illustrator Candy Joy, designed with love in Figma and powered by modern web technologies. Originally built with Gatsby, the project was overhauled and migrated to Next.js and TypeScript, improving performance and maintainability. It integrates DatoCMS, Snipcart, Stripe, and Mailchimp to provide a seamless shopping experience.
The original version was created in 2021 using Gatsby by a team of three:
Since then, Brittney became the sole maintainer and led the migration to Next.js and TypeScript for better scalability and developer experience.
- Migrated from Gatsby to Next.js and TypeScript for improved performance and maintainability.
- Refactored styling with CSS Grid for a more flexible and responsive layout.
- Upgraded Snipcart from v2 to v3 for a better checkout experience.
- Added pagination to enhance product browsing.
- Implemented lazy loading and a loading spinner for better user experience and faster load times.
Candy Fluffs is powered by the following technologies and services:
- Next.js
- TypeScript
- GraphQL
- DatoCMS
- Snipcart v3
- Stripe
- Mailchimp
- Figma
- Netlify
Candy Fluffs offers a smooth and user-friendly shopping experience:
- Browse all products on the home page, with filtering options for different product types.
- Hover over products on desktop to reveal details, or click for the full product page.
- Explore Necahual, Candy Joy's original title, including links to its webtoon and social media.
- Check out the Conventions/Expos page to find live events where Candy Joy will be present.
- Seamless checkout process powered by Snipcart and Stripe, with cart management available on all pages.
- Newsletter Signup – Stay updated on new releases and events.
- About Page – Learn more about Candy Joy.
- Contact Page – Reach out for inquiries or collaborations.
- Implement Jest or Cypress for testing.
- Transition to Stripe Checkout for improved payment processing.
- Improve search and indexing for better discoverability.
This project is licensed under the The BSD Zero Clause License.
This is a Next.js project bootstrapped with create-next-app.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!