Introducing react.explore-tech.org
An open source project to help developers learn, develop and explore 💪.
TL;DR
I wanted to create a website to help developers learn and explore. There are a lot of resources online (GitHub, Blogs etc) that list and show projects, but I wanted to create something visual so I created a website to visualise projects and help people.
Introduction
Two weeks ago I released github-actions.explore-tech.org, a website designed to help people find GitHub Actions. Whilst I was developing the website and getting feedback I wanted to take the learnings and build a platform to help people learn, so I created a new React project.
The mission was simple: Create a visual website to help developers explore React.
So the story starts…
Motivation
One of my personal motivations in life is helping other people. The best thing about being a developer is you can use technology and creativity to create something that can help others. This is what fascinates me about the Open Source world.
A few months ago I was introduced to GitHub Actions. After listening to a podcast about GitHub Actions I tasked myself to create something to help people find GitHub actions whilst they are exploring and learning all about them.
A week later I released github-actions.explore-tech.org. The project seemed to do well and people were contributing which was a great feeling 👍.
Next, I was interested to see if I could use these learnings to create something for the React community.
That's when react.explore-tech.org was born.
The goal: Build something visual to help people learn and explore React.
Building the application
I’m just going to go over high-level details here, if you want to understand more you can check out the project.
First I wanted to start with some basic requirements:
- A website that lists React materials
- Has to be visual
- Something people can easily contribute to
So with this in mind, I started spiking out some ideas. I already had my previous project as a base foundation so I just worked up from that.
My first focus was to understand what material I wanted to get in as an MVP (Minimum viable product). I settled on GitHub projects as they can lead to cool ideas/projects and websites.
Tech Stack
I quickly listed the tech stack that would be required, I already had a clear picture of what I wanted to do and already had experience in some tech that could help with the mission.
- React & Node (core)
- Gatsby (for building)
- Netlify (for hosting)
- GitHub API Integration (for data)
- puppeteer (for screenshots)
So with the tools defined I started.
Automation
The first proof of concept was straight forward, I had a markdown file with frontmatter listing some data I manually entered from GitHub. With the data in markdown, I used Gatsby to read and render pages. Things were put together pretty fast and the concept was proven. Happy days 👍
But to scale this up, I knew this process would have to be automated.
So I created a script to do a few things:
- Use the GitHub API to query a given project for all the information required. (Project info, readme data, release data, etc..)
- Format the JSON into markdown & frontmatter for Gatsby
- Use puppeteer to then take a screenshot (of the homepage or GitHub page)
- Then commit the change in.
With most of the work automated all that was required was to add the material to the website.
Here is an example command:npm run add:component {GITHUB_URL}.
This command would create a new resource material into the component category, get the data from GitHub, parse it, screenshot and commit.
Once the script was set up and good to go, the rest was UI work.
Building the UI
Building the UI turned out to be easier than I thought. The majority of the website is generated through scripts and Gatsby, all I had to do was create some basic page templates. Before long I had some basic pages setup and running thanks to Bulma for styling.
Next, I shared the POC on Twitter.
I was amazed at the engagement on Twitter (much more than I expected). So I used this as a motivator to keep going as from what I could tell the project seemed to resonate with people.
I started to create a backlog of features. From past experience with side projects if you want something out the door you have to be strict with whats in vs out and just get it out!
Listing whats in vs out helped focus for the project.
Once the website and material were set up the last thing was some finishing touches getting ready for the Open Source world.
Finishing touches
So like most Open Source projects, I wanted to make sure it had a few things:
- Additional Tests
- Code coverage
- CI integration
- Contributing docs
- ReadME docs
Once these items were done it was time to release, which brings me to now!
Conclusion & Contributing
Its been a great project to work on so far, I have personally learned a lot about Gatsby, GraphQL and Netlify. (Which are all awesome tools!!).
I have no idea how this project will land or if people will find it useful, but I hope that some people learn from it and/or even better… contribute to it.
I look forward to seeing what happens and if you are interested in helping out please get in touch! I’m sure there are loads of ways we can improve it and take it to the next stage!
Thanks so much for reading 🙏👍
On a side note, I would like to share a book with you that I am currently writing.
The Balanced Developer is a novel about a Junior developer landing his first job and entering the fast-paced world of IT. Over the duration of the book, he is presented with challenges, moments of inspiration and develops an understanding of what is required to take him to the next level.
In this book, I will translate my experiences over a decade of being a software engineer into the characters mentioned in the book, and hopefully, it’s a story that can resonate with you.
⭐ I am looking for ways to add value to others around me and help people achieve what they want. So I would like to give you this book for FREE. ⭐
⭐ If you are interested in the book then follow the link below and tick the box that you want to share your email. (It’s important you share your email! so I can send you the book for free.)⭐
https://leanpub.com/steps-to-software-engineer
Thanks!
