Kampai Cocktails 🥂— A fun web app made with React and APIs

Halee Pagel
3 min readDec 22, 2020

I quit my job in April 2020 after I was accepted into a coding boot camp in Tokyo. For three months I pushed myself harder than I ever had before. I learned computer science fundamentals, deepened my JavaScript knowledge, dabbled (and fell in love with) React, and completed multiple projects. I wrote about a mobile fantasy VR game I helped developed called Mystic Tear ✨. You can read about that here if you’re interested.

One of the most fun projects I worked on was Kampai Cocktails 🍸 — a web app that recommends cocktail recipes using an API that is searchable by ingredient. We even incorporated a link to a youtube tutorial in case you don’t know how to make the recipe and links to Rakuten marketplace if you want to stock up your home bar. I worked on this project with an amazing team and we really challenged ourselves to improve our programming skills.

What I want to do now is talk about the development of our web app — the good, the bad, and the ugly.

Close up of a person typing on a laptop
Photo by Christin Hume on Unsplash

The Good 😁

Incorporating an API into our web app was a fantastic way to practice async/await calls. I learn a lot better when I’m trying things out myself. Working with my team to implement our API calls correctly was an amazing learning experience and confidence booster.

This is the first React project I worked on and it was once again, a perfect way to take my theoretical knowledge and put it to action. I watched a team member work on adding modals to individual recipes and that opened up another part of the React experience to me.

The Not So Good 😬

Async/await. Oof. There are so many places where things could be going wrong with your code and the nature of async/await calls doesn’t help the process. But, the sticky problematic bits are big learning moments, and overcoming them made me a better programmer.

The Code Base 💻

Alright, let’s talk about the tech stack. For this project we used:

  • JavaScript/HTML/CSS
  • React
  • Rakuten Rapid APIs
  • Anime.js

If you want a peek behind the curtain, check out our project’s codebase here. We’d love your input if you have an idea for an improvement.

Ina Garten teaches us how to survive 2020

Conclusion 💭

Working on a fun project is a perfect way to stay motivated and expand your technical skills. I still have a lot of ideas for how to improve Kampai Cocktails and I can’t wait to work on them in the future. Cheers to you for getting this far! And remember, it’s 5 o’clock somewhere! 🥂

Thanks for reading! My name is Halee Pagel (rhymes with Cali Bagel) and I’m a software engineer in Tokyo, Japan. You can find me on twitter which I mostly use for liking tech memes and MLB updates. ✌️

--

--

Halee Pagel

Software Engineer | From 🇺🇸 | Currently 🇯🇵 | Loves 🍪⚾️🎮