What is CraftCoded?
CraftCoded, LLC is Jeff Browning; an experienced custom hardware logic designer and modern software developer.
In a world guided by data, CraftCoded aims to transform data into interactive visual stories, making complex information clear and shareable, sparking curiosity and conversations.
About the author
A strong proponent of open-source tools and technology, Jeff believes that by enabling developers to see "how it works", we can make more secure, useful, and better long term applications.
Throughout his career, Jeff has been a champion for technological change, breaking from past implementations when necessitated by product or technical requirement changes. "Pivot when needed" is a life motto.
If you're interested in collaborating or working together, connect with me on LinkedIn.
About the site
CraftCoded development and deployment environment is built to help developers build and deploy quickly using modern tools and technologies.
The frontend app is built with Next.js, React, TypeScript and TailwindCSS with native three.js and D3 for data visualization, hosted on Vercel.
Data fetching and state management is handled by RTK Query(redux), with RxJS for event handling, GreenSock Animation (GSAP) for animations, and Playwright.js for testing.
The backend app is built using Node.js and Supabase for user authentication and data storage, with Stripe for payment processing.
For development ease, each service resides in a separate docker container with GitHub Actions for CI/CD.
The site is designed to be responsive and accessible, with a focus on performance and user experience. Feedback on accessibility improvements are welcome!
Open Source Credits
Thanks to the open source community for providing the tools, libraries, and examples that make this site possible. In particular, these sources/examples were foundational in my learning and bootstrapping this site.
Discover Three.js by Lewy Blue - A great resource for learning Three.js and modularizing your code for long-term support.
CodePen examples by Ksenia Kondrashova - Amazing three.js examples which provided inspiration on what a modern web app can produce. Her WebGL work is amazing!
NASA Visible Earth - Source for all texture maps used in the 3D space scene.
Next.js Subscription Payments by Vercel - A great example of how to integrate Stripe/Supabase payments with Next.js.
Supabase - An open source alternative to Firebase, providing a Postgres database and auth service.
Redux Toolkit - RTK Query library that makes data fetching and state management mimic design patterns in modern backend CMS applications... but for the front-end.
TailwindCSS - A utility-first CSS framework. After using it, the author is right: I never want to think of what to name a CSS class ever again.
TypeScript - A superset of JavaScript that provides static typing and other features to help developers write more reliable code.
ChatGPT and CoPilot - These AI models/applications have transformed how I work and have helped me write code and content faster (and use more TypeScript ...the tool I both love and battle with)
If anything on this site looks to be a direct copy of your work, please let me know your source material and I will credit you or remove it. I am not looking to take credit for others work, only to learn and grow from it and roll the knowledge forward.