Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
29
Comments
22
Luan Barcaça
@barcaca

All comments

  • David•150
    @davso11
    Submitted over 1 year ago

    Tip calculator app using React, Typescript, and TailwindCSS

    #react#tailwind-css#typescript
    1
    Luan Barcaça•600
    @barcaca
    Posted 4 months ago

    Looks really great!

  • P
    Mustapha•200
    @Mustapha909
    Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud of the project's overall responsiveness and how it adapts gracefully across various breakpoints. Leveraging Tailwind's spacing scale and utility classes allowed us to create a clean, maintainable design that works consistently on mobile, tablet, and desktop. It was rewarding to see the layout transition smoothly between flex directions and grid configurations.

    If I were to do it differently next time, I would invest more time into creating custom breakpoints and possibly a design system for even more granular control over the UI. I might also integrate more advanced state management or even animation libraries to enhance user interactions further. This experience reinforced the importance of flexibility and planning for responsive design from the start.

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

    One of the main challenges was ensuring that the layout remained fluid and centered across a wide range of screen sizes. Initially, the flex direction and absolute positioning of certain elements (like the timeframe buttons) caused the content to shift or get clipped at specific breakpoints. To overcome this, I revisited the responsive classes in Tailwind and adjusted the breakpoints, using a mix of flex and grid utilities to ensure that the design gracefully transitions from a column to a row layout. This helped maintain a centered and cohesive look regardless of screen size.

    Another challenge was fine-tuning the dynamic sizing of components. It took some trial and error to set up the spacing scale so that the user profile and activity cards scaled proportionally on different devices. Leveraging Tailwind’s utility classes for width, height, and spacing allowed for quick adjustments until the desired responsiveness was achieved.

    Overall, the process reinforced the importance of responsive design and iterative testing across multiple breakpoints. Each issue provided an opportunity to learn more about Tailwind's responsive utilities and how to apply them effectively in a real-world project.

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

    Responsive Design Refinement: I'm looking to further optimize the responsiveness of the dashboard. Although it adapts well across breakpoints, I'd like suggestions on any potential tweaks or best practices to ensure consistency and optimal spacing on unusual screen sizes.

    Component Abstraction & Reusability: I want to ensure that my components (like UserProfile, ActivityCard, and ActivityGrid) are as reusable and maintainable as possible. Any insights on abstraction, code splitting, or better state management would be very helpful.

    Performance Optimization: Since the layout involves dynamic image rendering and responsive adjustments, I'm curious about techniques or tools that could help with performance improvements, especially for mobile devices.

    Enhanced Interactivity & User Experience: While the basic interactions work fine, I'm looking for ideas on how to introduce more advanced animations or transitions that could make the dashboard feel even more engaging.

    Time tracking dashboard

    #react#tailwind-css
    1
    Luan Barcaça•600
    @barcaca
    Posted 4 months ago

    The site looks good, but you need to adjust the font sizes for other breakpoints and use the challenge's font to make it perfect.

    Marked as helpful
  • Momonkuei•180
    @Momonkuei
    Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I practiced using vue router and vee-validate

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

    How to customize error messages for vee-validate validation Try using chatgpt to help me solve it

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

    Nothing

    frontendmentor-sign-up

    #tailwind-css#vue#vee-validate
    1
    Luan Barcaça•600
    @barcaca
    Posted 4 months ago

    The solution looks great!

  • Ghulam Murtaza•10
    @ghulammurtaza27
    Submitted 5 months ago

    ccc

    #react
    1
    Luan Barcaça•600
    @barcaca
    Posted 5 months ago

    The site looks good, but it literally has nothing to do with the proposed challenge.

  • P
    Moustafa essam•550
    @moustafaessam
    Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud that I was able to make the content of each block using only react props

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

    None for this project

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

    None for this project

    Testimonials grid section

    #react#typescript
    1
    Luan Barcaça•600
    @barcaca
    Posted 5 months ago

    Looks great! Just missing the bg-pattern to make it even better.

  • P
    Feng•380
    @niuguy
    Submitted 5 months ago

    vite+tailwindcss

    #vite#tailwind-css
    1
    Luan Barcaça•600
    @barcaca
    Posted 5 months ago

    The solution looks great! Just a suggestion: changing the font to match the one from the challenge would help align the design even better.

  • Momonkuei•180
    @Momonkuei
    Submitted 5 months ago
    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?

    nothing

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

    nothing

    Cutting practice

    #vue#tailwind-css
    1
    Luan Barcaça•600
    @barcaca
    Posted 5 months ago

    Look good!

  • Haiying Liao•10
    @HaiyingLiao
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of achieving a perfect replication of the design. Every element, from the layout to the smallest details, closely matches the original design, showcasing my attention to detail and commitment to quality.

    Additionally, I am proud of my implementation of the DRY principle. By thoroughly analysing the design, I was able to create reusable components and streamline my code, ensuring consistency and reducing redundancy throughout the project.

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

    One of the main challenges I encountered was integrating multiple fonts using Next.js. I overcame this challenge by thoroughly reading the Next.js documentation, which provided detailed guidelines. By following these best practices, I was able to successfully implement the required fonts.

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

    I would appreciate advice on improving my use of semantic HTML. While I have a good understanding of basic semantic elements, I am eager to learn more about best practices and advanced techniques for structuring HTML to enhance accessibility, SEO, and maintainability. Any insights or resources you can share would be incredibly valuable for refining this aspect of my project.

    Responsive recipe page using Next.js and TypeScript

    #next#typescript#tailwind-css
    1
    Luan Barcaça•600
    @barcaca
    Posted 5 months ago

    Your project looks really good!

    A suggestion to improve the use of semantic HTML would be to consider using <ul>/<ol> and <li> tags instead of <div> and <p> elements for the list of instructions/ingredients. Since you are presenting a sequence of steps, an <ol> (ordered list) would make more sense, helping with the accessibility and clarity of the content for screen readers.

    For example:

    <section>
      <h2 className={`${young_serif.className} subtitle`}>Instructions</h2>
      <ol className="list-decimal pl-5">
        {dummyInstuctions.map((item, i) => (
          <li key={i} className="mainTextStyle mb-2">
            {item.name}: {item.content}
          </li>
        ))}
      </ol>
    </section>
    
    

    Additionally, for the nutrition section, using a <table> could be a good alternative since the data is tabular in nature (name and nutritional value).

    Overall, excellent work!

  • NPUNITH62•60
    @NPUNITH62
    Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I’m proud of implementing responsiveness and hover effects to improve user interaction. The code is clean, and accessibility is prioritized.

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

    Ensuring the design was fully responsive across different screen sizes was a challenge, but flexbox and media queries resolved it.

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

    I would like help with optimizing page load speed using techniques like lazy loading and performance tuning.

    Frontend Mentor - Social links profile

    #react
    1
    Luan Barcaça•600
    @barcaca
    Posted 5 months ago

    Really great job!

  • Henrique Barros•60
    @henriquesbarros
    Submitted 5 months ago

    Blog preview card using tailwind

    #tailwind-css#next
    1
    Luan Barcaça•600
    @barcaca
    Posted 5 months ago

    Ficou muito bom mesmo! Está bem estruturada, clara e eficiente. Ótimo trabalho!

  • Nathan Katshi•190
    @iam-inath
    Submitted over 1 year ago

    Frontend Mentor | QR code component

    #sass/scss
    1
    Luan Barcaça•600
    @barcaca
    Posted 8 months ago

    Both the website and github are down.

  • P
    Thomas TS•1,520
    @ttsoares
    Submitted over 1 year ago

    NextJS, Tailwind, React Hook Forms, react-map-gl

    #next#tailwind-css
    1
    Luan Barcaça•600
    @barcaca
    Posted over 1 year ago

    I have two feedback option:

    Option 1:

    <div class="text-[7.5rem]/[110px]">
     Your text here.
    </div>
    

    This option seems to attempt setting both the font size and line height directly.

    Option 2:

    <div class="text-[7.5rem] leading-[3rem]">
      Your text here.
    </div>
    

    This option is more aligned with Tailwind CSS conventions. It separates the font size .text-[7.5rem] and line height .leading-[3rem]

    I would suggest referring to the official Tailwind CSS documentation on Font Size and Line Height. This will ensure a consistent and well-supported implementation.

    I hope you found this helpful

  • Catalina Arriagada•10
    @catalina-arriagada
    Submitted over 1 year ago

    Responsive Results/Summary Component SASS

    #sass/scss
    1
    Luan Barcaça•600
    @barcaca
    Posted over 1 year ago

    Great job on completing the challenge!

    It seems that the desktop version is not displaying correctly because you set the minimum width (min-width) to 1440px

    Here are a few suggestions to enhance your code further:

    • Your media query for the screen width seems to be set for larger screens. Consider adjusting it to @media screen and (min-width: 796px) for better responsiveness.
    .container {
        @media screen and (min-width: 796px) {
            /* Styles specific to larger screens */
        }
    

    -Remove margin-left and add margin-inline: auto:

    .container .summary {
        border-radius: 32px;
        /* Remove margin-left and add margin-inline:auto */
        margin-inline: auto; /* Centering horizontally */
    }
    
    .container .results .circle {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        /* Remove margin-left and add margin-inline:auto */
        margin-inline: auto; /* Centering horizontally */
        background: linear-gradient(hsl(256, 72%, 46%), hsla(241, 72%, 46%, 0));
    }
    

    This adjustment ensures that the elements are centered horizontally without using margin-left. The margin-inline: auto property is a shorthand for setting both margin-left and margin-right to auto, which is commonly used for centering block-level elements

    Good luck with your coding, and keep up the good work!

  • Pamella•20
    @PamellaMoraes
    Submitted over 1 year ago

    Html5 Css3 Flexbox Media Queries

    2
    Luan Barcaça•600
    @barcaca
    Posted over 1 year ago

    Parabéns por concluir o desafio!

    Aqui estão algumas sugestões:

    • Você tem código repetido no responsive.css para a regra de media query (max-width: 768px) . O bloco de estilo dentro desse bloco de mídia está repetido duas vezes.

    • Considere escolher nomes de classes mais descritivos. Por exemplo, em vez de verde e branco, use nomes que descrevam o conteúdo ou a finalidade desses elementos. Por exemplo, você poderia usar algo como imagem-fundo e conteudo.

    • Considere evitar o uso do caractere "ç" em classes e IDs no CSS e HTML. Embora seja tecnicamente possível, é uma prática comum evitar caracteres especiais, como acentos.

    • Seu uso de media query parece estar correto, mas há redundâncias nas regras. Concentre-se em modificar apenas o necessário para a adaptação do layout, evitando duplicações de código. Aqui está um exemplo para simplificar:

    @media screen and (max-width: 768px) {
        #container {
            flex-direction: column;
        }
    
        .verde, .branco {
            width: 100%;
            border-radius: 10px;
        }
    
        .verde {
            height: 250px;
        }
    
        .branco {
            height: 400px;
        }
    
        .btn-compras {
            margin-top: 5px;
        }
    }
    

    Essa abordagem reduz a duplicação de código, mantendo a adaptabilidade do layout para telas menores.

    Mandou bem, continue assim!

  • Lehlohonolo Jeremia Motaung•70
    @J3r3mia
    Submitted over 1 year ago

    Product preview card component

    #accessibility
    1
    Luan Barcaça•600
    @barcaca
    Posted over 1 year ago

    Nice work on the challenge!

    For a cleaner solution, wrap both image-container and card-content in a parent div. Apply the border-radius to the parent div. Example:

    HTML

    <div class="parent-container">
      <div class="image-container">...</div>
      <div class="card-content">...</div>
    </div>
    

    CSS

    .parent-container {
      border-radius: 10px; /* Adjust as needed */
      overflow: hidden;
    }
    

    The overflow: hidden; property hides any content that goes beyond the rounded corners set by border-radius: 10px; in the .parent-container. Feel free to remove border-radius from other CSS properties for a cleaner look.

    Great work!

    Marked as helpful
  • Brayden Williams•260
    @redstar504
    Submitted over 1 year ago

    Quick order summary implementation

    1
    Luan Barcaça•600
    @barcaca
    Posted over 1 year ago

    Hello,Great job on completing the challenge!

    I have a suggestion:

    • Consider changing the color of the a tag with the class "atribution" for better contrast accessibility.
    • Adding a hover effect to both a tags and button would enhance user interaction.

    These adjustments aim to improve accessibility and user experience.

    Keep up the good work!

  • Rrashdi•130
    @Rrashdi
    Submitted over 1 year ago

    product-preview-card-component-main

    1
    Luan Barcaça•600
    @barcaca
    Posted over 1 year ago

    Hello, Great job completing the challenge!

    A suggestion:

    • Consider adding display: flex; and justify-content: center; to the button tag. In this case, by setting justify-content: center; on the button, you ensure that its content (text and icon) is horizontally centered within the button.

    Keep up the great work!

    Marked as helpful
  • De122•20
    @De122
    Submitted over 1 year ago

    Result-Summary-Component

    1
    Luan Barcaça•600
    @barcaca
    Posted over 1 year ago

    Hello, Great job on the challenge!

    I have some feedback to share.

    • I suggest switching the margin-top to margin-block for the button tag. This would create space at the top and bottom, improving the mobile layout.
    • Also, adding the hover effect using this CSS code, will create an appealing effect on the button.
    button:hover {
      background: linear-gradient(hsl(252, 100%, 67%), hsl(241, 81%, 54%));
    }
    

    Keep up the good work!

Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub