Description:

Users can search for products from 4 categories. They can sort and filter products by price or category, and add items to cart. The checkout includes a billing form and an order summary.

Motivation:

The primary motive was to try out and learn both Redux and Material-UI. I also thought an e-commerce project would be an interesting and educational undertaking in general.

Challenges:

Getting accustomed to Redux workflow was rather intimidating at first. It was difficult to wrap my head around all the boilerplate code necessary to even begin doing something. I chose to deep-dive into the Redux official documentation to get a better understanding, and eventually it started to make more sense.

I had never worked with a UI framework before either, and it felt strange not having to build everything from scratch. I learned that the best way to understand the Material-UI ecosystem better was just to implement components in my project and try to customize them.

Description:

Users can search for recipes from a wide array of food categories. Detailed information about each particular recipe with ingredients, instructions, images, videos, articles is included.

Motivation:

I desired to practice TypeScript and get more familiar with Redux. I chose to build a recipe app because I discovered TheMealDB API that had a lot of interesting data available.

Challenges:

Biggest hurdle was in the beginning with all the setup, and getting used to writing everything in TypeScript (TS). I got constantly screamed at by long-winded TS errors, which was rather intimidating at first. For educational purposes, I tried to steer away from using any types to ease out of trouble.

I realized that just calmly reading the error messages was the best solution to the situation, and TS did start to grow on me as I got more used to thinking on that level. I know more practice is needed for me to be fully comfortable with TS, but I am glad I chose to take the first step.

Description:

Users can generate their own custom quiz and then play it. They are able to choose the number of questions, category and difficulty level.

Motivation:

I identified I had to improve my core knowledge in React and JavaScript to feel more comfortable with them. A quiz app seemed a good option to practice and solidify the fundamental skills.

Challenges:

One particular tricky situation was when I wished to simultaneously fetch data and redirect the user to a new page after a button click. I only managed to make one of the two to successfully work. I asked for help from a more experienced friend, and the solution was to use React Router useHistory hook and the push method. I had to add the state, which included the fetched questions, as an additional parameter  history.push({ pathname: '/questions', state: { questions } }); .

I had never worked with an animations library before, so getting accustomed to Framer Motion was also an interesting learning experience. I got a bit overwhelmed with all the options available to me at first. I chose to just start small and not go super crazy with all the possibilites.

Description:

Web app locating wind turbines in Alaska. Users can find detailed information about each wind turbine by clicking on the icon on the map. The map title includes an overview of all the wind turbines in the region.

Motivation:

I have always loved working with maps, and I wanted to make a project using Google Maps API. I searched for interesting data to build my app around, and found wind turbines data from U.S. Geological Survey API.

Challenges:

Initially, the main obstacle was to find data which included geographical coordinates, and was interesting to work with as well. Later on, I realized there was a lot of missing values in the data set I chose. I had to start filling in the gaps with randomly generated numbers to make the app look more presentable.

This was the first bigger React project I had done, and that brought up many challenges in itself. Integrating React with Google Maps API was the main one. I had a difficult time finding exactly what I needed from the extensive Google Maps API documentation.

Also, I did not really know how to exactly implement most of the things in React. I started to focus on smaller sections of the demo code to get a better understanding what is going on, and eventually it started to make more sense.