Skip to content
OverviewSolutions
35
Comments
6
qadzek
@qadzek

All comments

  • stephany247•730
    @stephany247
    What are you most proud of, and what would you do differently next time?

    I'm proud of successfully implementing the Expenses Chart with Chart.js and react-chartjs-2, especially customizing tooltips and styling. Next time, I'd focus on optimizing the layout and spacing of the chart to ensure a smoother user experience across different screen sizes.

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

    I struggled with customizing the tooltip positioning, removing the bottom axis line, and ensuring the bars had the correct colors. I overcame these by tweaking Chart.js options, adjusting layout padding, and using conditional styling for the bars. Deployment issues also came up, but I resolved them by checking imports and ensuring dependencies were correctly configured.

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

    I’d love feedback on optimizing the tooltip positioning, especially ensuring it stays centered and properly aligned for all bars. Also, any tips on improving this project would be helpful!

    Expenses Chart Component with Chart.js and React-Chartjs-2

    #chart-js#react#tailwind-css#vite#typescript
    1
    qadzek•580
    @qadzek

    Great work! One small improvement would be to compare against the current day of the week instead of hard coding it: item.day === "wed".

  • Austin Wheeler•40
    @awheelr
    What are you most proud of, and what would you do differently next time?

    I'm proud of stepping out of my comfort zone and using both the Next and Tailwind frameworks for the first time. However, next time, I'd like to properly learn how to use and modify Tailwind's predefined spacing values.

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

    The biggest challenge I encountered was using Tailwind 4, as there was limited information available beyond the documentation. Fonts in particular were problematic, especially when trying to integrate Next's implementation with Tailwind. In the end, I decided not to use Next at all for fonts and instead relied on Tailwind and its custom utilities.

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

    I would appreciate some feedback on how to properly utilize Tailwind's design system when working with a specific design like this. I'm unsure whether it's common to use Tailwind's predefined spacing values and get as close as possible to the design or to create my own custom spacing values.

    Blog Preview Card built with Next.js and Tailwind

    #next#tailwind-css
    1
    qadzek•580
    @qadzek

    I like the extra cards a lot!

    I would recommend to limit using all these custom values and use e.g. p-6 instead of p-[24px].

    To set the colors, I used @theme { --color-cust-yellow: hsl(47, 88%, 63%); } in globals.css and e.g. <p className="bg-cust-yellow">.

    For the fonts, I used:

    import { Figtree } from 'next/font/google';

const figtree = Figtree({
  subsets: ['latin'],
  display: 'swap',
});

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" className="">
      <body
        className={`${figtree.className} antialiased `}
      >
        {children}
      </body>
    </html>
  );
}
    Marked as helpful
  • Tesla_Ambassador•3,070
    @tesla-ambassador
    What are you most proud of, and what would you do differently next time?

    I'm mostly proud of the fact that I got to learn how to use the react-hook-form and also completing this project while using TypeScript for the first time with Next.js.

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

    I explained all these details in my README.md file

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

    Mainly accessibility and better coding practices when using Next.js/React.

    Mortgage Calculator using react-hook-form and TypeScript.

    #next#tailwind-css#typescript#accessibility
    2
    qadzek•580
    @qadzek

    Well done, impressive work!

    TypeScript can be annoying indeed but it catches so many bugs. If you have trouble finding the TypeScript types, hovering over them in VS Code in the right place should reveal them.

    Congrats on implementing the comma separator, I skipped over that part.

    Possible improvements:

    • The interest rate input field should accept all floats, e.g. 4.9.
    • Don't use HTML like <br /> in Markdown.
    • Try using template literals (backticks) instead of spanValidClass and spanInvalidClass, to avoid duplication.
    • Intl.NumberFormat might be helpful.
    • Clicking on the far end of the box containing the radio button should work.
    Marked as helpful
  • qadzek•580
    @qadzek

    Nice work. I like how you have implemented the "Filter by Region" menu.

    A couple of small remarks:

    • I can confirm the bug described by @Javieer57.
    • The use of any in TS is discouraged.
    • There are tools online to automatically convert a JSON response to TS types: https://app.quicktype.io
    • I don't think there is a need for separate FilteredCountries and AllCountries components.
    • A single API call should suffice.
  • qadzek•580
    @qadzek

    Take a look at this solution.

    Marked as helpful
  • qadzek•580
    @qadzek

    Looking good! I like the animation. Just make sure the design is responsive at every size, e.g. at 600px wide a lot of space is wasted.

    Marked as helpful