Zesty Merch

HomePage
Design Battles
Quote
Contact Page
Contests
Contest Page
Profile Pages

Inspiration

What inspired me to build this project was my frustration with the limited customization options available on most e-commerce websites. I often found myself wanting to change some text on clothing or swap out images, but the scope for customization was minimal. This led me to take the concept of product customization to another level by integrating Canva Connect API into the system.

The idea for Design Battles came to me during the development process. I thought it would be exciting to introduce a feature where users could engage in design contests. The idea seemed to add a fun and competitive element to the platform, although it was more of a spontaneous addition rather than a long-planned feature.

What It Does

Zesty Merch is an e-commerce store that allows users to customize products available on the website using Canva (via Canva Connect API). Given Canva's extensive elements library, this feature significantly enhances the level of customization possible, making each product uniquely personal.

Zesty Merch also hosts Design Contests, or Design Battles, where users can participate by submitting their designs. These designs can be rated by other users, and after the contest ends, the system automatically selects winners based on the ratings the designs receive.

How I Built It

Zesty Merch consists of three main components:

1) App: The main website.
2) Express API: This API is used to handle tasks like sending emails and connecting to Canva.
3) Admin Dashboard: This dashboard is used for adding products, sending newsletters, managing contact forms, hosting contests, and viewing analytics. The App and Admin Dashboard were built using Next.js 14, MongoDB,Vercel KV (for cart management), Stripe for payments, Cloudinary for image management, and Canva Connect API for product customization.

Challenges I Ran Into

The entire project was a series of challenges, given its scope and complexity:

1) Product and Custom Design Integration : The first major challenge was figuring out how to integrate standard products with custom-designed products that vary from user to user, and still make the checkout process seamless. This required a creative solution using references in MongoDB models. I eventually implemented a system where a product is temporarily converted into a custom product for 10 minutes after a user creates a design, allowing them to proceed with checkout.

2) Implementing the Canva API: Since I had never used the Canva API before, integrating it into the system was initially challenging. However, with some research and experimentation, I successfully implemented it.

3) Developing Design Battles: Creating the Design Battles feature posed its own set of challenges, particularly in designing and implementing the algorithm to manage multiple contests simultaneously. I also took the opportunity to develop a user profiles page, which added further complexity.

Accomplishments That I'm Proud Of

Successfully integrating the Canva Connect API to enable advanced product customization.
Developing a robust system to manage custom products and seamlessly integrating them into the checkout process.
Implementing the Design Battles feature, including a rating system and an algorithm to manage multiple simultaneous contests.
Creating a rookie image-analyzing AI to generate image descriptions, enhancing the platform's accessibility and usability.

What I Learned

This project was a significant learning experience, pushing my limits in several areas:
API Integration: I gained valuable experience in integrating third-party APIs, particularly the Canva Connect API, which was new to me.
Database Management: The project deepened my understanding of MongoDB, especially in managing complex relationships and references between models.
Algorithm Development: Developing the Design Battles feature required me to design and implement a custom algorithm, which was a valuable exercise in problem-solving and logic design.
Full-Stack Development: This project reinforced my skills in full-stack development, from front-end UI/UX design to back-end server management and everything in between.

What's Next for Zesty Merch

Looking ahead, I plan to:
Expand the customization options further by integrating more tools and libraries.
Enhance the Design Battles feature with more complex rating systems and additional contest types.
Improve the rookie image-analyzing AI to provide more accurate and detailed image descriptions.
Explore partnerships with other platforms to expand the reach and functionality of Zesty Merch.

About the Link provided below

The link below leads to a Vercel-hosted website. Please note that Canva integrations, including design contests, won't function correctly as they require a separate API, which I couldn't host due to some financial and personal challenges. There could also be other issues, so please use the link only to view the UI. I apologize for any inconvenience.