The mission behind the making of Sparkeats was two-fold. The first goal was to provide the apprentices an opportunity to use and expand upon everything learned over the course of the apprenticeship. The second goal was to provide Sparkboxers and friends (that’s you!) an excellent resource for the best places to eat and drink. In each Sparkeats review, Sparkboxers provide an honest opinion of their experience, offer menu recommendations, and provide an individual star rating based on a scale of 1 to 5 stars (5 being the best).
Project Strategy Meeting
The initial strategy meeting is where it all began. After an introduction to our client, played by Rob, we discussed the project’s goals, prioritized features, and timeline for tasks to be accomplished. We were introduced to ZenHub, a project management tool that integrates with Github, which allowed us to quickly organize our tasks into manageable bites easily accessed by everyone on the team. ZenHub became our go-to resource during daily stand-ups where we discussed our accomplishments from the previous day, our goals moving forward, and whether there was anything blocking us from accomplishing those goals.
Design
Unique to the 2017 full-stack apprenticeship was that both Betty and I arrived with the goal of transitioning our career paths from design to development. Understandably, a fantastic design was important to us. Sparkbox frontend designer Andrew absolutely did not disappoint! We instantly fell in love with the design of a series of food icons, each created in the shape of a location marker. It was brilliant! Not only did Andrew present mock-ups of a clean, crisp logomark and site design, he was also the brainchild behind the name “Sparkeats.”
Through the use of InVision, a prototyping tool, we were able to easily access mockups of pages and quickly identify the colors, fonts, patterns, and grid layout. During the early stages of the project, Andrew joined us once a week for a project demo and planning session. It was during this time that Andrew shared his design vision for components such as individual and average star ratings for each place reviewed, the number of places reviewed, and a drop-down menu of restaurant locations. These components gave us the opportunity to write handlebars helpers and JavaScript.
Development
Before we could dig into the creation of HTML, CSS, and JavaScript files, we needed to build a foundation of tasks and tests to ensure our code continued to meet our expectations throughout each step of the project. We set up Heroku for quick deployment and used npm scripts for all our build-related tasks. From spinning up a server to watching and compiling our Sass and Handlebars partials into CSS and HTML files, we were always able to find the right script for the task.
During weekly sprints Drew, our project manager, and Ryan, our technical director, set the pace for a designated set of development tasks to be accomplished. Sparkeats is written in NodeJS, Handlebars, Sass, and YAML. Using Chai and Mocha, we implemented a behavior driven development environment where specific tests were written to ensure our JavaScript met our expectations. We added Code Climate, CircleCI, and ESLint to keep our tests tidy and our JavaScript clean. And finally, we included Babel and Webpack to allow us to write modern JS and wrap it up into a nice little package.
Each development task presented a new set of challenges and the opportunity to learn something new. The handling of the data was a challenge we struggled with up until the last weeks of development. We experimented with the implementation of front matter into our handlebars partials. We debated how to organize our data, whether it should be in one file or multiple files. After polling Sparkboxers for their favorite places and reviews, we were able to replace our dummy data with actual data, which in turn revealed multiple styling issues. We learned that development is a continual process. We rarely got it right the first time, and that’s okay! There is always room for improvement. Our focus remained on building a strong foundation from which we can continue to learn and grow.
Finding and using effective tools of communication and tapping into the extensive knowledge of seasoned Sparkbox designers and developers through pair programming is an essential part of the learning process for Sparkbox apprentices—and employees. Nathan helped us get our Github repository back on track after a series of crazy Git commits. Philip offered advice on how to create fallbacks for unsupported CSS properties, such as flexbox. Rob Tarr showed us how handlebars, front matter, and YAML data work together. And Katy refactored Sparkeats data and testing environments, stood by my side as I learned how to write handlebars helpers, and helped me keep my sanity as I struggled my way through writing scripts to validate data. These examples only begin to scratch the surface of the amount of collaboration that took place on a daily basis.
Takeaway
The apprenticeship not only taught us the technical skills needed to create Sparkeats, it also immersed us in a culture that taught us how to continue our growth, share our knowledge with others, and find a great bite to eat. Bon Appétit!
