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