What are you most proud of, and what would you do differently next time?
This was an interesting challenge overall. I'm most proud of how I was able to get the input with the extra text into a reuseable component where the developer can specify which side they want the text to be at(left/right). I would definitely use a more cleaner code approach next time.
What challenges did you encounter, and how did you overcome them?
I was trying to get the form validations without using any extra state or Javascript code, but It seemed to be harder so I might just change to javascript instead for the validations. Also had a small issue with the enhanced inputs and validations.
What specific areas of your project would you like help with?
I would like help with doing the validation manually as using HTML+CSS for the validation was a bit more challenging than expected. Also cleaning up the code and making it more accessible.
What are you most proud of, and what would you do differently next time?
This was an iteresting challenge, most proud of how I got to complete it though there are still alot of things that I can do better, but glad I got to complete it.
What challenges did you encounter, and how did you overcome them?
The state management between ref and reactive was troubling, I had some issues like when you pass data as a prop thet wont be reactive anymore so I kinda had to work around that
What specific areas of your project would you like help with?
What are you most proud of, and what would you do differently next time?
This was my second time using vue for a challenge. It was hard getting some parts work as im kinda new to vue but everything worked out fine at the end. Next time I would better organize my components and make the code more readible. Also would try of a better way to work with the custom tip Percentage part.
What challenges did you encounter, and how did you overcome them?
Had an issue with resetting the form for the reset button, I was using ref() as my state in my pinia store and just put the state back to its orginal value, in pinia and vue devtools the state was reset but not in the actual forms like bill, tipPercentage and persons. What I did was just change from ref to reactive.
What specific areas of your project would you like help with?
Refactoring the code, making the tip percentages accessible and generally better components.
What are you most proud of, and what would you do differently next time?
This is my first time officially using both Zustand and Framer Motion so I would like so insights to how I handled the global state and how can I make it better.
What challenges did you encounter, and how did you overcome them?
Global State Management and Form Validations.
I solved the state problem with Zustand since it was fun and easy to use.
For form validations I was thinking about React Hook form but didnt want to add more complexity.
Another problem I had was validating the form before moving onto the next step. The form wasnt like the normal forms where you have a submit button to check, so I did an interceptor function(Thats what I call it but basically a wrapper) around the increment function so that before it moves on to the next step it validates the form and only when its correct it will go on to the next one.
What specific areas of your project would you like help with?
Global State Management and better structure of files and components
This was an interesting challenge for me... but I did struggle alot to get this done.
My main concern is about best practices and how the code can be improved.
There is a bug on the country details page when u click a country u will get redirected but the url wont change. I know what the issue is but to fix it im afraid I would have to do a few extra things.
Also this is not perfect as yet I plan to integrate React-Query in this project in the future so I would also like some help with that.
This was an interesting project to work on, especially that I had to use things that I have recently learnt and haven't mastered such as SCSS, REACT and CSS GRID.
My main problem was the images, when I rendered them on localhost they showed but not when the website was hosted online. So that was my main problem and I had to import each of the images manually... which was tedious.
Any suggestions to fix that would be appreciated.
This is my attempt for this challenge. I would love some feedback relating to better JS code to manage events and anything that can be done for better Responsive Design.
