ContentArt

• 

• 

  Go from dull to pro

Inspiration

My company writes and designs workbooks, educational guides, and planners for our coaches, course creators, digital product creators and marketers. This is a pretty manual process. Now with AI, the content and writing portion is easier but making that content look good is still a challenge particularly for non-designers.

While there are amazing tools like Canva and Adobe Express out there, the problem is they start from a design, not content. Meanwhile, our audience is more likely to start with content. When you try to fit content into a design, often time, the design loses the original attractiveness and people find they spend more time tweaking the design and wasting time.

I think my audience would better be served with a tool that is content-first, and the design should fit the content.

What it does

Users will write or copy and paste their content into ContentArt and the app automatically arranged the content into an attractive layout. Users can also switch layouts and the content will arrange itself to that new layout.

How I built it

I started with a fairly simple prompt, can't remember what it is now, but I gave it a somewhat detailed prompt, telling it what I ultimately want the app to end like. But also told it I need a very basic MVP and told it to use Markdown to create the content.

The first iteration of the app that came from the prompt was remarkably "complete". It was more than I expected. The editor was basic since I told it to use Markdown and every change I made, reflected in the Preview as expected.

From here, I built used another prompt to create the templates that I had envisioned. I designed the templates in Figma and uploaded the HTML to Bolt, and Bolt built those layout templates for me. 90% of the templates came out as I had envisioned. However, the app did not have a way to switch templates like I wanted to user to.

There was a lot of small prompting to add small features like that and lots of prompts to fix small issues.

Challenges I ran into

I moved further and wanted more sophisticated templates and used the Discuss feature, Bolt told me that Markdown is not the best option for this project. I'd been pretty far into the project by then, burnt a couple million tokens.

I can't remember but I believe the "editor" Bolt created was very basic and since I wanted more ways to style the content, I did some research and went with TipTap because I wanted a more robust editor. I'm still not sure this is one I'll keep but it's a start. The good thing is TipTap has a PDF/DOCX export. That was another challenge. A huge one.

I tried using pdf-lib but after spending several million tokens to get the preview to match the exported PDF and vice versa. It was an incredibly frustrating process and ended up ditching it entirely and using a simpler html2Canvas + jsPDF option which gave better results.

Even so, it was a very big challenge to get the PDF to look like the preview. I've got it as close as I can with the time-limit. It's something I still want to perfect.

The other huge challenge was implementing user backend with SuperAdmin (me/owner), Admins with sub-users- basically to create teams. I was hoping to integrate RevenueCat once this was in place. This however turned into a nightmare. I'm not sure what happened but somehow the integration with Supabase authentication wasn't as easy as I hoped.

No matter what I tried to prompt it to do, the user wasn't recognized at all even though the user was created properly, the credentials were right. Everything I made it check was correct again and again. I must have spent a whole week on this and even tried to fork the project to no avail.

Then suddenly the user was recognized and I was able to log in and I was able to continue working. Having said that, there's still something I can't fix and I get into a 'loop' where bolt kept saying it's fixed but it's not and I don't know how to fix it. Somehow when I refresh the app, I'm suddenly no longer recognized as logged in even though my log in and everything before was successful. This is one thing I'll continue to try to fix.

Accomplishments that we're proud of

I'm pretty proud I was able to at least get this to a very basic working order and managed to submit this despite its many imperfections. Also being a very novice React developer and completely new to hackathons, I managed an MVP.

What we learned

I could've used more help. I didn't because to me it was very difficult to find a "mentor". To me everything seemed very haphazard so I just dived in.

What's next for ContentArt

I would like to add so much more like:

• AI to help users create content.
• AI to select or better select a layout based on the content.
• Auto pagination.
• More features in the editor
• A "card based" editor where a "page" is shown in a card format instead of a long scrolling page right now.
• Add more layouts
• Export to Canva
• More font options
• Ability to change page background color
• Lots more

Built With

• html
• html2canvas
• jspdf
• lucide-react
• react
• supabase
• tailwind
• tiptap
• typescript
• vite