Skip to content
OverviewSolutions
33
Comments
74
P
Thomas TS
@ttsoares

All comments

  • P
    Thomas TS•1,250
    @ttsoares

    Nice work! I also like NextJS with Tailwind.

    Some comments:

    • The light/dark mode would be better with a Sun and a Moon icons.
    • In a country's page, the Border Countries should be also clickable and lead the user to those countries pages.
    • All challenges bring the README-template.md file. We supposedly should edit it with the appropriate content and use it as the README.md of the solution.
    • It is advisable to avoid to define sizes in pixels, like w-[255px] but, instead use REMs: 255/16 = 15.937 rems.
  • P
    Thomas TS•1,250
    @ttsoares

    Neat solution!

    Your email validation could be improoved...

    About input forms, I suggest you take a look at:

    React Hook Forms

    Here there is a nice tutorial about it:

    Code Evolution

    Marked as helpful
  • P
    Thomas TS•1,250
    @ttsoares

    Fantastic! I also love Next with Tailwind...

    Some comments:

    • Your switch to light/dark should present a Sum and a Moon, depending on the theme.
    • If one choose to filter by “America” nothing comes.
  • P
    Thomas TS•1,250
    @ttsoares

    Nice touch of moving parts...

    About the README.md:

    Each challenge brings the README-template.md file. That one is to be filled and edited to then become the README.md of the solution.

    Marked as helpful
  • P
    Thomas TS•1,250
    @ttsoares

    Wonderful! I love React and Next.

    A suggestion about forms: Your code is not validating the email address. I don't know if this was a requisite of the challenge or not. Anyhow, this is a library I use to apply to forms with React:

    React Hook Forms.

    It offers full control of all sorts of forms demands.

    Marked as helpful
  • Chrision Wynaar•340
    @Clipzorama
    What are you most proud of, and what would you do differently next time?

    Im happy that I was able to finish the design. Next time, Id probably using more <li> elements instead of divs:

    {navMobileDropdown === 'features' && (
                                <div className="dropdown-menu-mobile">
                                    <div><img src={ToDo} alt="Todo Symbol" />Todo List</div>
                                    <div><img src={Calendar} alt="Calendar Symbol" />Calendar</div>
                                    <div><img src={Reminder} alt="Reminder Symbol" />Reminders</div>
                                    <div><img src={Planning} alt="Planning Symbol" />Planning</div>
                                </div>
                            )}
                        </li>
                        <li onClick={() => setCMobileDropdown(cMobileDropdown === "company" ? null : "company")}>
                            <div className="mobile-dropdown-toggle">
                                Company <img src={cMobileDropdown  === 'company' ? ArrowUp : ArrowDown} alt="Arrow Icon for Dropdown" />
                            </div>
                            {cMobileDropdown === "company" && (
                                <div className="dropdown-menu-mobile">
                                    <div>History</div>
                                    <div>Our Team</div>
                                    <div>Blog</div>
                                </div>
                            )}
    What challenges did you encounter, and how did you overcome them?

    Main problem was the mobile nav bar. My fix for this was increasing the z-index and adding the position property to enable my anticipated layout.

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

    Optimization.

    I could've definitely done this design more optimized and potentially readable. If anyone has time to check it out, PLEASE comment on ways I can make this solution better!

    Thank You!

    Intro Section Nav Design Solution --&gt; React

    #react#react-native
    1
    P
    Thomas TS•1,250
    @ttsoares

    Nice job!

    Only a question: Why did you tag it as a React Native code ?

    I'm asking because I have been using that is my last solutions and when I saw you post it sparked my attention to see it.

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

    I would try to use a different UI library and create reusable components.

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

    Getting the card to the correct width was difficult. I had to play around with the CSS to get it to look similar to the provided images.

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

    I would like to know if the width and the size of the text is off.

    Responsive Social Links Profile

    #next#react#typescript#tailwind-css
    1
    P
    Thomas TS•1,250
    @ttsoares

    Well executed... I'm also fan of NextJS.

    Just a comment about how to enjoy Typecript: The idea is to use classes in the .tsx or .jsx files to apply all the Tailwind magic.

    If one place most of the CSS rules in a .ccs file, what remains to Tailwind do ?

  • P
    Thomas TS•1,250
    @ttsoares

    Simple and direct... Neat solution!

    Just a comment about font family.

    Poppins is not being applied to the page. The way you define that in tailwind.conf.js was ignored by Tailwind.

    For example: custom fonts:

    @import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import "tailwindcss";@theme {  --font-roboto: "Roboto", sans-serif; }

    Maybe you could install the Fontanello plug-in in your browser to facilitate this kind of inspection.

  • Petre_Coder•260
    @Petre223
    What are you most proud of, and what would you do differently next time?

    Solution Retrospective: Netlify Deployment Challenges

    What I’m Most Proud Of

    1. Debugging Skills – I learned how to interpret Netlify build logs effectively, identifying both ESLint errors and configuration mismatches.
    2. CI/CD Understanding – Now I better grasp how `process. env.CI affects builds, and why warnings become errors in deployment.
    3. React Build Process – I confirmed that create-react-app outputs to /build (not /dist), a key insight for fixing deployment.

    What I’d Do Differently Next Time

    1. Pre-Deployment Testing – Before pushing to Netlify, I’d:
      • Run npm run build locally to ensure no ESLint warnings.
      • Verify the correct output folder (build/ vs. dist/).
    2. Use a netlify.toml File – Instead of relying on Netlify’s UI settings, I’d define: 
      [build]
  command = "npm run build"
  publish = "build"  # Explicitly set for CRA
      to avoid misconfigurations.
    3. Stricter Local ESLint Rules—To catch issues earlier, I’d match my local ESLint config to Netlify’s CI behaviour ("no-unused-vars": "error").

    Where I’d Like Support

    • Optimising Builds: Can I skip ESLint in production builds safely?
    • Alternative Deployment Strategies: Should I use vite instead of CRA for faster builds?
    • Netlify Caching: How can I speed up repeated deployments?

    Sharing this helps others avoid similar pitfalls! 🚀 Would love feedback or additional tips from the community.

    What challenges did you encounter, and how did you overcome them?
    1. Netlify Couldn’t Find the Build Directory Problem: Netlify expected files in /dist, but create-react-app outputs to /build.

    Solution:

    Updated Netlify’s "Publish directory" from dist to build.

    Alternatively, added Netlify.toml file to explicitly define:

    toml [build] publish = "build" 2. ESLint Warnings Failed the Build Problem: Netlify treats warnings as errors in CI (process.env.CI = true).

    Solution:

    Fixed the code: Removed unused variables (e.g., 'use' in Tabs.js).

    Temporary workaround: Disabled strict CI checks by setting CI=false in the build command.

    Long-term fix: Adjusted ESLint rules in .eslintrc.json to downgrade no-unused-vars to "warn".

    1. Debugging Opaque Build Errors Problem: Netlify’s logs showed exit code 2 without clear details.

    Solution:

    Ran npm run build locally to replicate the error.

    Checked the full error output in the terminal (which was more descriptive than Netlify’s UI).

    1. Configuration Mismatches Problem: Default Netlify settings didn’t align with create-react-app.

    Solution:

    Verified local vs. production behaviour by comparing package.json scripts.

    Explicitly defined settings in Netlify.toml to override defaults.

    Key Takeaways Test builds locally first to catch issues early.

    Always check the actual build output folder (e.g., build/ vs. dist/).

    Configure ESLint to match CI behaviour to avoid surprises.

    By breaking down each error methodically, I turned deployment hurdles into learning opportunities! 🛠️ Would love to hear how others handled similar issues.

    What specific areas of your project would you like help with?
    1. Optimising the Build Pipeline Question: Is there a way to speed up Netlify builds for a create-react-app project?

    Specific Needs:

    Can I safely skip ESLint in production builds without risking code quality?

    Are there caching strategies (e.g., node_modules caching) to reduce build times?

    1. Modernising the Stack Question: Should I migrate from create-react-app (CRA) to Vite?

    Specific Needs:

    How difficult is the migration for a simple static site?

    Would Vite’s faster builds outweigh the configuration effort?

    1. Improving Error Handling Question: How can I make Netlify’s error logs more actionable?

    Specific Needs:

    Tools or scripts to parse build logs for clearer feedback.

    Best practices for setting up custom error tracking (e.g., Sentry for build failures).

    1. Deployment Best Practices Question: Are there better ways to structure my project for deployment?

    Specific Needs:

    Should I use a monorepo setup if I add backend services later?

    How to handle environment variables securely in Netlify?

    1. Performance Tweaks Question: What are the lowest-hanging fruit for improving Lighthouse scores?

    Specific Needs:

    Critical CSS extraction for a static React site.

    Optimal image optimisation pipelines (e.g., Netlify plugins vs. local pre-processing).

    1. Community Wisdom Open Question: What’s the most counterintuitive lesson you’ve learned from deploying React apps?

    Why This Matters: Clearer builds, faster deploys, and fewer surprises! If you’ve tackled any of these, I’d love your insights. 🚀

    (For context: This is a static React landing page with minimal dependencies, but I’m planning to scale complexity over time.)

    Responsive Bookmark landing Page

    #react#tailwind-css#typescript
    1
    P
    Thomas TS•1,250
    @ttsoares

    Nice solution!

    Some comments:

    • Just place type="email in a input do not mean a real validation of the content. For example: qqq@www will be accepted. In general, we use a regular expression to guarantee that, at least, the test has xxx@yyy.zz format.
    • At 375px window width your FAQ need some marge, left and right.
    • The Tailwind style of dealing the media queries is to use in the classes things like: lg:font-xl. You are dealing with that in files like index.css with : @media (min-width: 1024px) {...}

    Hope that this helps.

  • Akash Garagad•40
    @AkashGaragad
    What are you most proud of, and what would you do differently next time?

    I created it with my self only i am proud to become independent to develop my self

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

    i just implemented on bases of my learning so i did no face any problem to create it

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

    here i used display flex to align the card that was helped me to complete this one

    Blog preview card

    #tailwind-css
    1
    P
    Thomas TS•1,250
    @ttsoares

    OK, nice job! As this solution is tagged: tailwind-css

    It seems that was a mistake, as there is nothing of tailwind in the code...

  • Steve Mogan Odumbe•350
    @StevetheRebel
    What are you most proud of, and what would you do differently next time?

    Everything I did was just basic but it was fun using tailwind css v4.1 on my project. Different experience all together.

    Calculator App

    #react#tailwind-css
    1
    P
    Thomas TS•1,250
    @ttsoares

    Nice job !

    Some comments:

    • If the calculation results in a recurring decimal, the display will “leak”. Like 8/3.
    • If you like to use Tailwind consider the use of the tailwind.confg.js file where one can place settings in such way that this is not needed: [@media(min-width:360px)]:text-3xl.
    • When the math operator is clicked, like +, the second operand (number) seems a bit out of place too much to the bottom.
  • Oladayo Ajibola•80
    @DeeBabaTech
    What are you most proud of, and what would you do differently next time?

    The project was overall nice. I was able to conclude all requested features. Feel free to give comments.

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

    No challenge actually.

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

    None for now.

    Responsive rest-countries app

    #next#tanstack-query#typescript#tailwind-css
    2
    P
    Thomas TS•1,250
    @ttsoares

    Neat solution !

    An UX suggestion:

    If the page is in dark mode, it makes more sense if the upper corner show “Light Mode” and vice versa. When the user click in the mode toggler button is to change to the other mode not the present one.

    Comments:

    • Usually we do not leave unnecessary comments in the final version. Like the one in the tailwind.config.js.
    • Your "Back" button is moving back in the browsers's history. When I did this solution, it was my understanding that this button move the user back to the all flags page.
    Marked as helpful
  • Quoc Bao Dinh Le•160
    @junjhon12
    What are you most proud of, and what would you do differently next time?

    I'm proud of the structure of the site.

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

    Understanding API, Gemini Helped me out.

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

    Learning how to use API faster.

    API tip generator using React Vite w/TypeScript and Tailwind CSS

    #react#tailwind-css#typescript
    1
    P
    Thomas TS•1,250
    @ttsoares

    A precise solution!

    Some comments:

    • It is odd the use of useless classes like: Box-container and Main-content. If you like to use references, it would better comments.

    • As your index.css has several definitions, it is not clear if you really want to use Tailwind or not...

    • About performance: Debounce the button and cache the results in localStorage:

    const fetchAdvice = useCallback(async () => {
  if (loading) return; // Prevent concurrent fetches
  setLoading(true);
  try {
    const cachedAdvice = localStorage.getItem("cachedAdvice");
    if (cachedAdvice) {
      const { slip } = JSON.parse(cachedAdvice);
      setAdvice(slip.advice);
      setAdviceId(slip.id);
    }
    const response = await fetch(API_URL, { cache: "no-store" });
    const data = await response.json();
    localStorage.setItem("cachedAdvice", JSON.stringify(data));
    // ... rest of the logic
  } catch (err) { ... }
}, [loading]);
  • P
    Thomas TS•1,250
    @ttsoares

    How could be fixed the theme toggler:

    import { BiMoon, BiSun } from "react-icons/bi";
import { useEffect, useState } from "react";

export default function Header() {
  const [isDark, setIsDark] = useState(false);

  useEffect(() => {
    const savedTheme = localStorage.getItem("theme") || "light";
    setIsDark(savedTheme === "dark");
    document.body.classList.add(savedTheme);
  }, []);

  const toggleTheme = () => {
    const newTheme = isDark ? "light" : "dark";
    document.body.classList.remove("light", "dark");
    document.body.classList.add(newTheme);
    localStorage.setItem("theme", newTheme);
    setIsDark(!isDark);
  };

  return (
    <div className="flex justify-between items-center shadow-md mx-auto px-5 md:px-20 py-8 w-full">
      <h1 className="font-bold text-lg">Where in the world?</h1>
      <button
        className="flex items-center gap-2 shadow-md px-3 py-2 rounded-xl cursor-pointer"
        type="button"
        onClick={toggleTheme}
      >
        {isDark ? <BiSun size={25} /> : <BiMoon size={25} />}
        {isDark ? "Light Mode" : "Dark Mode"}
      </button>
    </div>
  );
}
  • P
    Thomas TS•1,250
    @ttsoares

    Nice solution!

    Some comments:

    • The icons "Moon/Sun" are not working 100%. And the label is always "Dark Mode".

    • The 'mobile' version could start at 1023px of window width. In other words: below 1024 change to 'flex-col'.

    • The "Search for a country" feature seems not working.

    • When I solved this challenge used the Jotai package to handle state over componets. Much simpler that Redux: Jotai

  • P
    Klevis•720
    @21Kl3v1s21
    What are you most proud of, and what would you do differently next time?

    a

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

    a

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

    a

    FRM-Mortgage-Repayment-Calculator-Next

    #next#tailwind-css
    1
    P
    Thomas TS•1,250
    @ttsoares

    Greetings. Good code... Just an issue with font family: You did import:

    import { Geist, Geist_Mono } from "next/font/google";

    but all the page is using Arial.

    I did not see the design, though. But if it is defined to be Geist you will need to choose.

    As I did some solutions with Next and Tailwind my suggestion is let layout.tsx controll the typology and not the global.css.

  • P
    Thomas TS•1,250
    @ttsoares

    Greetings. A neat solution! Some comments:

    • At the windows size of 768px (md) it seems that a bit odd that the area with the text "Next generation digital banking" is overlapping the cellphone images. I did not see the design, though.

    • If the App.css is not being used, it could be removed.

    • The Tailwind way to handle custom typology is by defining those in the tailwind.config.js file to hack like "tracking-[-.57px]" are not needed. For example a custom definition called p1:

    fontSize: {
 p1: ['3.875rem', { lineHeight: '120%', letterSpacing: '-2px', fontWeight: '700' }],
}
    • It is not a best practice to use 'index' as 'key' like in:
    {articles.map((article: Article, index) => {
   return <div key={index}>

    Best Practices for Keys:

    Unique IDs:
The ideal approach is to use a unique identifier from your data, such as a database ID or a unique property within your objects.
Generated IDs:
If your data doesn't have unique IDs, you can generate them before rendering. Libraries or simple functions can help with this task.
Stable Keys:
Ensure that the key you use remains consistent across re-renders. It should not change unless the corresponding element is actually updated or replaced.
    Marked as helpful
  • Akiz-Ivanov•410
    @Akiz-Ivanov
    What are you most proud of, and what would you do differently next time?

    Nothing.

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

    Biggest challenge was getting the spacing right. Overcame with trial and error.

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

    Can't think of anything.

    Responsive 3 column preview card component using CSS Grid and Tailwind

    #tailwind-css#vite#react
    2
    P
    Thomas TS•1,250
    @ttsoares

    Thank you for the example of using 'clamp' with Tailwind !

    As we get used to doing all with Tailwind classes, we tend to forget about CSS intrinsic features... as 'camp' is.