From Fire Fades to FireBook
The Fire in FireBook
It’s been a long time coming. I’ve been toying with the idea of making a barbershop appointment system since I started Flatiron School last year. It was a general concept devoid of form, as I didn’t have the necessary tools to make it real, kind of like a JavaScript constructor class, I had the idea but no way to instantiate it.
When I started the JS lessons, ideas would come and go, I would write them down on my phone and let them marinate, looking at them every couple of days to see if I still liked the concept, if I didn’t, I would remove it and let the other ones compete for attention, in a way it was like the Hunger Games but way less deadly and the prize being a chance of becoming actual code. FireBook easily won after sitting for one week on my notes.
How to use FireBook
Using FireBook is pretty straight forward, and I tried to make the UI as easy to understand as possible without making it too cluttered with unnecessary labels. When you first open the web app, the days you’ve already created are loaded on the right side of the screen, each one has and edit button to update that day’s information and a delete button, to permanently remove it.
At the top you’ll see ADD DAY button, next to the banner, it’s the first thing you’ll do right before opening the barbershop in the morning, you select the opening and closing hours and click create, your workday will be added to the list of days.
When clicking a day, it will be highlighted and the range of open hour will be shown in the middle, in half hour increments, select the time and enter the name of a barber and the client getting the haircut, click save. By clicking a specific time, you’ll see all the appointments at that time which can be edited or removed entirely by clicking the edit/delete buttons right underneath them. FireBook saves space on the front desk and removes the need for a physical appointment book.
Getting Things Running
I’ve learned from my previous projects that preparation is key. It’s very easy to get carried away by excitement and start coding right away with no compass to tell you where to go next, so, this time around I focused on getting everything laid out, including the visual aspects of it. I’ve used draw.io to outline every form and menu, how things should look once everything is up and running.
This time around, rails was much simpler than my previous projects (rails as an API is awesome) so most of my planning was focused on the front end.
Challenges in Time
No matter how well the code looks, what makes a web app appealing is the presentation, aka CSS. I’ve underestimated it for the last time, so I focused on getting familiar with the core concepts, mostly centering elements. This being a one-page project, I had to figure out a way to render different elements on the same part of the page, while having certain elements remain dynamic around them. Once I understood how to make CSS grid work, things fell into place and I could start focusing on JavaScript.
One of the challenging parts was dealing with time. A user would select a barbershop opening and closing hours in am/pm format, but when sent to the server they would be stored in the 24hr format, as that made validations run smoother. When hours were fetched from the database, I’d had to convert them back to am/pm and display a <div> for every half hour the shop is opened, sounds simple enough until you realize it has to be able to switch between am/pm automatically and it has to know that after 12am comes 1am. I could have taken the easy way out and limit the opening and closing hours to a certain time, but what’s the fun in that. This one method took care of that. Bit of advice, when you have something more complex, talk pseudocode to your rubber duckie (or equivalent artifact) It’ll help work through problems like this:
Things were smooth sailing after that, having a plan makes the difference between getting stuck and getting things done.
Failures are blessings in disguise
Like in every project I’ve done so far, the biggest reward is not just getting it up running, but the lessons learned along the way (cliché but true.) I learn by doing, so failing over and over again at something, trying different things until one of the works, cements the concept I was struggling with. Moving from procedural JS to OO JS took a bit of adjustment but after coding the first class in FireBook, things made sense:
Like a good detective, you follow the trail, see what the interpreter hits next and do some work there, rinse and repeat. I avoided getting overwhelmed by thinking of the project like a car, you open the hood, and it seems like so there’s components everywhere, but once you know what you’re looking at, you realize it’s just a bunch of interconnected systems that work as a while, but they’re still individual. You have you cooling system (radiator, water pump, etc.,) powertrain, suspension and more, once you diagnose them as individual pieces it all makes sense. Like coding, the big picture comes with patience at the end.
What the Future Holds for FireBook
Being a cosmetologist, I’ve been around booking systems for a while, from paper books, to complex (convoluted) software that takes a week to learn, to easy-to-use POS systems clumsily adapted to work at a salon/barbershop. Knowing what’s needed for an efficient and complete booking system, there’s a bunch of features I’d like to add, stats for one. You would be able to store specific clients and see how often they get their haircuts and with whom, you could also look at how many clients a barber cut in a day/week/etc.
I’d make the half hour <div> change color if there’s already bookings there, and maybe mark them as full so you don’t have to click it to see all your barbers are already booked at that time.
Conclusion
I enjoyed building every project so far (I love coding!) but this one took it to another level, I literally felt myself level up like in an RPG and move on to more challenging floor, JavaScript ‘reaches out’ everywhere and the way it interacts with the DOM is fascinating, It’s incredibly adaptable to anything I want to do in the frontend and the tools it provides are concrete and easy to understand. I’m looking forward to what the next big project will be, now that my toolbox has been expanded with JS, the sky’s the limit.
