Do I Have A Programmer’s Brain?

I attempt to answer that with my Phase 2 React Project for Flatiron

It’s a question I’ve been asking myself since I started down this journey. Do I even have the mind to pull off a career in software engineering? Me, a kid who went to school for music production.. And while I’m still asking myself that, this project inched me a little bit closer to some relief and a greater sense of confidence.

Nowadays, a personal website feels like a necessary calling card for any industry. And for someone who’s trying to wear a few different hats, it should be especially dynamic. The few self-imposed requirements I had were to keep it simple and streamlined, have a dedicated section for my music credits, and display social media links right upfront. Landing on the home page, the user is greeted with a short “about me,” a photo, and a set of links at the bottom. The links persist to all components, and redirect the user to my other pages: Instagram, Spotify, Medium, GitHub, and a MailTo address.

I wanted the music section to be a continuous stream of data that I could add to as more credits were published. Ideally, there would be a link to play the tracks. Upon some digging around on the web, I found this React component, created by C. Lewis (https://github.com/ctjlewis), that would use Spotify’s share links and turn them into embedded players. It couldn’t be easier to implement. I stored all the links in a db.json file and retrieved them with useEffect. Once the data was stored in state and mapped out into individual songs, they are passed down into a child component called MusicCard. Here, the metadata was displayed on top of the player:

Each player displays the song’s title and artist. It will either play the full song or a shortened snippet, depending on the user’s Spotify subscription. The logo in the top right corner redirects to Spotify’s website or the app if the user has it installed on their device.

A comments section for friends and clients would be a fun way to give the sense that there’s actually a real human that does real human things behind this website. This section operates similarly to the music section. The data is housed in the backend json file, separated from the music and image data. A form utilizes a post request to add new comments, and a useEffect hook retrieves them and appends them to the DOM.

To wrap it all up..

I’ve had professors, mentors, and friends all try and answer that initial question for me. Some gave some vague reassurance, others offered technical concepts I should have a grasp on in order to be successful in this field (i.e. reduce()). But this project taught me that, if you’re sometimes having the same doubts about your journey that I am, you can find ways to bridge the gaps between S.E. and wherever you’re coming from. For me, it was having fun with music. And finding out how to see those results appear on the screen eased my worried mind just a bit.