Everything ingenious is simple, and everything simple is ingenious
Tags: beginners, react, javascript, bootcamp
Published: 2022-02-22 16:51:32

Or how I figured it all out 1.5 hrs before our 2nd project presentation... :D

At the end of the phase 2 of my studying in bootcamp we had one week to complete a project in React. My teammate and I decided to create a Secret Santa project ( Yeah, it is a bit late for it for this holiday season, however we can be prepared for the next one :) ).

On day one we discussed the functionality and we also drew up some part of our logic for better visualization. We came up with 3 pages: Home (with rules and possibility to chose two others), Individual, and Group gift exchange.

For the individual gift exchange the user needs to submit his or her personal info (name, last name, address and email), optionally choose a random gift, or create a wish list, and select a gift price range. 
The group exchange idea is a possibility to create your own group of friends/co-workers (you need to submit name, last name, email and optionally gift price range). 

There are two separate workflows for choosing random person as a Secret Santa: 
- for individual: we take a person from the database (db) who has the same set of parameters (random gift or price range, and does not have a Secret Santa), and match these two people, send info and delete from db, so that they can participate again; 
- for the group exchange we decided to change the workflow, since it would be too predictable, that is why if a person already has a Secret Santa, then this person can not be a Secret Santa for his chosen Secret Santa (it is one way connection). 

When we had a picture of our project we started working on it, we created pages, user structure, forms, got some fake users from some API, all logic for individual exchange. However, group workflow gave us some trouble. I was surprise, as I thought that individual part would be harder. A lot of tries, brainstorms, and then again a lot of attempts that did not bear fruit.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ueay2l6jsssc1f7uh1fe.jpeg)

After a sleepless night on the day of the project I made a breakthrough but still there was a bug in the logic. I was confused and lost as to why it is happening and how to fix it. With lack of time, I, unfortunately, lost myself... no, I did not give up, but I tried to code whatever could help without understanding what I was doing and why, it was kind of monkey testing but during coding... I hoped that my experience in manual QA helped me, but it looks like it did not :D

On the due date, one of the teachers spent at least 2 hrs trying to figure out what happens in our code, and as a result he simply explained what we should have done when we started working on something, it was so simple and ingenious! When you have your task you need to divide it, and then divide it again, even if it seems already simple you can and should divide it again. For example, brushing your teeth is a simple task, but it includes a lot of steps with important sequences. Start with most important part, with a heart, without any UI, db structure and etc, just in a primitive way, and then when these pieces work you can connect them, wrap them, and do whatever else you need.

When I changed the code similar to his explanation it looked much better and all other functions were easier than before. It was a chain reaction. 
One of my mistakes was that I configured the user structure at the beginning and then my hands were tied because of that. You can look at my piece of code and my instructor way of thinking: 
1. before explanation
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fh1p09nm3iytsxcwvpg5.png)

2. explanation
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g9ekmswaa17e1sblqsul.png)

3. after explanation
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/enkypcf3rb3yn6o65zqy.png)

New way gave us the possibility to reuse some functions for group exchange logic. We deleted some functions and that helped us omit async changes to array (that was the 2nd cause of our problems).

Now I understand we need to develop our computational thinking skills, and start every task/solution from the simplest pieces of the big puzzle! Do not overthink, and as a result do not overcomplicate.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w5496c2m7wnqlbtvs97l.jpeg)