DEV Community: Marcus Gutierrez

Project Retrospective - Dev Dashboard

Marcus Gutierrez — Tue, 31 Aug 2021 03:43:07 +0000

It's been a hot minute since my last post here! I've been buckling down (and drinking a lot of coffee) amid a slew of job applications and interview preparation, but it's been incredibly rewarding to see my skills and abilities develop with each passing day. That said, it had been quite a while since I had built a substantial project. Sure, following along with a tutorial can be a great experience, but there's nothing quite like getting your hands dirty as you build something from scratch. Check out this project's ReadMe for an in-depth look at my development process and some snippets of code that I think are pretty nifty. Otherwise, look below for a brief overview of this experience and some lessons learned.

mgtz505 / dev_companion

Dev Dashboard is a React SPA designed to keep you motivated and focused on your coding

Welcome to Dev Dashboard

Dev Dashboard is a productivity application to help developers stay focused while coding. I began building Dev Dashboard after reflecting on which "simple widgets" I used on a regular basis while programming (namely text editors, a reminder/to-do app and a pomodoro timer) and deciding that bundling these applications into a single web-app would make for a great project. It's been great to see my front end development skills evolve over the past several months, and while I know that I'll be making more projects soon, working on Dev Dashboard felt like a great measure of my progress.

How does Dev Dashboard Work?

Dev Dashboard is intended to be a pinned tab in your browser! If you have a multi-monitor set-up, it's a perfect page to keep displayed on an auxillary screen while you're working. All widgets are simultaneously available for your use. Use any widgets that…

View on GitHub

A snapshot of Dev Dashboard

Dev Dashboard is a productivity application to help developers stay focused while coding. I began building Dev Dashboard after reflecting on which "simple widgets" I used on a regular basis while programming (namely text editors, a reminder/to-do app and a pomodoro timer) and deciding that bundling these applications into a single web-app would make for a great project. Dev Dashboard is intended to be a pinned tab in your browser! If you have a multi-monitor set-up, it's a perfect page to keep displayed on an auxiliary screen while you're working. All widgets are simultaneously available for your use. Use any widgets that you think can help you be a more productive developer.

A brief review of my development process

I had a blast building this project. I tinkered with some new technologies, brushed up my experience with testing, and continued to improve my front end development abilities.

Styling

All widgets were effectively treated as independent apps, utilizing CSS modules for styling and state siloed to appropriate components. Simpler widgets, such as the pomodoro timer, served as a useful template for skeletoning out potential layouts for the more complex widgets.

I selected the project's color palette from Coolers.co and additionally added #7b5673, the inverse color of the app's most prevalent background color, #84A98C. Low-fidelity (essentially just containers in greyscale) wireframes were constructed in Figma. I knew that there would be some inevitable scope creep in this project. After all, once the creative juices are flowing on a project you're developing to help make you a more productive programmer, you'll inevitably come up with some new features to integrate. As such, these wireframes were much more useful with helping design my layout rather than guiding styling decisions for any individual components.

Utilized APIs and Additional Node Packages

In addition to requesting data from various APIs, Dev Dashboard additionally relies upon several node packages, namely react-codemirror2 (used in Javascript Scratchpad) and react-calendar (used in the Reminder widget).

I knew from the get-go that I wanted to incorporate GitHub's API in this project. I chose to build a commit tracker as this is the GH page I often find myself checking while working on a more extensive project. Should a user decided that they want to see a given commit's code changes, they can follow the provided link to their commit on GH.

I had previous experience using the NYT API for a prior project NYT Best-Sellers and found it a lot of fun to work with. When I'm taking a work break I'm usually browsing the news, so this was a no-brainer API to integrate into my application. After a user selects a category of news via the dropdown menu, axios calls the API and returns an array of objects, each of which contains 25 stories which are then mapped.

Testing

This was my first experience using unit tests throughout the development of this application. I had experience writing simple unit tests for vanilla JS using mocha, but had yet to to try and implement unit testing in a React application. I initially tried to use Mocha but ran into issues, namely I was unable to use babel to interpret my JSX (a big issue considering what babel is meant for). As such, I pivoted to Jest. Testing with Jest was a great experience. Check out my repo to get a peek!

In Retrospect...

I'm committed to continuing to grow my abilities as a software engineer. Moving forward I want to ensure that I'm reflecting about my experiences as a developer, and importantly, setting realistic and achievable goals for myself.

What did I do well?

Strived to write efficient code (tried to eliminate any code smells, particularly with data not being mapped, not utilizing props, etc)
Frequent and descriptive commits
First major project that didn't utilize a component library; there's certainly a time and place for them, but it was great to hone my CSS further and do all styling from scratch
Learned how to use new APIs and didn't shy away from thoroughly reading the documentation
Happy with my App's file structure / architecture; I believe that I was well organized and methodical with my layout and code structure throughout this project

What Can I do to Improve on future Projects?

Be more willing to fail when developing; I think that using a dev branch or branches for various features I'm developing would be conducive to this
Worry less about styling until the entirety of the app's components have been placed and are functional (MVP)
Perhaps giving CI/CD a try; I could have easily deployed the project's MVP, or even the app when there were only several completed components
In hindsight, I jumped around between components more than I should have; moving forward, I'd probably benefit from defining a component-specific MVP and

How can I continue my Momentum?

Become increasingly comfortable with continuing to use new APIs
Perhaps try using a styling library or new CSS framework such as Tailwind CSS
Learn more about wireframing / prototyping and perhaps try implementing high-fidelity wireframes at some point

Actions for Next Time

Develop on a separate git branch
Try using a CSS framework
Continue using new APIs

Bringing It All Home - Resu.Me

Marcus Gutierrez — Mon, 26 Apr 2021 13:38:16 +0000

Wrapping up our time at GA! It's really incredible how quickly time flies when you've been on the grind. I'll be writing another post to discuss my intensive experience, but I figured that I'd keep with tradition and do another retrospective post following the completion of my final project.

My teammate for this project, Guillermo, and I independently stumbled upon our project idea. I had reached out to ask about his experience using Google Firebase only to find that we had a pretty similar idea for our capstone project - an app that lets users create resumes. We began discussing a roadmap to an MVP that night and quickly selected our stack and began trying to build a proof-of-concept.

Our app consists of a React front-end (featuring some piecemeal use of React-Bootstrap) and a Firebase backend. The secret sauce for this app was the React-pdf node package. After some configuration and plenty of experimentation, we had a pdf dynamically rendering in our window. Construction of the templates for resumes and cover letters was laborious, but pretty straight-forward. If I were to take another pass at this project, I'd really want to see if there were a means by which I could populate this document in a much DRYer approach.

I encourage you to checkout our repo and deployed application to see our code and learn more about how this project came to life!

Marcus-Guillermo / frontend

A Resume and Cover Letter generator utilizing React, Firebase and React-pdf. Additionally features integrated Levels.fyi widgits

What is Resu.Me ?

Resu.Me is intented to be a one-stop resume and cover letter destination for aspiring junior-engineers. Via simple text field input, users can quickly create and download professional and well-formatted .pdf resumes and cover letters. As an added bonus, users can find inspiration on their job hunt through Resu.Me's built-in Levels.fyi integrations.

Resu.Me Rendered Home Page:

Example of a User Generating a Resume:

Example of a User Generating a Cover Letter:

Development Process

Resu.Me was relatively straight-forward to plan. The application was intended to facilitate easy creation of cover letters and resumes by users.

We proposed the following component hierarchy while making a development plan. Our final component hierachy looked different, particularly after integration of the Resume generation functionality. We had originally intended for the two components (resume generation, cover letter generation) to sit on the same page, but quickly saw…

View on GitHub

Trying to Keep Comfy - A React Native 5-Day Trial-by-Fire

Marcus Gutierrez — Tue, 13 Apr 2021 01:53:44 +0000

School is in Session!

To kick off 100 days of code, I chose to dive into learning a new framework- enter React Native.

After having tackled React, RN seemed like a natural stepping stone. As I quickly learned, the similarities between the two were enough to keep me tethered to what I knew about developing React apps while the new components, styling, and dependencies kept me on my toes.

I really tried to broaden my horizons on this project, soliciting user input via SurveyMonkey and using this data to shape my user stories and what ultimately constituted an acceptable MVP. Keeping my end-users' desired specifications in mind was a rewarding, albeit challenging, requirement during my build process.

What's Comfy Classroom?

My repo details the inspiration and approach I chose to pursue for this project. My sister, currently an 8th grade Civics teacher in Chelsea, MA, has told me on numerous occasions that her students' families were hit particularly hard by the COVID-19 pandemic, both in terms of financial hardship and the tragic loss of loved ones. I wanted to develop an application that could assist teachers as their students returned into what was once a familiar and, hopefully, somewhat comfortable environment.

The top portion of Comfy Classroom's homepage consists of two buttons that render informational modals, respectively displaying app instructions and COVID-19 resources for teachers. Below that, a text input field allows teachers to take notes on their students. Notes can pertain to their students' emotional health (i.e. feeling anxious, upset, excited) COVID-19 status (i.e vaccinated, not vaccinated, had an ill parent), their academic status (i.e. struggling with Spanish, excelling in Math) and lastly, a special field where an educator can quickly denote if a student may need extra help.

Comfy Classroom Home Page:

Student Details:

A React Native Retrospective

While RN wasn't a cakewalk, it was more manageable than I had expected. In my opinion, once you have a grasp on state and component-oriented design via experience with React, I think a degree of RN competency is well within reach.

I certainly couldn't have pulled this product off as seamlessly without my use of Native Base. I additionally think that setting up my build environment with Expo.io saved me a lot of trouble compared to use of the RN CLI interface.

It wasn't the comfiest project to tackle in five days, but it certainly taught me how to manage delivering a user-centric product on a tight deadline. I haven't sent the end project to my sister and her colleagues yet, but when I do, I'll be sure to publish a follow-up.

Want to see more? Check out my repo!

mgtz505 / comfy-classroom

Mobile application using ReactNative and NativeBase

Welcome to Comfy Classroom

Project Deployment via Expo.io

Inital Project Proposal

What is this app?

Comfy Classroom is intended to be a moble resource for teachers as their student retrun to the classroom. It has the ability for tecahers to jot down notes about their students (which are then rendered in an easy-to-access scrollable list), refer back to them on an as-needed basis, and additionally flag which students may require additional academic assistance.

Comfy Classroom Home Page:

Example of a Rendered Student Details Page:

Instruction Page:

Resources Page:

Component Overview:

Comfy Classroom's component hierarchy is straight-forward. App.js imports Welcome.js, Headerbar.js and StudentAdd.js, the latter hosting the "meat" of the application. StudentAdd.js was the most demanding to build. I My data (here, a given class' students) is stored as an array of objects. The appropriate indicies are matched using a filter function so that the user selection corresponds with the intended…

View on GitHub

Dabbling with React

Marcus Gutierrez — Mon, 15 Mar 2021 20:54:09 +0000

Ever notice that you can be in a bookstore, myriad books at your fingertips, and you'll still not know what to read next?

I am currently grinding through some introductory React and, when tasked with creating my first portfolio-worthy project, decided to address a pervasive (at least per my bookworm friends) annoyance for those locked-down at home. What should I be reading? My fiancée struggles with this question. Heck, everyone I know struggles with it.

When I came across an API for the New York Times' best-sellers list, I figured that it would be pretty useful to gain experience to honing-in on some of my React weak-points all while working with a third-party API and, perhaps somewhat idealistically, finally figuring out what to read on a Sunday afternoon!

Judging a book by its cover?

My Rendered App!

mgtz505 / nyt_bestsellers

A React Application; Utilizes the NYT Bestsellers API

NYT Best-Sellers (An App built w/ React)

Deployed Application; Give me a try and find a new book for this weekend!

What is this application?

When I find myself wanting to read a new book, I tend to spend more time than I should trying to find which book I want to begin reading. Sometimes it can feel like a huge commitment! I created this application to help users (hopefully) find their next read more quickly than they otherwise would. This app uses the NYT Developer API to render a display of the latest iteration of the NYT's bestseller list for four categories. Once a category has been selected, users can select among 15 rendered book-covers that will populate the display. Once a title has been selected, details about that selection appear below, including links to online-retailers where that title can be purchased.

Main Component (Results render here):

Result Details

…

View on GitHub

The Heroku-deployed first-pass at my app can be found at the link above, or you can head directly to my repo.

I think from the onset I had a pretty clear vision of how I envisioned this app developing. I wanted my components to be simplistic and for my rendered results to be responsive to click events. I used CSS grid to display the results of my API pulls.

Each rendered image tag passes state to the ResultDetails component once a user clicks on a book cover. In the ResultDetails component, details about that selection render.

Writer's Block (of Code)

This wouldn't have been a true project experience if I hadn't gone through some issues along the way. An embarrassing (albeit, probably relatable) number of these mistakes were simple bugs, mostly those pesky misplaced curly brackets and clappers. A more daunting structural issues I had to tackle involved filtering my API data. It was easy enough to make a call to the API and pull a single category of data, say hardcover fiction, but being able to build a component that allowed the user to select the category gave me a little more hassle. I came across an awesome tutorial that walked me through building an AirBnB-inspired drop down menu. After I had properly formatted my URL variations I was able to incorporate them into the dropdown.

What about the second edition?

It's clear to me that there's still work to be done on this application. I think that the UX could use some cleaning-up. The first addition I'd like to tackle for this project would be to incorporate a scroll animation upon a user clicking on one of the rendered book covers. I also think that dynamic stying would be a great addition to my CSS. Currently, a lot of my div containers flow into each other unless the browser is maximized. Hopefully this isn't a one-hit wonder and I can take another pass at this idea once I get some React Native abilities under my belt.