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!

Portfolio Website Challenge

Codecademy Challenge: Build a Portfolio Website.

Background Image of Portfolio Website

What I Built

For this challenge, I had to build a Portfolio Website that showcased some of my previous projects. I created a home page with a nav bar, three featured projects, links to my LinkedIn, GitHub, and email, and an additional About Me page. In the nav bar, I included my resume and a link to my blog. My goal was to combine my current skills in HTML, CSS, and Javascript and create a responsive website.

What I Found Challenging

The HTML portion of this assignment was a breeze. Most of the CSS was not very difficult either. What I struggled with was incorporating Javascript. It’s easier to create CSS elements than to use Javascript. For example, my social media icons “shake” when the user hovers over them. This could be done with Javascript, but CSS makes it much easier. Instead, I used a `click` element and a `setTimeout()` function to make my project divs disappear for a couple of seconds after being clicked on.

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.

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