Create your own bearing charts for quick reference while sailing! Generates a chart of all bearings to/from a list of user inputted marks based on their lat/long co-ordinates. Allows download of this chart in both PDF and CSV format.

Had to create one of these charts myself for a sailing event and couldn't find a simple generator online. Also was about to create a "dummy" site to explore/work with some new technologies anyway. Combined the two to create something that might be useful to people, including myself!

Site is live at BearingChartGen

• Gatsby - Static site generator
• React - Web framework
• Styled Components - For bulk of styling
• Netlify - Hosting
• ..Other bits and pieces!

Inside directory to install all dependencies:

npm install

To start hot-reload server on http://localhost:8000

gatsby develop

To build a static site into the public folder

gatsby build

Site is hosted on Netlify -> any push/merge to master branch on GitHub will be auto-deployed. This will automatically run gatsby build

Very happy with choice of tools in the end - tool a bit of time to get used to the new tech but it all proved worth it.

• Gatsby was great, makes routing react very straightforward and seems to remove a lot of the "tedious" tasks.
• Have worked with React a good bit before but this was my first solo project with it. Feel like I've got a good grasp on the fundamentals now and am happy with the outcome.
• StyledComponents were a struggle to adapt to but understand their elegance now - think I need to explore global styling using them a bit further, and also look into when exactly to move to them from inline styling (e.g: is one or two styles inline better than a new styled component?)
• Netlify was a dream to work with - still shocked by how simple that process was.

• Make single mark tables collapsible
• Store calculated bearings rather than calculate twice on resize
• Magnetic variation allowance
• CSV download on small screens