DEV Community: Jason

The Capstone.. The Final Project

Jason — Tue, 27 Sep 2022 13:54:13 +0000

Four months ago I embarked on a journey. I endeavored to leave my cozy comfy career and forge a new path. This path would be fraught with challenges and uncertainty but also with the promise of an exciting new career. I'm speaking of course (rather dramatically) about my decision to take the DigitalCrafts 16-week web developer program. Now that that 16 weeks has come to a close, I find myself at a bittersweet end. I will miss my daily routine of learning and collaborating with my cohort but I feel ready to begin the next chapter; to continue my journey and learn and grow in a new career. The end is the beginning as they say.

Like many higher learning programs, the culmination of all my hard work and effort would be a final project, the capstone. The capstone is the showcase for the knowledge and technical skill that I have acquired throughout this course. The expectations were high so this challenge would not be met lightly. Thankfully I was not alone. I would have the help of Rahmin Shoukoohi(LinkedIn) and Ethan Gula(LinkedIn).

Unfortunately, due to circumstances out of our control, I was not able to be a part of the planning phase for the concept of the project. This wasn't a total loss for me however, since Rahmin and Ethan both did an amazing job of conceptualizing a road map for the project. They wanted to make a fitness focused website to help beginners find new exercises, plan routines, engage fitness instructors, and track their progress. They named the project Gainzzz. I joined the project not long after it began but they had already done a considerable amount of ground work in a short time. I immediately got up to speed and started to find my role in group. Rahmin was mostly focused on the database functionality and Ethan was in charge of design. I found myself somewhere in the middle, bridging the gap and taking on tasks as they came.

As we worked our way through the project, a rather large challenge presented itself. After reviewing our progress, our instructor decided he wanted us to have all of the database functions on a server side deployment. This is normal practice however it did not exactly fit the structure we chose for the project. We were using Supabase database and it is, by design, meant to be used mainly on the client side. But rather than scrap our progress, we saw it as an opportunity to show we could adapt and overcome this challenge with skill and creativity. I took up the mantle for creating a server and moving the database functions to the backend. Supabase is a terrific tool and has great built in functions but they mostly operate through reading and manipulating JWTs in local storage. By moving these functions to the backend, it became necessary to do all of this manually, even going so far as to rewrite the built in functions as fetch requests on the backend. This was a terrific opportunity to look under the hood of Supabase and see how all the built in functions really work.

After restructuring the project and creating a backend with database routes and functions, I was free to help fill in the gaps more on the frontend. Ethan and Rahmin had done quite a bit of work on creating pages and setting up a user story flow that made the project really come to life. My new task was to add functionality to the pages and implement functions to utilize the work I had done on the backend. As the project became more refined we worked in tandem, taking on individual tasks but leaning on each other to solve problems as they presented themselves. Working with these guys was truly a pleasure.

We have come to the end of our time to work on the project and like any project, there were ideas and stretch goals that we just didn't have time to implement. Ultimately, I am proud of the work we did. The site is polished, modern, and functional. I think ,given more time, there is plenty more functionality that we could add to it like nutrition guides and smart device integration. I'd like to continue to work and refine it in the coming weeks as I look for the next step in my career. Here's a link to the demo. If you'd like to see more you can check out the repo here.

My First React Project, A Love Letter to NASA

Jason — Fri, 02 Sep 2022 18:59:24 +0000

As a curious, science-loving kid growing up near Houston, space was everything. Every month or so my parents would take me to the Johnson Space Center and I would marvel at the rocket they had on display. I couldn't believe something so huge had actually left Earth. It made impossible things seem possible. Now as an adult, I try to foster that same appreciation for space exploration in my daughter. So my first React project seemed like a good opportunity to create something fun and educational about my favorite subject, space. I present NASA Watch.

Lucky for me, I'm not the only space nerd in the world and the science community is built on sharing, so I had a fair amount of options for APIs I could use to bring information into my site. The NASA API was my starting point since they actually have several sub-APIs for different projects and divisions. I wanted my site to draw in the user so I went with the more visual parts and chose to use the NASA Images and Astronomy Picture of the Day APIs. I also wanted to use photos from the new James Webb Telescope and luckily there was an API for that as well. I thought perhaps a news aspect would give the project some meat I found a news aggregate API. If you've ever worked with open-source APIs you know, four APIs was plenty.

Next I needed to decide on a design. I was recently admiring the simple effectiveness of the Discord signup page so I started with that as inspiration for my homepage and navbar design. I also enjoy LinkedIn's three column layout so I used that as inspiration for the photo and news pages. For mobile responsiveness I needed a solution to consolidating a three column layout into a single column. I didn't want to give any one feed importance over the others so I went with a tabbed function to allow the user to select which column to display individually. I also added a search function to the NASA Images column.

Working with React was actually much easier than most of the projects I had done previously. With a project of this size it made it much easier to organize separate functions, components, and css into different files. Redux made it easy to deliver the data without endless prop drilling. I chose to do the css from scratch rather than use a framework or bootstrap. I prefer to know how all the pieces come together and how they are made so that making little adjustments is easier later on.

The biggest challenge of this project was the creative aspect. Formulating an idea and a design myself is much more of a task than being given a goal and working towards it. But I also enjoy the freedom to let a project evolve in any direction I see fit. The best way to overcome a creative block is to make something you enjoy, hence the space theme. Another challenge was the time constraint. I had roughly a week to bring the project from conception to a finished product. Prioritizing essential vs non-essential functions was key.

With more time I would like to add some more functionality and customization. I plan to deploy this project in the near future but in the meantime feel free to check out the repo here

My First Full Stack Project... With a Partner!

Jason — Fri, 05 Aug 2022 16:16:00 +0000

It's been about ten weeks since I stepped through the (virtual) door at DigitalCrafts and began an undertaking I can only describe as a unique learning adventure. Every new brick in the foundation of my knowledge had been building to something I couldn't quite see yet. And then... full stack. Our first full stack project was simple. In one week, create an interactive website that utilizes a database of our own making. It must utilize the four basic functions of programming (create, read, update, delete or CRUD for short); it must be secured using sessions and encrypted passwords; it must have multiple tables with at least one join table; and we must use node.js, express, a template engine, and sequelize. Bonus, I get to work with a partner! Easy right? Well ok, so it was a pretty big project for a fledgling developer that didn't know a thing about databases until last week.

Luckily, I had the good fortune of working with Andrea Tran (DEV.to, GitHub). Andrea has vision and when she decides something should work a certain way, she is unrelenting. She will work tirelessly day and night on a single aspect of a project until she is satisfied.. and her standards are high.

Day one, Andrea and I began to plan our project. We had lots of ideas but ultimately decided that a project board type website, like Trello, would give us plenty of room to explore multiple aspects of database manipulation. As a tribute to our knowledgeable and VERY patient instructor Joe Frasier, we decided to call the project "Trelljoe". Andrea graciously agreed to design the frontend as well as take the lead as project manager, and I would be in charge of creating the backend database and server. We had a list of things the site absolutely must have: user accounts, project boards, tasks with progress designations, and a guest session so people could try it without the tedium of creating an account. We also had a long list of things that would be nice to have, ranging from styling to functionality, if there was time. We were up against the clock after all.

With the broad strokes decided we began to cobble together the larger pieces of the project. I worked on getting an accessible database, with tables and seed data, as well as a functioning server with the basic CRUD routes for each table, while Andrea worked on the design, function, and user stories. As project manager, she also communicated what tasks would be a priority to allow us both to do our respective parts in tandem. As the project took shape, the tasks before us became more specific and we made use of the project management website Trello. Oh the irony. Every morning we would have stand up with our classmates, where Andrea would give an update on our progress, the agenda for the day, and any blockers we expected to encounter. After a few days, and a few freak outs, we had a mostly functional website. I began testing and fixing bugs, while Andrea decided what features from our wish list we had time to implement. When the time was right, Andrea made the decision that we were ready to deploy a staging version of our website to Heroku. We continued work right up until the deadline, analyzing and tweaking every aspect to make the project the best it could be.

This project was a lot of fun to work on. There were moments that were less fun, like when we tried to implement a new feature that broke everything and we had no idea why. But the experience was in the journey. I personally learned many valuable (and hard) lessons about version control. I found backend creation and management to be a bit trickier than frontend due to the lack of obvious feedback. If given more time, Andrea and I would make this the feature rich site that we know it could be. We're definitely proud of the the work we did. We have both discussed continuing to work on it just for good practice, and to have something nice on our portfolio of course. You can take a look at our site at Heroku and checkout the repo at GitHub.

My First Front End API Project

Jason — Fri, 15 Jul 2022 15:48:55 +0000

A week ago I couldn't tell you the first thing about using an API. I had a vague idea about what an API was but no real grasp on the power they contain. As a student in the DigitalCrafts web developer program I was tasked with creating a functional and interactive website using one or more APIs. The rest was up to me. Being the big nerd that I am, I knew I wanted to make something related to comic books. I decided that since more people care about the blockbuster Marvel and DC movies than the comic books themselves, I could help bridge that gap and, hopefully, convert a few to comic book readers. The app I created allows users to search for any comic book character and discover more information related to that character with an emphasis on movie appearances.

The first major hurdle of this project was to find one or more publicly available APIs that would help me achieve my goal. There are a lot of public APIs out there with varying degrees of ease and usefulness. I tried out more APIs than I would have liked. Some were difficult to navigate. Some were difficult to setup. Some had little to no documentation. Some had tiny API request limits. Some just didn't have the information I needed. Finally, I decided to use the APIs from ComicVine and TheMovieDB.

The next task was to read through all the API documentation and familiarize myself with how to use them. This was somewhat difficult with the ComicVine API. Their documentation is not all that thorough and not updated often. I relied heavily on forum posts and Google searches to find what I needed. The TMDB API documentation has much more detail and scope. The only downside was the testing feature on the developer website did not work. But both were completely free with basically no request limits so a huge thanks to both.

Designing the site took a lot of trial and error. I coded all the HTML and CSS myself for the most part rather than using a bootstrap type approach. I definitely relied on examples from around the web. I wanted something that had a relatively modern feel and allowed the user to find what they want quickly with as little clutter as possible. I enjoy minimalist web pages that put the content front and center so this was a major goal for my app. The final road block in the design was making everything mobile responsive.

Though this project was frustrating at times it was a great experience. I think learning how to use APIs was valuable but the bigger take away for me was learning how to prioritize what to work on next, how to test things quickly to see if it works for the project, and when to move on from something when it's not working. There were several features I wasn't able to implement in the time I had and design choices I had to make that weren't exactly the aesthetic I wanted but overall I am satisfied with the final result. I would like to continue to work on this project and make it more feature rich in the future.

You can check out this project on my GitHub Repository.

My First Python Project was an RPG

Jason — Thu, 16 Jun 2022 18:12:11 +0000

My first actual project assignment in Python, or in any coding language for that matter, was to create a text-based RPG that could be played from the terminal. Exciting, right? What gamer doesn't love the thrill of reading dialog and exposition in lovely green on black? The exhilaration of single digit move choices? Seriously though, this was a lot of fun to work on. It gave me an opportunity to be a little creative while diving into some light game logic. Most importantly it showed me the reality of the trial and error (and error and error) process of coding. Overall, I'm satisfied with how it turned out and can't wait for the next one.

The concept of the game centers around a 'Mythical Hospital'. The player is a new doctor that is volunteering at a hospital for mythical creatures, in the hopes that they can earn enough money to pay off their student loan. The player creates their character and starts with a hefty debt. The doctor then begins to treat their 'patients'. Each mythical creature has an ailment and three options for treatment. The correct treatment is randomly assigned so it can be different every time they play it (assuming they would ever want to play it again). If the doctor guesses the correct treatment then the mythical creature gives them some money to pay off part of their student loan. If the doctor guesses the wrong treatment, they are given a second chance, and if they are wrong again the mythical creature gets upset and the doctor meets their demise and the game is over. If the doctor earns enough money to pay off their entire student loan then the player wins and the game is over.

The biggest challenge I had in creating this game was making sure that the game progressed from one function to the next and that all the variables carried over as they should. It was easy to get lost in loops or call a function out of order, especially when I was creating the replay option. I used a class to create all the creatures which gave each creature money, an ailment, treatment options, a dialog for the player winning, a dialog for the player losing, and later I added some ASCII art. I learned how to add all the class instances to a list to make it easier to display all the options and reference them from the player's input. This was also helpful in accomplishing my goal of not letting the player treat the same creature more than once. Once the player used that option, I simply removed it from the list. This created a challenge later because I had to figure out how to add these creatures back to the list if the player chose to play again.

I had a great time working on this project. It was satisfying to have an idea and then will it into existence with logic. The fact that it was a game also added an extra element of fun. Coming up with the creative content was a nice break from the logic stuff when my brain started hurting. I'd like to keep adding features and new content when I'm not working on other things.

You can check out the game at my github repository.