RoastCard

Customizable Roast Card (Coffee Roasting Log) Application

What is RoastCard?

Roast Card is an easy-to-use web interface that allows users to create their own custom coffee roasting log to suit their own style and needs. Templates can also be selected for reference or for those looking to start with a quick and easy log. Users may print or save a log to their computer and load it for future use or modifications.

How to use?

Roast Card was designed with craft coffee roasters in mind but can easily be used by anyone. All that is required is an internet connection. Visit the website or download or clone the github repository (open the index.html file), and you will have a couple of choices to get started.

For desktop users:

• Items can be clicked and dragged around the screen to the canvas.
• Items can be modified by double-clicking them. A popup will appear with available options.

For mobile users:

• Items may be added by selecting the Item menu above the canvas area. A menu of items will appear, and you may select an item to append it to your mobile log.
• Items can be modified by double-taping them.    If you're interested in coffee roasting but don't know where to begin, you can check out a variety of online resources to get you started.

Features

• Premade logs for easy reference, ideas, or just a quick print.
• Build your own roast card by positioning and customizing premade items on a canvas.
• Print, save, and load your card for future tweaks.
• Basic Roast Tools Such as Log Chart. (more to come...)

Motivation

As a coffee enthusiast and craft roaster, I had always struggled to find a pre-made roasting log that I liked. Many of the available options required me to purchase a printed booklet. This often led me to hand-draw a card on paper or create something in Excel to suffice. When I embarked on my journey as a software developer with Get Coding, it provided an excellent opportunity to find a solution for a personal hobby and develop my first project simultaneously. Building the Roast Card web app was a fantastic experience that allowed me to strengthen my foundation in HTML, CSS, and JavaScript and prepared me to delve into the more advanced aspects of web development.

Technologies

• RoastCard was built using HTML, CSS, and Javascript.

Libraries:

• Interact
• FileSaver
• HighCharts

Check out the demo below:

Please Note: The application, while functional, is still in ongoing development.

Live Preview: https://derethan.github.io/RoastCard/

Features currently in-development:

• More items for your canvas
• Roast Tools, such as Charts, Flavour Wheel, Star Ratings, etc