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!
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.
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!
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.
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.
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.
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.
For this MITxPro challenge, we were tasked with making a game that factory produced PacMen. Then we had to make the PacMen bounce off the walls continuously. To challenge myself, I made the PacMen chomp as the moved across the screen. Then I made them face the direction of their movement while chomping.
What I Found Challenging
My program isn’t perfect by far. The chomping toggle doesn’t work perfectly. I wasn’t sure what the best method was to loop through the images, but I was able to make it work pretty well with the `imageChange` function and a `setInterval` function. I will come back to this program and see if I can make it work smoother in the future.
If you have any suggestions or advice to make my program better, I’d love to hear your thoughts. Check out my GitHub Repository for this challenge.
What I Found Challenging
Another issue I came across was including my footer. I saved that section for last and struggled to get it to cooperate. It didn’t want to sit at the bottom of my page and it would act strangely when the screen was resized. After a couple of hours, I decided to make it “disappear” when the screen got to a certain size. This wouldn’t be a permanent fix if my site were a live webpage, but as this isn’t my official Portfolio Website, I’m going to leave it as is.
What I Would Do Differently Next Time
One thing I would change is using Grid instead of Flex Box. Using a Grid makes it easier to rearrange divs and adjust as necessary. I think that would’ve made my footer issue much easier to deal with. Another thing I would do differently is add my footer sooner. I had a blast with this challenge and I’m definitely getting more comfortable with front end development.
I also wrote a callback function that sent directions in steps to my friends house every 1 second using setInterval. This used an anonymous function to iterate through an array and provide the step-by-step instructions. This was a simpler function but I struggled with making it work. I always make my code unnecessarily complicated so Rich helped me simplify it.
const directions = [‘Take a left on South St.’, ‘Go North for 1.5 miles’, ‘Slight right on Bernard Rd.’, ‘Right on Harper St.’, ‘Its the second house on the left’]