Skip to content
OverviewSolutions
34
Comments
5

qadzek

@qadzek560 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Austin Wheeler•30
    @awheelrSubmitted 7 days ago
    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•560
    @qadzekPosted 6 days ago

    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
    0
  • P
    Tesla_Ambassador•3,070
    @tesla-ambassadorSubmitted 7 months ago
    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•560
    @qadzekPosted 7 months ago

    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
    0
  • qadzek•560
    @qadzekPosted about 1 year ago

    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.
    0
  • qadzek•560
    @qadzekPosted about 1 year ago

    Take a look at this solution.

    Marked as helpful
    1
  • qadzek•560
    @qadzekPosted over 1 year ago

    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
    0