Developer Spotlight: Brandon Reid

In this installment of the Cosmic JS Developer Spotlight Series, we sat down with Brandon Reid, a JavaScript developer residing in Dallas, Texas who’s currently Lead Developer at Simple Media. Brandon recently launched a new React / Node website on Cosmic for The Arnold Companies, an energy and aviation client. Follow Brandon on LinkedIn and GitHub, and enjoy the Q/A.

Cosmic JS: How long have you been building software?Brandon: Personally, I used to create small C# scripts for a PC game I played back in high school, called Space Engineers (I know! How much more nerdier can it get right?) Professionally, I didn’t start building production grade software until my sophomore year during my Bachelor’s degree at the University of North Texas. I was working as a research assistant at the time, back in 2015. So three years now, and I’ve enjoyed every minute of it.

What is your preferred development stack?I’m on the JavaScript bandwagon. So, my go to has always been the CERN stack. Couchbase, Express, React, and Node. However, since working with Cosmic JS, I’m going to have to switch out my backend preference: Couchbase for Cosmic. 😉 As far as UI frameworks go, my go to has always been Material UI design. It’s simple, elegant, and has a huge UI Kit for react that offers a ton of great components.

What past projects are you most proud of and why?Hands down, one of my first production applications I ever built when I was a research assistant at The University of North Texas, working under Dr. Ram Dantu. His research lab built a mobile android application based on wearable technology, that could monitor the quality of CPR being performed on patients in code blue emergencies. Essentially, a nurse would wear an android smartwatch synced with an android tablet that would monitor CPR movements/quality. The research was partnered with Texas Health Presbyterian at Frisco. My job was to implement an internal web application that could display live statistical data in the form of charts/histograms. The data included rates/min of pumps being performed during CPR, how many pumps/min, etc. I had to implement a backend sync gateway between android devices and an internal server, working with a full stack. This project really made me feel like I was making a difference and an impact in the medical industry.

Talk a little bit more about your process for building apps.Usually before I build an application I try to put together a few high level diagrams laying out important functionalities of the application, mostly in the form of interactive/sequence diagrams. Then I’ll analyze what kind of global and reusable components the applications will have. This helps me get a better picture of how data will flow throughout the application’s component tree and what kind of data management I will need to implement. After that I’ll implement some type of agile workflow, work in development sprints, and try to get an MVP out to my clients. I like to be as transparent as possible with my clients, and include them in the agile process every step of the way.

What are some technologies you are excited about that you are using today, or want to learn more about?Oh gosh that’s a big list. There is so much cool stuff out there I’ve been wanting to get into. I’m really excited to work with some JavaScript libraries that offer 3D rendering capabilities like 3D.js. With modern browsers becoming more powerful, I feel like we will see an increase in sites using 3D stuff. I’m also excited about the use of AI for chatbots and other use cases, I’ve been eager to get some time to spin up an AI server on Digital Ocean and play with it. Also! React animation libraries. There are some really talented developers out there creating some cool animation stuff. Can’t wait to get some time to play with those as well.

**You just finished building TAC, taking it from a WordPress installation to a modern API-first stack — what was that like?**Building TAC was a blast! It couldn’t have been smoother working in Cosmic to build out a super fast API backend. I was able to use Cosmic’s React Starter kit and hit the ground running using an awesome boilerplate packed with NextJS and it’s SSR capabilities. I never once had an issue with Cosmic and never had to contact support. That’s how simple, easy, and elegant it is for a developer to get started on the platform. I love seeing this trend of larger companies finally getting off clunky systems like WordPress/Drupal and moving over to a more modern web stack. As a Full Stack Developer specializing in React/Node, I couldn’t be more excited for the future of web development.

TAC’s backend is powered by Node, Next.js, and Express. Next.js is used for server side rendering capabilities for SEO optimization as well as site routing. Next.js also makes it easy to integrate with babel and webpack since they are built right in. I used Next.js routing API to rendering page templates for pages that have the same design layouts. TAC’s frontend is powered by React.js and the world’s most popular react UI framework, Material UI. In order to use Material UI with SSR, I had to wrap the site in a JSSProvider, and use CSSBaseline. For development I used Eslint as a linter for a cleaner and more consistent codebase. Since TAC uses ES6 javascript, I had to also implement a very small amount of polyfill to transpile ES6 to ES5 in order for the site to work with IE11. Some notable node modules I used were: React-Image-Gallery for the image galleries across the site, React-Masonry-Component for the newsroom, and Fetch for API requests. For email services/API I used nodemailer and mailgun.

I started building the site by using Cosmic’s React Starter Kit, which helped me get jump started right away. The beginning of building TAC started with implementing all globals for the site (Header, Footer, Favicon, etc). So I quickly created some javascript request functions to pull data from the cosmic buckets using Cosmic’s Node API. I added those global components to the sites main _app layout, so every page would be wrapped and rendered with those globals. From there I analyzed what pages would have reusable components across multiple pages or the site, and created component views for those pages based off my analysis. From there I was able to efficiently knock out page designs and implement object types in the cosmic bucket on the fly. As we got closer to site launch, I noticed the compatibility issues with IE11 and had to come up with a solution. At first, I was going to do a browser sniff in the code to display something that would work on IE. Instead I implemented Babel and some polyfills to solve any compatibility issues.

The Cosmic JS Spotlight Series is dedicated to showcasing developers that are building apps using modern tools. To stay connected with us follow us on Twitter and join the conversation on Slack.