Build Electronics with Typescript & React for Hacktoberfest 2024
tscircuit is one of the best projects to get started in Open-Source, try contributing to 1 of these 5 repos!
Are you ready to dive into the exciting world of open-source development? Look no further than tscircuit, one of the best projects to get started with for Hacktoberfest 2024!
tscircuit offers a unique opportunity to learn Typescript and React while exploring the fascinating realm of electronics. Don't worry if you're new to electronics – no prior experience is necessary! If you’re experienced with Typescript, we’ve got some stuff for you too!
What is tscircuit?
Think of tscircuit as "React for Electronics." It allows you to design real-world electronic circuits using Typescript and React. This is what tscircuit code looks like, instead of creating web element like “div”, you create circuit elements like “chip”, “resistor” or “capacitor”, then instead of rendering a website, we render a 3d circuit (that you can actually order!)
With tscircuit, we've even designed a fully functional keyboard! The best part? Once you've completed your design, you can export it to a manufacturer and bring your circuit to life in the real world. How cool is that?
Why We're Participating in Hacktoberfest
tscircuit is a fully MIT open-source project. We love the spirit of open-source and Hacktoberfest because we work completely in the open and share everything we do (we even do livestream development). Also:
We have hundreds of issues available, many of which require minimal coding experience
Every contribution you make is automatically tracked in our contribution-tracker (and who doesn’t love a leaderboard!?!)
We have an awesome community (join the discord!) of contributors and love to sponsor those passionate about open-source
Hacktoberfest Rewards
We’re offering some rewards to contributors during hacktoberfest, the hacktoberfest rewards are separate from our Contributor Program where you can get sponsored to work on tscircuit, but any contribution counts towards both!
For Hacktoberfest, we’re giving away hats and hoodies1, here are the requirements for each:
tscircuit Hat
Subscribe to this blog!
5 contributions of any impact level across 2 projects
tscircuit Hoodie
The hoodie symbolizes you are a tscircuit rockstar contributor, thank you for your contributions!
at least 20 contributions in 5 different repos, at least 5 major contributions
We’re still designing it! But it’s going to be awesome!!!
Live Development and Code Reviews
Throughout October our lead maintainer Sev will go over and merge pull requests live on Twitch, Twitter and Youtube! He'll also be doing some live development sessions!
Check out all of our previous livestreams here
Join the Discord to know when we go live!
How you can contribute
I’m going to walk you through contributing to each project. I’ve organized the projects from Easy to Hard based on how difficult it’s been to get someone their first contribution. Generally if you’ve worked in a big Typescript codebase, the Hard issues should be no problem for you, but if you’re new to Typescript/React you should start on the Easy issues.
Help us build the largest library of schematic symbols!
Difficulty: ⭐ (easy) · Issues · Repo
tscircuit is creating the largest dataset of permissively-open schematic symbols, and we need your help to make them!
Medium: Glue chips to circuit boards with footprinter!
Difficulty: ⭐⭐ (medium) · Issues · Repo
3d Modeling Chips with React with jscad-electronics
Difficulty: ⭐⭐ (medium) · Issues · Repo
Video coming soon! Take a look at the issues/message on discord if you need help!
Help build our tscircuit command line and web dev tool!
Difficulty: ⭐⭐+ (medium-hard) · Issues · Repo
Video coming soon! Take a look at the issues/message on discord if you need help!
Build real circuits! Help us make tutorials for getting started with tscircuit! ⭐⭐⭐
Difficulty: ⭐⭐⭐ (hard) · Issues · Repo
Video coming soon!
Improve the website for sharing code snippets with a built-in editor!
Difficulty: ⭐⭐⭐ (hard) · Issues · Repo
Video coming soon!
tscircuit core 🚀
Difficulty: ⭐⭐⭐ · Repo · Issues
This is the core of tscircuit, where all the magic happens. This is where technical stuff like layout, autorouting, generation of Circuit JSON and interpreting the React into classes happens.
Typescript File Format Converters
Difficulty: ⭐⭐⭐⭐ (hardcore) · Repo (kicad-converter) · Repo (circuit-json-to-gerber)
Want to go above and beyond? Make a dent in tscircuit so big that you could see it from space? Improve our file format converters! This requires good Typescript knowledge and learning other file formats used in electronics design. In short: It’s hardcore
FAQ
I want to work on frontend code! Where can I do that?
There are two major frontend projects in tscircuit, the Dev Tool (note: the repo is called “cli” but it actually has the most frontend code!) and the Snippets Website
I know Python, can I write Python here?
No! But you can learn Typescript!
How hard is it to contribute?
Some issues are easy, you don’t even need to know how to code! Other issues will require familiarity with Typescript and some dedicated time.
How does tscircuit work?
We wrote a whole blog post about how tscircuit works here!
Will I get paid if I contribute to tscircuit?
You may be able to get sponsored if you’re eligible for the tscircuit Contributor Program (note: Github Sponsors must be enabled on your github profile, you must have at least 4 contributions, see the attached doc for more details)
How can I find an issue?
First, pick a project based on your skill level. Watch the video for the project above to understand how to get started. Then look for the tag “good first issue” on the issues page for that project.
I almost always recommend starting with the schematic-symbols project, it has the most issues and is the easiest to get started with. If you’re looking for more of a challenge, try jscad-electronics, footprinter the command line/dev server, or the snippets website
Where learn how to develop, run projects etc?
Usually the project will have a README that helps you run it, but almost every project works the same way where you just run “bun install” then “bun test” or “bun start”. You can install bun here
Check out our development live streams, they’re really helpful because you can see how Sev (the lead maintainer) works in real time!
If you run into bugs, you should ask an AI such as Claude or ChatGPT, they’re really good at coding and can help you with almost any question instantly!
Ready to Get Started?
We hope this introduction has sparked your interest in becoming a tscircuit contributor! Remember, we're always here to help in our Discord community and on Github Discussions. Let's make Hacktoberfest 2024 an amazing journey of learning and collaboration!
Happy hacking!