All solutions

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

Starting with this project, I began practicing creating logic using state management in earnest. The tip calculator app may seem simple at first glance, and indeed, the logic for calculating tips isn't particularly complex. However, if we consider it as a service that actual users will interact with, we must handle various errors and exceptions that can pop up unexpectedly. This challenge makes the task more difficult than it initially appears. Due to this gap, although there weren't any particularly difficult aspects in the UI or the logic, I had the opportunity to solidify my understanding and skills.

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

When developing logic using state management, I try to avoid creating things impulsively. I'm aiming to follow the principle of keeping commonly used components as simple and "dumb" as possible, while developing the important logic in higher-level components. In this challenge, I put a lot of effort into structuring the code, developing the logic, and managing state, but I haven't yet found a definitive approach that works best for me. Continuous practice is the only way to improve.

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

Any insights or tips are welcome!

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

1. Having learned a lot from my previous project, the newsletter form, this time I took the opportunity to consolidate what I had learned. As I was finishing the project, I discovered that fonts need to be applied separately in Storybook. I learned that if the fonts are different, it can cause confusion as the appearance in Storybook might differ from the actual project.

2. I tried using useSWR. Instead of importing the data.json provided by the challenge as a static file, I used the API functionality provided by Next.js to fetch it. This allowed me to retrieve data easily and conveniently without using useEffect. Also, I found its simple usage to be very efficient in progressing with the project. A similar library is tanstack-query, which seems to have more features than useSWR and could be useful for managing complex server states.

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

The Figma design system for this project was somewhat unfriendly from a developer's perspective. There were inconsistencies in line heights, meaningless 1-2px measurements, and odd pixel values. The oversized profile image also made precise clicking difficult. While ideally, design systems would be perfectly organized for developers, including component names and color designations aligned with industry standards like Tailwind CSS, this isn't always the case in real-world projects. Despite these frustrations, I overcame these challenges by completing the project, recognizing that as a professional, I need to deliver results even in less-than-ideal circumstances. In a work environment, communication would be key to addressing these issues.

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

Any tips related to this project are welcome.

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

I'm most proud of successfully integrating Storybook and implementing comprehensive testing with Vitest and testing-library, which significantly improved my component design process and code quality. These tools encouraged me to create more focused, reusable components and helped me catch overlooked issues. However, I realized that for smaller side projects, the time investment in extensive testing might not always be justified. In the future, I plan to use Storybook consistently but approach testing more selectively based on project scale and timeline. Despite the challenges, I'm committed to continuing to learn and implement new technologies in my projects, as I believe this investment in learning pays off in the long run.

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

The biggest challenge was integrating new tools like Storybook, Vitest, and testing-library into the project. This process involved a steep learning curve and was time-consuming. Additionally, unexpected issues arose due to differences between the testing environment and the actual environment. To overcome these challenges, I meticulously studied the official documentation, sought help from online communities, and persistently worked through trial and error. As a result, I was able to effectively use these tools, which greatly improved component design and code quality.

Another significant aspect of this project was learning and implementing Next.js server actions. Although the implementation differed slightly from the project's initial requirements, I focused on understanding and utilizing useFormState, useFormStatus, and server actions. This approach allowed me to gain valuable experience with these new features, even if it meant deviating somewhat from the original project specifications. The emphasis was on learning and applying these advanced Next.js concepts, which I believe will be beneficial for future projects.

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

Any tips and know-how related to this project are welcome!!!!

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

1. From this project onwards, logic requiring the use of state was introduced, and it was exciting to create the ShareBar functionality by appropriately utilizing useState. I was particularly pleased with how smoothly I implemented the ShareBar, which had slightly different appearances in mobile and desktop views.

2. I learned for the first time during this project that the tag is used to implement modal dialog boxes (pop-up windows). It's much better than using both functionally and in terms of accessibility. I think I'll use it often when creating modals in the future.

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

1. Creating the triangular shape of the ShareBar was extremely challenging. Additionally, adjusting the position of the ShareBar, which differs between desktop and mobile views, was tricky. However, I invested a lot of time and eventually succeeded.

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

All tips and know-how related to this project are welcome! 😊

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

I feel that I started off on the wrong foot with this project. I should have taken a mobile-first approach, but instead, I went with a desktop-first approach, which was regrettable. However, I'm really proud that I didn't give up or restart the project; I saw it through to the end. Despite making things more complicated than necessary, I gained a lot from the experience. Next time, I'll spend more time carefully analyzing the design and planning how to implement it more thoughtfully.

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

There was a lot of deliberation on how to handle the layout between desktop and tablet views. In this project, I implemented a complex grid layout logic, which felt overly complicated and not the best solution. In the future, I aim to solve such challenges with simpler, more straightforward code.

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

Any tips related to CSS would be greatly appreciated. 😊

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

This was a much more challenging task than I initially anticipated. Each card had slight differences in size, and the first card was completely different. I'm extremely proud that I didn't give up and managed to complete it to the end. Grid is truly amazing, but I think it will take more time to get used to than flexbox. That's why I plan to continue using grid and practice with it in the future.

I've created a separate view for tablets to ensure a natural responsive design, even though it wasn't in the original design specifications. Please come and take a look!

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

First, handling the transition from desktop to mobile was incredibly difficult. Since the desktop layout was challenging, I started working on the desktop view first, but I struggled with how to easily handle the responsive layout. The solution was to use the max-sm, max-lg, etc., classes provided by tailwindcss. These classes allow developers using a desktop-first approach to perfectly apply responsive design.

Second, there were too many conditional renderings, which made the code increasingly difficult to read. I was able to solve this using the clsx module. By handling complex logic with functions using clsx, the component became much cleaner.

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

I welcome any tips that you might have gained while working on this project. 😄

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

1. Implementing a more complex responsive design using CSS Grid, which allowed for a more sophisticated layout compared to previous challenges.

2. Successfully adopting a mobile-first approach in this project, which improved the overall design process and responsiveness of the site.

3. I've added a 2x2 card layout between the desktop and mobile views for a more natural responsive design, even though it's not defined in the design system. Please visit the site and check it out!

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

The main challenge I faced was implementing the desktop layout after initially using flexbox for the mobile-first approach. The desktop design proved more complex than anticipated. I overcame this by switching to CSS Grid for the desktop layout and then refactoring the existing code.

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

I'm curious about how others effectively utilize CSS Grid, especially given that Figma's dev mode only shows layouts in Flexbox. While I managed to implement Grid for this project, I'm interested in learning more about best practices for translating Flexbox-based designs from Figma into Grid-based layouts. Any tips or insights on this process would be greatly appreciated, particularly strategies for efficiently converting Figma's Flexbox layouts to Grid in actual code.

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

I felt a great sense of satisfaction when I accurately implemented the responsive layout using CSS grid. However, I didn't solely rely on grid; I used flexbox for smaller components within the card, such as buttons. I'm particularly pleased with how I combined these two approaches to complete the project.

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

I grappled with whether to implement the mobile or desktop screen first. My conclusion is that generally, a desktop-first approach is better. It seems much easier to scale down from a larger screen to a smaller one than to expand from a small screen to a larger one. However, depending on the nature and circumstances of the project, a mobile-first approach might be more suitable in some cases.

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

I would be grateful for any tips or insights others have gained while working on this challenge.

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

I'm most proud of improving my responsive design skills using Flexbox. By applying techniques like max-width and flex: 1 1 0 instead of fixed widths, I gained a deeper understanding of creating flexible layouts. The experience from the blog-preview-card challenge also helped me work more efficiently this time.

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

A significant challenge I encountered was getting the max-width property to work correctly on the component. Initially, I couldn't understand why the max-width wasn't being applied as expected. After investigating, I realized that the issue was related to the relationship between the main element and its content. To resolve this, I removed all default styles from the body and adjusted the main element to use w-screen, ensuring it took up the full viewport width. This allowed the child component to properly respond to the max-width property, enabling the desired responsive behavior across different screen sizes.

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

While I've made progress with responsive design using Flexbox and techniques like max-width and flex: 1 1 0, I'd appreciate guidance on more advanced responsive layout strategies. Additionally, I'm interested in learning best practices for troubleshooting layout issues, particularly when dealing with nested elements and their interactions with viewport dimensions. Any insights on combining CSS Grid with Flexbox for complex layouts would also be valuable.

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

I'm most proud of successfully implementing a responsive design using Tailwind CSS and CSS Grid, which allowed me to create a layout that adapts seamlessly to different screen sizes. This approach made the design both flexible and maintainable. However, if I were to approach this project again, I would focus more on creating reusable components from the start. While using Tailwind classes directly in components offers flexibility, I realized that extracting common patterns into separate components could have improved code readability and maintenance. Additionally, I would have spent more time optimizing images and considering accessibility from the outset of the project, rather than addressing these aspects later in the development process. These insights will definitely inform my approach to future projects, helping me create more efficient and user-friendly web applications.

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

One of the main challenges I faced was the overuse of @apply directives in CSS modules when using Tailwind CSS. Initially, I thought this approach would improve code readability and organization. However, I soon realized that excessive use of @apply could lead to performance issues in larger projects and negate some of the benefits of using Tailwind CSS, such as reduced CSS bundle size and improved maintainability. To overcome this, I refactored my code to use Tailwind classes directly in the TSX, reserving @apply for small, highly reusable components like buttons or form inputs. This change not only improved the project's performance but also helped me better understand and utilize the full potential of Tailwind's utility-first approach.

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

I'm particularly interested in receiving guidance on optimizing styling approaches in React.js and Next.js projects. While I've made progress in balancing performance and readability using Tailwind CSS, I'm keen to explore advanced techniques that can further enhance both aspects. Specifically, I'd appreciate insights on structuring styles in larger applications where the complexity of components increases. Any advice on maintaining both performance and readability in styling complex React components would be extremely helpful.

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

What I liked the most was restructuring the project by creating component-specific folders and using index.tsx files for each component. This approach made importing components much simpler and improved the overall organization of the codebase.

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

This time, since it was a simple component that didn't require responsive design, I didn't encounter any significant challenges. However, I spent a lot of time exploring how to best structure a Next.js project. This is an ongoing consideration, and there is no definitive answer. I believe that as I work on more projects, I will eventually find a structure that works best for me.

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

I welcome any feedback on the project. 😁

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

During this project, I enhanced my skills in using Next.js and Tailwind CSS. I learned how to effectively combine CSS Modules with Tailwind CSS for scoped and utility-first styling. I also gained a better understanding of semantic HTML and web accessibility practices. This project represents my solution to the ongoing debate about how to effectively use and manage CSS in modern web development. By integrating Tailwind CSS with CSS Modules and employing the BEM methodology, I have developed a structured approach to styling components. This method allows for scalable, maintainable, and highly readable code. Next time, I would focus more on optimizing the performance of the application by incorporating lazy loading and further refining the responsive design for various screen sizes.

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

One of the significant challenges I encountered was managing the complexity of combining Tailwind CSS with CSS Modules. Initially, it was confusing to determine when to use utility classes versus custom CSS rules. To overcome this, I spent time studying the best practices and examples from the Tailwind CSS and Next.js communities. Another challenge was ensuring accessibility and semantic HTML compliance. I used various tools and resources, such as WAVE and Lighthouse, to identify and fix accessibility issues, enhancing the user experience for all users.

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

The screenshot may look slightly different from the design, but if you visit the site, you can see that it is cleanly completed as per the design. I'm not sure how to resolve this issue. 🤣

I would greatly appreciate any detailed feedback or resources on my project topics.