While surfing the web, I stumbled upon a beautiful website called Places to read. It's a collection of stunning places to read books, made by Mitul Shah. I was so impressed with the idea and the design, that I decided to create my own version of it, which I named bookmaru (a combination of "book" and "maru", which means "living room" in Korean).
I used the following techs to build bookmaru:
Frontend
Sveltekit
Backend
Supabase
AI
OpenAI GPT-3.5 API
Hosting
Netlify
I also used Cursor to help me with the development process. Cursor is an AI-powered code editor that helps you write code faster and better. I wanted to test the full potential of AI-assisted coding through this project, and I must say, I had mixed feelings about it. More on that later.
Ideation
I wanted to make a clone of Places to read, but with some differences. First, I wanted to add i18n support, so that english and korean users can use the site. I also wanted to add a basic admin feature so that I can edit, approve or disapprove submissions. Finally, I wanted to make a auto translate feature, so that when a user submits a place in one language, it gets translated to the other language automatically using OpenAI.
Why Sveltekit + Supabase?
I chose Sveltekit for the frontend because... well why not? I've heard that Sveltekit had great performance and developer experience, so I wanted to try it out and see how it compares to React. Also, I wanted to use something I'm not used to, to see how coding with Cursor would help me out and how much time it would take me to get used to it.
I chose Supabase for the backend because it provides a great set of features out of the box, such as edge functions, database and storage. I wanted to focus on building the frontend and let Supabase handle the backend for me.
Using Cursor, was it worth it?
After setting up the project, I started coding with Cursor. At first, I was amazed by how much it could help me with writing "repetitive" code, such as components, hooks and utils. It saved me a lot of time and effort, and I was able to focus on the logic and design of the app. However, as I progressed further into the project, I started to notice some limitations of Cursor. As more complicated the code got, the less helpful Cursor became. It often suggested code that was not relevant or even incorrect, and I had to spend more time fixing and debugging than writing code from scratch. I also found that Cursor sometimes struggled with understanding the context and the requirements of the project, leading to suggestions that were not aligned with my vision.
Maybe I was using Cursor wrong, or maybe I had unrealistic expectations of what AI-assisted coding could do. But overall, I felt that while Cursor was a great tool for certain tasks, it was not a substitute for human creativity and problem-solving.
This is how I used Cursor:
- Used Context7 and Supabase mcps
- Mainly used to edit existing code
- Used to generate repetitive code (components, hooks, utils)
- Used Supabase MCP to generate database schema and edge functions
The more I used Cursor (or any AI-assisted coding tool), the more I feel my coding skills are getting worse. It's a mixed feeling really, because on one hand, I can get things done faster and focus on the big picture, but on the other hand, I feel like I'm losing my ability to think critically and solve problems on my own. I guess it's a trade-off that I have to accept if I want to keep up with the fast-paced evolution of technology.
Tip for using AI-assisted coding tools: Don't rely on them too much, and always double-check the code they generate. Use them as a tool to augment your skills, not replace them. Also, think more like a product manager when using the agent features, and give descriptive prompts to get better results.
How it works
This is a simple architecture diagram of how bookmaru works:
The website uses a moderated submission system with the following workflow:
- User Submission: Users fill out a comprehensive form (/submit) with location details including name, description, region, category, quietness rating, optional book recommendations, and images. The form detects the user's language (Korean/English) and stores content in the appropriate language fields.
- Data Storage: Submissions are stored in Supabase with status: 'pending' and include both language-specific fields (name_en/name_ko, description_en/description_ko, etc.) to support bilingual content.
- Image Upload: Images are uploaded to Supabase Storage in the place-images bucket with unique filenames and public URLs are generated for display.
- Admin Review: An admin interface (/admin) allows moderators to review pending submissions, with options to approve, deny, or edit entries before publication.
- Auto-Translation: When approved, the system automatically calls a translation function to generate content in the opposite language (Korean submissions get English translations and vice versa), ensuring all locations are available in both languages.
- Publication: Once approved, entries change status to 'approved' and become visible on the main site.
Using this approach, I aimed to create a website that foreigners and locals alike can use to discover great reading spots in Korea, while also ensuring content quality through moderation and bilingual support.
The Result
You can check out the result at bookmaru.site.
Conclusion
Overall, I had a great time building bookmaru. With the economy currently in a recession and the job market being uncertain, I wanted to do something fun and creative to take my mind off things. Building bookmaru was a great way to do that, and I learned a lot about Sveltekit, Supabase and Cursor in the process.