Week 4 of Immersive Full Stack MERN Bootcamp Learning
I am studying with @UCBerkeleyExt, in this article I cover my fourth week of projects and process of learning full stack MERN
I recently finished my Full Stack bootcamp with UC Berkeley. It is an intensive full time program that lasts for three months.
🤓 Greetings travelers! I wanted to give a break down of all of the projects I created and everything I learned in the fourth week of my bootcamp. In this article I will break down the learning process through each project.
You can subscribe without signing up for a substack account! Just select “None” when subscribing. All the content from my learning journey is free.
Learning Full Stack MERN with UC Berkeley
Each week in this program we were required to turn in two graded homework challenges. At the end of each month we had a graded group project.
Outside of that we had several in-class coding activities each day and every 3-4 days we would have an in-class mini project that was often just as challenging as any graded work we had to turn in.
Details of what technologies were used and further break down of the challenges and projects displayed can be found by visiting the repository associated with it.
Week 4: Project 1
GROUP PROJECT TIME!! Which means we took a break from our lessons and homeworks to put together everything we had learned so far to create a fully functional application.
Qif - A Quote and Giphy Generator
→ View Repository ← | → View Live Site ←
For our first group project we were randomly placed into a group. From my understanding they try to pair up the groups so that there is a good mix of skills and knowledge.
I was pretty nervous heading into it as we had to build everything from scratch and it wasn’t necessarily clear guidance of “it must look like this and function like this”. We had to come up with our own idea of an application and then create it.
From my perspective, I wanted to keep it as simple as possible and to meet minimum requirements to make sure we did have a fully functional project by the end of it.
With that in mind, we really began our research by finding some of the most simple APIs to work with since one of our requirements was working with both third-party and server-side APIs. This led us to finding a Quote API and the Giphy API.
From there we came up with the concept of, why don’t we randomly generate a quote and a gif image based off the word the user selects?
In terms of layout I roughly based it off the Weather dashboard app we had just created the week prior. However, we needed to update the UI to function off of Tailwind instead of Bootstrap (since we had to try a new third-party API we had never used before).
Thankfully we were able to meet our requirements and have a relatively decent looking application before having to present in front of the whole class.
Fear of Failure
So what’s this about being worried I’m going to fail? Well… that definitely was a driving factor in how I applied myself to this project. To some extent it didn’t benefit me either. I ended up doing too much at times when I needed to allow more space for my teammates to contribute to the project. The fear would drive me to completely hammer out an aspect of code instead of considering that it’s something we could have all worked through together. Because of that it actually led to us having a disparity in GitHub commits and we actually had points taken off of our grade because of it. It was a lesson learned that I took into the remainder of my time through this course.
Today as I began thinking about this project and wanted to “fix it up” some of the fear hit me again. What if I forgot everything I’ve learned? What if I can’t find a solution to that bug that started occurring with the API recently?
This past week I had an interview, so I spent majority of my week studying and code drilling and preparing for that. So after the interview I told myself I need to let all of that go and dive back into this project. Of course… as I began dismantling things it would hit me again and again.
Just Start Somewhere
I forked the original repo. Cloned it down to my device. Now what?
OK. So one of the issues I had noticed was that the API for the quotes had stopped working. So that was a place that I could start.
I began researching alternatives and I quickly found https://docs.quotable.io/. It had a lot of the same functionality and concepts of the previous API. So I… READ THE DOCUMENTATION!
I don’t think that I am in any way unique when it comes to the aversion of reading documentation. This compiled with being exhausted from a new workout routine this week, exerting myself preparing for the interview I had, and the migraine I had developed over night. BUT, I stuck with it. I read.
I determined the URL I needed to substitute in would be https://api.quotable.io/quotes?tags=${wordValue}
Using that URL, and having my JSON viewer plugin on Google Chrome activated, I put the URL into my browser and put in a word I thought may work, “Happiness”.
Immediately I received a couple hits. Then I began to traverse down into the data to determine what I needed to publish the content into my UI.
As you can see, it was something like results[0].content and results[0].author.
YAY! It worked… but I didn’t want to pull the same initial quote every single time. So I needed to have it randomly select a quote based off the word the user chose.
// Generate a random index to select a quote from the results
const randomIndex = Math.floor(Math.random() * displayQuote.results.length);
const randomQuote = displayQuote.results[randomIndex];
generatedQuote.innerHTML =
`
<div class=" bg-blue-500 drop-shadow-lg p-5 text-white">
<p class="p-3" id="quoteContent">${randomQuote.content}</p>
<p class="p-3" id="quoteAuthor">${randomQuote.author}</p>
`From this point on, if there was more than one quote to select from, then it would randomly pull one of those quotes (matching the vibe of what the GIPHY image was already doing).
I quickly found that some the terms I had used (and hand programmed into my HTML) were not working. So then I had to find WHICH tags would work for this API.
At first, I began the arduous process of typing out each new tag word (which was a lot more than the previous API I had used). Then I thought to myself… you know, I’m pretty sure I’ve found a way to pull in data and have it automatically generate the list I would need before. So why not do that for this?
I did consult with my friend to see how to best accomplish this and then I tweaked it to my needs.
// Pre-populate drop down list function
document.addEventListener("DOMContentLoaded", function() {
// Fetch data from the API
fetch("https://api.quotable.io/tags")
.then(response => response.json())
.then(data => {
// Get the select element
// Iterate through the tags and populate the dropdown
data.forEach(tag => {
const option = document.createElement("option");
option.value = tag.name;
option.text = tag.name;
chooseWord.appendChild(option);
});
})
.catch(error => {
console.error("Error fetching tags:", error);
});
});At first I was getting an [object Object] returned and I knew that’s because I needed to traverse down to where the Name was. So the value and text were then updated to be tag.name.
I ran all the tests I could think of to make sure things were working as I wanted them to be. This is when I noticed I was getting an undefined in my console logs when the user was not placing a name in the form.
Previously I had built the GIPHY search to look for an image based off the user input name and the word term selected. I simply added them together into a string to then query the GIPHY API with the combined text.
Thinking on this I didn’t wanted the word “undefined” to be part of that search. So I wanted it to ignore that term if the field was left blank. I added a simple IF statement to accomplish this.
function giphyGenerator(wordValue, nameValue) {
var searchTerm = "";
if (nameValue !== undefined) {
searchTerm = wordValue + " " + nameValue;
} else {
searchTerm = wordValue;
}
...PLEASE IGNORE THE FACT THAT I’M USING var!
At this point in the course they had not taught us const and let and even though I knew those terms from my previous studies, there was the possibility that they would flag our homework and projects because they may think we’re using AI or stealing code to do our work. I didn’t want to have to explain each time, so I just used var until they went over const and let.
Anyways, I was pretty happy with myself that I figured out that silly little thing and really felt like I could reflect on how far I’ve come since that first month in bootcamp.
So, am I still fearful?
Yes. It’s like every time I go to do a code drill, I worry I’ll never be able to figure it out. And then I do, and I feel great! Until I see the next code drill.
So yes, fearful but also my confidence is growing every day. Trying to embrace constantly that I may not know a thing, but it doesn’t mean I can’t figure it out.
Thanks for reading. 💜
What did you think? Leave me a comment and share!
I wanted to begin cataloging this learning process, to hopefully give folks insight into not only my learning journey, but also what it’s like to take a full time bootcamp like this. I’d love to hear from you if you enjoyed this article!