The Daily Issue - My First React App

What's today? Day X. That's what I've been telling myself since jumping from a career in business development to pursuing one in web development. I can't remember exactly when I started to lose track of the days and started referring to each day as, Day X. But if I had to guess, it was probably around the time my code complexity went from a simple "Hello World" to making API calls.

Just scratching the surface of React.js and getting somewhat comfortable with JavaScript, I was eager to plan my next project. As I looked through lists upon lists of free APIs to use, I struggled to think of an idea. While random cat fact generators were cool and Pokemon encyclopedias even cooler, nothing seemed to interest me. That's when I realized I forgot why I became interested in coding in the first place - to create and to collaborate.

And that's how I came up with The Daily Issue. It's an app that scrapes for trending repositories (projects) in GitHub, to help developers of any level, find issues like bugs, and contribute to open-source projects.

Come check out the latest issue!

The Daily Issue

Project Planning

You might be asking, why not just go to www.github.com/trending? After all, it's where the information comes from. The Daily Issue was designed and created with users of all levels and backgrounds in mind. It summarizes key information to help users quickly determine if they'd like to track a repository or not. All while keeping a clean, intuitive interface, despite clusters of information.

I started with creating some simple wireframes using Figma. Feel free to check them out here: wireframes. The biggest challenge was finding a way to squeeze batches of information into a small space. The repository (project) cards in the middle needed to have just enough information to help as a reference, while the data display area needed just enough space without encroaching on the grid of repo cards.

Features

While my desk was ridden with post-it notes and napkin scribblings, I really just had two main focal points: reliable information and user experience. If you're wondering why information accuracy was important to me even though I was using GitHub's API, see below under "My Code Journey".

In terms of UI and UX, I wanted my users to be able to see key metrics easily and understand the meaning behind them. My focus around this was so that users could efficiently spend their time on The Daily Issue and be able to quickly explore.

Along with the repository summary and the primary computer language it was written in, icons illustrate the star count, fork (copy) count, watcher count, and issue count. The color for each number dynamically changes depending on its value. For example, a user may quickly skip a repository if there's a low number of issues. Or perhaps a low number of forks.

But, metrics are just one side of it. Those numbers may not really mean anything to you. In fact, you might be genuinely interested in the project, despite the low amount of public interest. That's where the save feature comes in. Just head over to the menu on the left to toggle your favorites. Even if you go offline or refresh the page, small key data points are saved locally so that repository information can be retrieved at a later date, even if it leaves GitHub's trending list.

Finally, since we're called The Daily Issue, seeing repository issues and deciding if you want to help is really the end goal here. That's why issues that are labeled as bugs are marked in red. More features around this will be added in the future. Stay tuned!

My Code Journey

A lot was learned, from planning to execution and everything in between. I've had to expand my knowledge into other subject areas such as HTTP Protocol and proxies. I also had to level up some current skills, like building responsive interfaces and understanding how to use flexbox and grid in CSS to precisely place elements.

The API

This was a challenge for two reasons:

The list of trending repositories is not exposed in GitHub's REST API, meaning, there really isn't a way to get the same exact list from their database that matches the one we see when we go to www.github.com/trending. Because of that, I had to web scrape by fetching the URL. The only catch is that there are safeguards built-in place that prevents applications like The Daily Issue to be able to remotely access information from GitHub (CORS violation error). Long story short, I had to learn a little about proxies and ended up deploying my own to Heroku to circumvent a few obstacles. Now I'm able to freely web scrape to retrieve the information I want and then pass that to GitHub's official API for supplemental information.

GitHub REST API

React.js

I wanted to challenge myself by utilizing some newly learned concepts, like Context, and expanding on ideas like Effect Hooks. I'm particularly proud of putting Context to good use for cleaner code and in general, just understanding more about how React hooks work in order to manipulate the DOM.

CSS

I didn't use any framework here and that forced me to really understand how HTML elements are positioned with respect to their normal flow. In order to make it responsive, I superimposed multiple grids in combination with flexbox. With that being said, I can't wait to try to use a framework next time!

Highs and Lows

Overall, I'm very happy with the end result and I believe I learned some key lessons here in developing a project from the ground up. The biggest takeaway for me was staying organized and having a board to track tasks and be able to break larger problems into smaller pieces.

Future Features

I'm currently working on a mobile-friendly version and adding a feature to give users the ability to search for repositories by categories (ex: view projects primarily written in JavaScript).