Happy Holidays!

It has been a busy few weeks at my house with Thanksgiving and traveling to Virginia to be with family. I haven’t posted in a while and a lot has been happening in my coding journey.

Before Thanksgiving Break, I did a quick TypeScript course on Codecademy, which helped me better understand how TypeScript complies JavaScript and ensures an added level of safety to projects. I took a break to spend some time with family and play as much Pokemon Aucer as I possibly could.

As many new (and old) developers can attest to, the tech world took a big dive and some companies have begun laying off thousands of workers. This makes the job search significantly more difficult and has been heavy on my mind. I have applied for many, many, many jobs and I’m becoming burned out on the job hunt process.

In between applying for jobs, spending time with my family, and playing video games, I began learning about React Native. React Native is a software framework used to develop applications for mobile devices. It uses the same JavaScript most frontend developers are familiar with to build Native apps.

I am currently through the first module of the Codecademy’s React Native course. I was tasked with building a simple create account form for a dog social media app using <Text><TextInput><View>, and <ScrollView>. I elaborated on several aspects for this project, such as adding a header with an icon, adding a dropdown for breeds, and styling the page to my liking. It was an enjoyable experience and I am looking forward to learning more applicable skills in this course.

This course is an intermediate level course and has very little added support, like some of the other courses Codecademy offers. The modules have no solution files or videos, which challenges me to use my existing skills and experience with JavaScript and React. If you would like to see my code for this project, you can visit my repository on GitHub.

Back to Codecademy with Redux Practice

Now that I’ve completed the MITxPRO Coding Bootcamp, I’m going back to Codecademy to bolster some gaps in my knowledge. Currently, I am learning about Redux and how to manage state and actions using this JavaScript library.

For my first assignment, I was tasked with building a Redux reducer function for a Wagon Train game. I had to add an initial state with suppliesdistance, and days. Then, I had to add actions such as gathertravel, and tippedWagon. As a bonus, I added the property of cash, then added the actions of sellbuy, and theft. Check out the repository here.

I’m excited get back to learning new things after working on my capstone for several weeks. Redux is an extremely popular library so it’ll be a great skill to develop.

It’s Finished!

After many months and many long days, my capstone for the MITxPro Coding Bootcamp is finally finished!

I used my frontend Bad Bank website and added a backend and database to it. Specifically, I created the backend using ExpressJS and NodeJS, and incorporated a MongoDB database. I deployed my frontend and backend on Heroku and my database as a serverless MongoDB instance on Mongo Atlas. This sounds so much easier than it felt at the time!

For the backend, the ExpressJS web framework worked great and I used NodeJS to build my APIs. I used POST to create accounts by sending information through the body. Rich explained that using a POST request would also make querying for users safer, so I used that to return user information as well. When updating information I used the HTTP PUT verb and for getting all accounts, I used the GET verb.

To help abstract the data from the logic, I wrote functions for the Data Access Layer, or DAL. This was by far the most difficult part. I used MongoClient to connect to my MongoDB serverless instance where my database was deployed. I had several connection issues, but finally figured out that Heroku needed the MongoDB environmental variables to facilitate the connection. This made it so that I only had to call the process.env when making the connection to the database URL. The next issue I faced was that the database return took longer than the API calls and this was interfering with my results. I had to make the DAL function async and await each and every part of the connection. This took a really long time to figure out and I ran out of time to add extra authentication and roles to the database like I wanted.

My first full stack application is now complete! Its a fully deployed and functional website which you can check out here! I had a great time making this application and I look forward to improving it in the future.

You can check out my GitHub repository for the code that created this beautiful application.

Firebase Practice

This week, MITxPro introduced us to serverless services with Firebase. This platform was developed by Google and provides developers the ability to create mobile and web applications with services. It gives developers tools that they often would have to build themselves like fire storage, databases, authentication, and many more.

For example, in today’s challenge, I was tasked to add Google Authentication to a login form. The template code was provided for me but I had to add a popup that provided the user an option to create and account and login using their Google account. If you’ve ever set up authentication for an application, you know how difficult this task can be.

Well, Firebase made this so easy! I had to troubleshoot a few things and learned a bunch about how to work with Firebase’s interface. Once I got it set up, it worked like a charm.

I really enjoyed this activity and I look forward to using Firebase in the future. If you would like to see my code, visit my GitHub repository here!

Numbers App

## What It Is

This is a Codecademy project in which I used React, Bootstrap, and a couple of APIs to create an app that provides the user with math facts, trivia, and practice. The purpose of the project was to utilize APIs and provide the user with ‘messages’.

## How It Works

When the app is opened, the user is provided a welcome message and three options: Math Facts, Math Trivia, and Math Practice. The user can select one of the paths, which redirects them using Routing to a new page.

For Math Facts, the user can choose to input a number or select `Random`. They will be provided a ‘fact’ about that number using the Numbers API.

For Math Trivia, the user selects `Generate` and is given a trivia question about a random, unknown number. The user can input a guess as to what the number is, select `Submit`, and then select `Result` to check their answer. If needed, they are provided a calculator which is hidden unless the user selects `Show Calculator`. Depending on the result, the user will receive a message letting them know whether they were correct or incorrect in their guess. This also uses the Numbers API.

Lastly, the Math Practice page utilizes the xMath API to generate addition, subtraction, multiplication, or division questions. The calculator component is provided on this page as well. The user can input a number, click `Submit`, then check if their answer is correct using the `Result` button. They will be given a message stating if they got the answer correct or incorrect. Unfortunately, this API was not functioning the last time I checked, so I may need to remove this page if it isn’t fixed.

## What I Found Difficult

The most difficult part of this build was refactoring the code. I didn’t want the API calls to be made directly from the components, so I had to create a util folder and create individual files for each API. Once this was done, the code worked great.

## What I Would Improve

I would really love to add more pages and activities to this app. I could include a page that has math videos directly pulled from the YouTube API. I could add links to other Math learning resources or embed games into the app itself.

Check out my GitHub Repository for this App. You can pull it and see if you can improve my code or add some fun pages. Let me know what you think in the comments.

Bad Bank Application

I am currently working on a Bad Bank Front End Application for the MITxPro coding bootcamp. I built it using Create-React-App and Reactstrap. This project is the second portfolio project for this bootcamp and will be the basis for our capstone project at the end of the cohort.

Building this app has been challenging, but I’ve really enjoyed it thus far. I struggled with making the Routing work, but eventually figured it out on my third build. I wanted to use Reactstrap instead of the course-suggested Bootstrap because it is friendly for building React applications. This also took me until the third project to “master.”

I’m still in the process of finishing up some rubric specification and I need to figure out how to host my site using AWS. That will be my task for this week.

I like the way my app looks and its responsive, but there are some small issues with it. For one, I used useContext to establish a global user variable but I’m not using it in the best way. I also wanted to make the Deposit and Withdraw options unavailable until the user is signed in, but I haven’t figured out how to re-render the NavBar once the user account is created so that the dropdown options can be enabled.

If you want to see the current state of my Bad Bank App, check out my GitHub Repository for the project or my AWS S3 bucket to see the progress on the live site. See you around!

ATM Machine App

This week we are focusing on React and simple components. We were tasked with creating a ATM machine app. The user is able to deposit money or take out a “cash” withdrawal. The app keeps track of the account balance and utilizes a drop-down menu that allows the user to choose “Deposit” or “Cash Back.” The submit button is disabled until the user puts in a valid value.

For our next portfolio project, we are building a Bad Bank that uses React to manage several pages. I’m a little intimidated by this project because React and JSX are still challenging to me. I’m looking forward to using what I learned during this project to prepare for the Bad Bank App. I’ve found some MITxPro alumni projects on YouTube and plan on watching those to prepare.

Check out my GitHub repository for this project.

To Do List App

Hi, Friends! It’s been a while. I spent a few weeks traveling with the family and had a Break Week from MITxPro. I continued to work on my Full Stack Codecademy Path during the break, but I didn’t add any new projects to my GitHub since my portfolio.

We are currently learning React in both my MITxPro Bootcamp and Codecademy. This has taken up most of my time as React can be challenging to learn. Here is my first React App: A To Do List.

It’s a simple app with just a few bells and whistles. The goal was to learn the basics of building a React app, styling it, and refactoring the code. I struggled with this longer than I would like to admit. If this were a functional app, I would add a DatePicker instead of a dropdown menu, a place to add notes, and an option to include attachments.

Screenshot of the To Do List App

Check out my GitHub Repository and let me know what you think.

MITxPro Portfolio Website

Part 1 of my coding bootcamp ended with a portfolio project where we had to create a functional website. I hosted my website on GitHub and you can check it out here!

I’m glad I had a chance to create a portfolio website for my Codecademy course, because this prepared me for this current project. I already had a good idea of what the challenging parts would be and how I wanted my website to look and work.

In the previous project, I used FlexBox which was great, but made it difficult to position elements. For this project, I used Grid and this allowed me more movement and placement. Later, I learned that Bootstrap has a great Grid format and I plan on using that in the future.

I was able to manipulate the look of the website with CSS with more control the second time as I had a much better understanding of the scope and attributes. I included some JS elements as well, such as making my icons blink and making my PacMan chomp.

This was a wonderful experience and I look forward to learning more about the backend in the future.

Here is my GitHub repository for this portfolio website!

Real Time Boston Bus Tracker

What Does It Do?

This program identifies the locations of every bus in Boston using the Massachusetts Bay Transportation Authority website and uses markers to identify them on a Boston map. Every 15 seconds, the program updates the location of each bus by pulling the longitude and latitude from the MBTA data.

Originally, the program only identified the location of one point on the map with a given longitude and latitude. I updated this program to pull data from the MBTA website to provide real-time locations of their city bus locations.

Try It Out!

Load the index.html file in your browser. Every 15 seconds, the markers will update based on the current location of MBTA buses.

What I Could Improve

This program would be even better if the map could predict the next stop for each bus along with tracking the data. The MBTA provides the schedules for the busses and this change would make the map more useful for a traveler in Boston.

Check out this repository and try it out!