Week 5 of Immersive Full Stack MERN Bootcamp Learning
I am studying with @UCBerkeleyExt, in this article I cover my fifth 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 fifth 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 5: Node.js & Object-Oriented Programming (OOP)
In Class Mini Challenge - Portfolio Generator
ā View Repository ā | ā View Live Site ā
This mini project challenge introduced us to Node.JS and how to create applications to function on our local devices. We begin by incorporating inquirer and fs. Inquirer allows for command line interface. For this project itās used for prompts to ask the user questions about themselves. FS stands for file system. Which allows for file management and manipulation. For this application the user inputs information and it builds an HTML document with all the specifics from the user.
Module 9 HW Challenge - Professional README Generator
ā View Repository ā | ā View Example File ā
This project required a lot of similar aspects as the portfolio generator. Check out the example file above that was generated from the program I wrote!
Inquirer is an NPM. It's an embeddable and easy to use command line interface for Node.JS. For this project I used it to easily implement the ability to ask question, parse the input and validate answers.
FS is imported module through Node.JS. The module enables the interaction of files within the affected JavaScript files. It allows for operations like synchronous, callback, and promise-based forms. Most specifically for this I needed to use the Promise execute the resolve and reject process for writing the README.md file.
Template literals encompass all the information plus what was generated through the inquirer prompts. Personally I've loved template literals since they were introduced. This project really illustrated the need and versatility of using them to make all of the content to go in the README file.
For this project the starter code had the work occurring in two files, because of this I needed to be able to export the content created in the generateMarkdown to the index file to then write the document. This allows for the separation of JavaScript files and being able to contain one or certain actions to a specific file.
In Class Mini Challenge - Todo List Generator
ā View Repository ā | ā View Example Site ā
Oop! Oh boyā¦ so getting into Object-Oriented Programming was a struggle. This was something I had never encountered prior to enrolling in this course. OOP is a computer programming model that organizes software design around data, or objects, rather than functions and logic. This challenge was one of our first steps into breaking our JavaScript code down into separate components to handle different tasks. The main aspects that needed to be broken out were the Header, TaskList, and TaskListItems. All of this on top of the lessons from the previous work this week, which was having the user answer prompts to then create a file with that information displaying in an .html file.
From my experience so far I mostly see folks going towards using frameworks like Vue, React, or Angular to handle components and modulations. I still have plenty to learn about OOP and its various implementations.
Module 10 HW Challenge - SVG Logo Maker
ā View Repository ā | ā View Example File ā
This project required us to incorporate everything we learned this week and go in another direction of generating an SVG file.
For this project I learned about scalable vector graphics and how to generate them through class objects. Through the SVG element each basic shape needed to have a element of either circle, rectangle or polygon. From there it was about defining their characteristics to set the size, dimensions, and color (via fill). Through SVG there's also the ability to set the text to display as well, with it's own parameters. Template literals were used to pass through the colors and the text.
For this project we also had to implement a test protocol. We used jest in this case. Jest is an NPM for testing. I used this to test my shape modules. It takes some time to figure out the syntax, while allowing the ability to test modules individually to check their ability.
Through our OOP classes we learned about Classes. These were essential to building this project. For the shapes I started with a parent shape that I could then pass the properties down to each type of shape.
Of course also utilizing inquirer and fs like in the previous projects. I also used an NPM called Chalk to make my intro and outro text more colorful.
And all of that was in one week?? YUP! And the following week it gets even more intense. Stay tuned!
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!