All solutions

What are you most proud of, and what would you do differently next time?

I am proud of how I asynchronously fetched an API in React and rendered a component with the data from the API.

What challenges did you encounter, and how did you overcome them?

I had issues displaying the JSON data. I eventually figured out that it was because I did not place the file in the public folder of the project's directory.

What are you most proud of, and what would you do differently next time?

What I learned

Through this challenge, I learned about the following useful practices, tools, techniques, and frameworks for front-end development.

React

This is my first React project. This challenge gave me an opportunity to learn how to use the React JS framework to build webpages. The challenge presented me with enough tasks which propelled me to learn a lot about React features such as Virtual DOM, Components, JSX, Hooks, Updater functions, Props, Event handling, Prop types, and more...

Sass and SCSS

It was also my first time using Sass in a project. I have always preferred having full control over my styling rather than using a CSS framework or library. But I also wanted to make use of certain features that native CSS does not have, which led me to learn about how to make use of a CSS preprocessor instead, through my research I was able to publish this article about CSS preprocessors, and I found Sass to be the best option. I learned about amazing Sass features such as the indentation syntax, @import rule, compiling a Sass file to CSS, @mixin rule, Nestng, @include rule, Variables, Functions, conditional styling with @if and @else rule, and the SCSS block syntax.

Vite

Deciding to build out my solution for this challenge with React required me to learn about how to create a React project with the Vite development server and how to run builds for my project. While learning Vite, I was able to get a very good understanding of Hot Module Replacement (HMR).

Techniques and Code

In this section, I list out a few techniques I am proud that I got to learn about while building out this solution.

• How to create a custom checkbox:

• How to extract a numbers from a string:

function extractNumericValues(AlNmStr) {
  const numericValues = AlNmStr.match(/\d+/g).join("");
  return Number(numericValues);
}

• How to update styles conditionally from a JS variable

Monthly

What challenges did you encounter, and how did you overcome them?

I had a lot of challenges going through the process of building out this solution and the fact that I decided to use React and Sass which I was still relatively new to, to build out this advanced challenge made it a whole lot more challenging.

Challenge

The most challenging aspect of this project for me was how to update the Finishing up section with the values clicked from the previous steps and when the user changes the plan payment time frame.

Solution

I was able to overcome that challenge by setting a common state between all the steps, which re-renders the components once a change is made to that state.

What are you most proud of, and what would you do differently next time?

I am most proud of being able to implement the seemingly complicated-looking dropdown menu

What challenges did you encounter, and how did you overcome them?

I had challenges with how to switch the layout in the nav menu from mobile to desktop view without having to duplicate the code. However, I was successfully able to accomplish that with careful alignment with Flexbox.

What specific areas of your project would you like help with?

I was successfully able to complete the requirements for the project on my own, but I am very open to improvement and feedback.

What are you most proud of, and what would you do differently next time?

I am most proud of successfully implementing the links storage within the browser's local storage. I would write more modularized code next time for easy maintainability

What challenges did you encounter, and how did you overcome them?

I found it quite challenging with the choice of APIs I were using as I kept encountering CORS errors, but I eventually used a link shortener API from the RapidAPI Hub and that did the trick

What specific areas of your project would you like help with?

I am okay with my project and I believe I completed every one of the criteria successfully. If you happen to find any errors with my implementation though, I would be glad to receive feedback to better myself.

What are you most proud of, and what would you do differently next time?

I learned how to create an items carting feature, which updates the cart according to how many items were carted. First time doing that, so I was excited as I was able to figure that out.

What challenges did you encounter, and how did you overcome them?

I had issues with how to clone an existing element in the dom, into another element, and display the output for the lightbox. I was eventually able to solve that by learning more about cloning elements in JavaScript.

What specific areas of your project would you like help with?

I would simply just like honest and constructive feedback on my work overall.