Vailable

Finally decided to put our website out on ProductHunt! Check it out here: https://www.producthunt.com/posts/vailable. I'm excited to see the new users that come from this experience! This is actually my first ProductHunt launch ever, so I'm glad that I am finally able to get more comfortable with the platform.

Upon the recommendation of many of my users, I decided to add a React Element to display the timezone in which the event was created. I found this to be the most crucial component to add mainly since the COVID-19 situation has thrown employees and students into a variety of different time zones. The function is working well now and I'm glad that it's finally off the bucket list.

The larger hurdle will be tomorrow - the release of Vailable on ProductHunt!

After a straight week of coding, I was able to completely implement the new Vailable frontend design. Now, the page looks a lot more playful, yet professional at the same time.

While the particle background adds a lot of life to the app, it did give me a lot of problems with CPU usage at first. To fix it, I had to prevent unnecessary serenaders of the entire page caused by the react-particles-js package.

Now, I've gotten the CPU usage of the page under control, and I'm super happy with how the website looks.

After using my app for 2 months, I started becoming a bit unsatisfied with my existing frontend design. It was clean and functional, but looked more like a side project than a product.

I decided to re-design the entire website while keeping the backend architecture of the web app largely the same. It looks great and I'm excited to start implementing it.

After going through the hassle that is the Google AdSense approval process, I was able to get Vailable approved on AdSense.

Adding ad units to the website was super simple! I used a npm packages called react-google-adsense, and added a few units around the event creation page.

While using Vailable, the experience seemed pretty smooth until I ran into cases in which large numbers of people were using the app at once. I realized that the server overload caused by this were mainly triggered by a really inefficient query I had on my backend.

After I rewrote the query to be more cost-efficient, I was able to work out the major instabilities. Now Vailable is running as smooth as ever!

By procrastinating on a lot of university homework, I was able to code up the MVP within only 3 weeks. I used the following stack to create Vailable:

• React
• Node.js
• mySql/MariaDB

The most difficult component to code was the time submission bar. I had to use a lot of mouse event tricks that I was not familiar with, but luckily Stack Overflow helped me work out problems. I'm excited to start using this to plan my university organization meetings!

While I used Adobe XD in my past Full Stack Dev job, I never used it to wireframe an entire app before. However,  I really enjoyed the process since it allowed me to draft a more organized vision of the app before beginning the development process.

Some design tips I kept in mind were

• Keep things simple and refrain from adding too many features for the MVP
• Try to design for the future by making page components modular
• Use symbols whenever you need to reuse sections

After struggling to pick a board meeting time for my Yale Science Olympiad group, I came up with the initial idea for Vailable. I wanted platform that could help me select meeting times compatible with every else's busy schedules.

After exploring some options like When2meet and Calendly, I realized that either the UI was bad or they required paid registrations. Eventually, I realized I could probably build something much better myself.