March 2022: Styling React Charts and How to Build an Anti-Theft Tracker for under $100
An IoT project inspired by bees đ, plus two articles to improve your web development with React and Docker.
Hi everyone,
Spring has sprung in my neck of the woods. Trees are in full bloom an a yellow film of pollen is starting to coat everything, but it means that warmer weather is here to stay and Iâm grateful for it.
This newsletterâs going to be a bit all over the place in terms of tech topics, so there should be something for everyone!
Iâve got a new IoT project to share - an anti-theft tracker inspired by bees đ, an article on how to style React charts and data visualizations, and even tips on how to use Docker containers to make web development among teams easier.
Letâs get going.
Earlier this month, a co-worker shared a story about beekeepers using tracking devices to protect their hives and suggested the cellular IoT devices the company I work for (Blues Wireless) would be a great tool for a low-cost asset tracking and recovery solution, and I decided to build one.
Surprisingly, with just a few pieces of Blues Wireless hardware, 4 commands to configure the tracker and about an hour of testing, I had a working proof of concept that not only tracks the assetâs location when motion is detected but also sends SMS alerts including the assetâs last known location in a Google Maps link to aid in recovery.
If youâd like to see how I did it, and build your own anti-theft device from start to finish, see the full Hackster article here.
I wrote a new blog post about how to custom style charts and tooltips from React chart library Recharts.
A few months ago, I was inspired to build a dashboard displaying some of the IoT data generated by devices in the real world, including data charts for things like temperature and device voltage over time.
The dashboard is built with the Next.js framework and I chose the React chart library Recharts for my data visualizations.
The library is great, but creating charts and adding custom styling to things like the tooltips was a little tricky, so I wrote a blog post walking through both of these things step-by-step.
This is what the finished dashboard looks like as well.
Finally, I published an article on using Docker containers to make web development among teams easier.
If youâve ever struggled to start up an app for local development that requires a frontend, a backend, and one or more databases, this articleâs for you.
Docker containers and docker-compose.yml
files will dramatically reduce the complexity of starting all the necessary services (databases included), and I share a JavaScript application example to show how it can be done. I hope you find it useful.
I hope you enjoyed this monthâs edition of âPaige Codesâ. Please share with your friends if you did.
See you again at the end of April,
- Paige