This content originally appeared on DEV Community and was authored by kolort
Almost 2 years have passed now since I started this incredible journey of learning software development. What started as a simple curiosity and a desire to be more tech-savy in my day-to-day work (I'm a Product Manager, please don't hate me 😂) quickly became much more than that: coding now represent what I see as a realistic path towards freedom. Freedom to learn new skills at my own pace, freedom to try to build something from scratch, choosing exactly what I want to use as a tech stack, making mistake and learning (or not)from them, and maybe one day build that one project that will generate enough monthly revenue to sustain my everyday expenses.
My first project built in pure vanilla JS, HTML & CSS was Colorlab, a color palette generator. I still plan on working on that project from time to time but I also felt like it was time for me to start something new. And more importantly, I wanted to put into practice Vue.js, which I just started learning mid 2024. I decided to mix my two hobbies - Cooking & Coding - together and build a new platform that would be useful for me and hopefully other foodies: a directory listing sauces recipes. This is how it went from ideation to prototyping to finally building it.
Phase 1: Coming up with the idea & the name 💡 (2 days)
The idea for this project was came while I had to finish up some chicken in my fridge. I didn't want to eat it just by itself but also didn't want to follow a long chicken meal recipe. Searching online, I realized that while there are countless recipe sites, there wasn't one dedicated solely to sauces. That's when it hit me: why not build a niche directory just for sauces? The brainstorming for a catchy name didn't take long. I wanted the website to be all about sauces so after checking on my domain broker website, I saw allaboutsauces.com was available so I decided to purchase it.
Phase 2: Prototyping the website in Figma 👨🎨 (1week)
Now that I had the idea, the next step was to visualize it. I opened Figma and quickly drafted a basic prototype for my website. I looked at other recipe website available to understand the standard navigation flow on such website (home page, recipe page, etc.). Because I have been working with figma for a few years now, it didn't take to long to build something that would help me for the next step.
Phase 3: Building the Frontend with Vue💻 (3 weeks)
Now let the fun begin. I decided to build my website using Vue3. The reason why I chose Vue instead of React or Next is simply because the learning curve seemed shorter. As I have only been working in vanilla html css and js for the last 1.5 year, I still consider myself an early beginner. And honestly Vue has been really fun to learn and work with so far. After a little bit of reading in their official documentation and following some tutorials on youtube (I definitely recommend this Vue Crash Course) , I could easily start my own project. In 3 weeks, I was able to build my project which include about 4-5 components (header bar, recipe card, recipe page, etc.) and 3 Views (Homepage View, Search Result View and Recipe View).
Phase 4: Building the Backend with Supabase💾 (1 week)
For the backend, I chose Supabase, an open-source Firebase alternative that promised simplicity and speed. It was my first venture into backend and I don't feel comfortable coding it myself so decided to use a backend-as-a-service platforms, and I was not disappointed. Setting up my account, creating my database and connecting it with my vue was honestly the easiest sh*t ever. I was a bit anxious at first not knowing how this would turn out but in then end, it was super straightforward. Supabase is guiding you all the way and their documentation is super clear. I will definitely use it for my future projects.
Phase 5: Merge to prod 🫠 (1 day)
Last but not least: merging to production. Here I didn't reinvent the wheel and just like for my last project I decided to use Vercel to deploy it. On my first project I encountered a few issue because I didn't use any framework but I quickly managed to resolve them. This time I was using it with Vue framework and Vercel has a quick project setup for Vue so there's literally nothing complicated to do. Once the project was up and running, I added my DNS record to redirect it to my website url and that was it :)
Conclusion
Reflecting on this journey from a simple idea to a fully functional platform, it's clear that there has never been a better time to turn your vision into reality. The array of tools available today has democratized the field of software development, making it accessible to anyone with an idea and the drive to see it through. Framework like Vue.js and tools like Figma, Supabase and Vercel not only simplify the development process but also empower creators to build with efficiency and innovation.
This content originally appeared on DEV Community and was authored by kolort
kolort | Sciencx (2024-10-09T08:13:34+00:00) This is how I built a sauce recipe directory in 1 month using Vue.js + Supabase. Retrieved from https://www.scien.cx/2024/10/09/this-is-how-i-built-a-sauce-recipe-directory-in-1-month-using-vue-js-supabase/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.