All solutions

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

Learn to use useReducer for the calculation and use tailwindCSS theme configuration for the 3 theme design.

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

stuck on useState and only receive firstValue and secondValue for calculation at first but then found that useReducer is much more suitable for this calculator app. Will improve and learn more about react.

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

better way to use tailwindcss as the current code have many repeated style for the keypad of calculator.

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

try to implement it with react hook form, but current case not sure how to use react hook form to trigger on-time update when type in number. Next time if app require update on time then maybe should use ori react form.

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

1. input field doesn't update on time.
2. reset button no reset tip amount and total amount.

• next time need to try ori react form first

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

Need more practice of react hook form

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

create layout with grid with tailwindCSS, next time should minimize the component as current Card.jsx take the job of rendering, should use Card for layout only and render in Profile.jsx

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

use grid for the layout as i render data inside Cards.jsx so i have to cut the Profile.jsx into 25% | 75% then inside Cards.jsx cut into 25% | 25% | 25%, i don't think this is good practice

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

better way to plan the layout before start writing code

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

Try to use React Hook Form for the form and validation

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

try to understand the basic of react hook form and implement in this project, the main challenge i face is try to create style for invalid email like when should have red color background and text and when user focus or not

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

Refactor my code to separate it into smaller part

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

use popover component from headlessui for the popup panel of social media icon

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

different design of desktop and mobile for the social media panel, at last i decide to create both version and show when screen size different

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

In mobile version, when you click on the share icon then social media panel will popup but the icons is slightly adjust the gap between and i not sure how to deal with it

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

create data and iterate the data to create each card in react

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

with the method mention above, i found that it is difficult to build the card according to the design, at last i just manually take the data and put into card components

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

grid design for card component, example like when the screen more than 640px, the first card will put into column 1, row 1... not sure how to do it

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

Use grid and flexbox to control the layout

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

learn to pass down css as prop to control the design

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

css grid

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

create a useWindowDimensions() hook to track window width and switch between desktop and mobile photo. source: https://stackoverflow.com/questions/36862334/get-viewport-window-height-in-reactjs

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

create mobile design and then shift to desktop design, should work on micro part one by one than straight working on the whole design.

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

guidance to use proper width and height on different part.

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

divide the page to all react component

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

responsive design and prepare custom css for repeat element

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

guide to build different app

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

.

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

.

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?

.

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

.

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?

Need to proper study the use of

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

decide how many layer of

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

Layout guidance