Seemless Pattern Maker

Inspiration

My partner is a designer and a sewing influencer; she has recently designed her own fabric collection in a collaboration with Minerva. She designed all the final patterns in Adobe Illustrator and told me how difficult it was to get seamless patterns that would repeat indefinitely, and wished there was a tool that could do that for her, so I thought I would build one for her.

What it does

It is an infinite canvas with some basic drawing tools that allows you to just draw and create without needing to think about how you will make this a repeating pattern. You are able to just see the pattern come to life as you create and address layout and crossover problems as you draw, that instant feedback means you get it right first time.

How we built it

This is built 100% with Bolt. I am a designer myself, so let Bolt recommend and take the lead.

Challenges we ran into

The loading was a big issue that took a lot of time to resolve. We had infinite loading of the dashboard and projects, so it was finding a balance of enough time to safely load the projects but not let the user sit looking at a spinner for too long.

Accomplishments that we're proud of

Connecting to Supabase and letting people create accounts so they can store and revisit their creations.

What we learned

Making small, controlled changes and improvements allows you to identify when things go wrong or in a direction you had not hoped. There were a few times where I had to revert back a few versions as it had made some changes to the core functionality because I wanted to make too many changes at once and it prioritised those features over the core ones we had already defined.

What's next for Seemless Pattern Maker

The functionality covers basic drawing tools currently, but the granular control of vector points and paths would allow the user to have deeper control. Also, pre-made stickers and graphics that people are able to use, lowering the barrier of creation.

Built With

• eslint
• javascript
• lucide
• postcss
• react
• sql
• supabase
• tailwind
• typescript
• vite