https://avi-cohen-nehemia.github.io/team-picker/#/
This App was built as a technical challenge set to us by DevelopMe_, to demonstrate our skills as fresh grduates We were encourged to get creative and try to develop as many extra features as we can within the given time limit.
- React
- Redux
- HTML
- CSS
- JavaScript
- JSX
I chose to tackle this challenge using React/Redux, beacause I felt I am less comfortable using these frameworks. I decided to get out of my comfort zone and take this challenge as an opportunity to sharpen my skills and understanding of React and Redux specifically and my front-end skills in general.
The core of the challenge is to create a tool which randomly picks 5-a-side football teams from a list of 10 names.
- Create teams with 3-6 players a side.
- Players have skill level.
- "remove player" button during the "players-creation" phase.
- Confirm / ReShuffle teams.
- Cusomizable kits, colours and names.
- Players laid out on an image of a football pitch.
- Keep track of teams scores and a button to reset them.
- Reset button.
- Ability to refresh the page and navigate without losing the data.
- Make the app responsive/mobile-friendly .
- Ability to reshuffle teams fairly based on total skill level.
- Abilty to set winning score which ends the current game automatically.
- Building back-end API to keep track of match history.
- Teams' colors and kits state is stale.
Looking back, leaving my comfort zone and using React/Redux meant I did not finish everything I was plannig to accomplish. However, I'm still glad I chose that tech-stack as it made me learn a lot about React/Redux, and some things I did not understand during the course, now make much more sense.
Lack of planning on my part meant that sometimes I struggled more than I should have. I found myself at times, coding all over the place, jumping from a problem to another with no clear roadmap to follow. At the start, when the app was still fairly simple, I did not notice the impact of this approach, but later I had to face all kinds of issues and bugs that could have been avoided with better planning.
Doing this project was a reminder for me on how important it is to plan before jumping on a problem and starting to code.
Even though I did not finish everything I set myself to do, I am very pleased with the result I managed to create during this challenge. I have experienced immense satisfaction every time I got myself to understand a key concept. Overall, doing this project gave me much better understaning of how React/Redux work, which was my personal goal for this challenge from the beginning.
Since this project is significant to my future employment opportunities, it became very stressful at times. I had a very hard time to walk away and take proper breaks when I faced difficult problems.
Start by cloning the repository
git clone git@github.com:Avi-Cohen-Nehemia/team-picker.git
Then Install And Launch the App
cd project-directory
npm i && npm start