Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • arey• 350

    @arey-dev

    Submitted

    This is my first time building a project using React from Front End Mentor. If you have any tips on how I can improve my work, It'd be appreciated.

    And if you can't see the live preview, please tell how to deploy a vite app on Github Pages :D

    Advice Generator App build with React

    1

    Katja Danilova• 340

    @katjadanilova

    Posted

    Hey there! Yep, I can't see anything. You might want to try deploying it on Vercel - I have found it easier with react apps.

    Marked as helpful

    0
  • Nyrell Leonor• 400

    @nyrellcl

    Submitted

    This was built using React and SCSS/SASS for styling. This project was very good practice for working with react hooks, especially useState(). Utilized Git and Github for version control and deployment.

    User story:

    • When the user clicks on the "Mark all as read" the notification should default to 0, in this case I decided to remove the element whenever the user clicks "Mark all as read"

    Added feature: Initially, the challenge had one interactive feature which was the "Mark all as read" button. However, I wanted to improve on this design and decided to add a "View Message" feature for when the user received a notification that someone has privately messaged them. This could benefit the user experience by:

    • Allowing increased privacy from individual messages they receive
    • Are able to toggle between show and un-show message to quickly view and un-view the message. Both for privacy and efficiency.

    Any suggestions from fellow developers on how to improve my project and code is highly appreciated! Thanks!

    Interactive Notifications Page built using React and SASS/SCSS

    1

    Katja Danilova• 340

    @katjadanilova

    Posted

    Hi, Nyrell!

    Well done! I liked it that you added an extra feature and your neat HTML structure :)

    I think your implementation would benefit from adding a background color for the whole page, so that the notifications container stands out more. Additionally, you missed some hover states - bold texts should change color when hovered over.

    When I implemented this project, I also made it more challenging by adding the ability to interact with each notification (or ´article´ in your case) - so that the user can read them one by one. I learned a lot from doing this, so you may want to give it a try too.

    Hope it helps!

    Marked as helpful

    0
  • Katja Danilova• 340

    @katjadanilova

    Posted

    Hi, Vivek!

    I really liked some of your design choices; rolling dice in particular was nicely done!

    I noticed that the HTML and Accessibility report had some complaints. This is because it is expected to have button texts and image descriptions, so that people who rely on screen readers can understand what is happening on the screen. To make it accessible for a screen reader, you could use a div instead of a button and add aria-label="Get another quote".

    Additionally, on hover, you could add a glowing effect behind the dice container, as it was offered in the task.

    Hope it helps :)

    0
  • Katja Danilova• 340

    @katjadanilova

    Posted

    Hey there!

    That's a great start! Your design implementation looks good. There is a minor issue in mobile view (the Kimberley Smith block is misaligned with the text), and some hover states are not implemented as specified in the task.

    You could also add functionality, as the task requires. The text "Mark all as read" could be a button that changes the notification state, and clicking on each notification could also change its state. The number of unread notifications should also be updated accordingly.

    I hope that helps :)

    Marked as helpful

    0
  • Katja Danilova• 340

    @katjadanilova

    Posted

    Hey, Sebastian!

    Congratulations on completing your project!

    I suggest removing the container height as it causes issues with longer quotes; gaps between elements can disappear or elements can be superimposed on each other.

    You could also consider adding a loading element to your app, as the API has a noticeable loading time. Of course, this wasn't part of the initial task :).

    Marked as helpful

    1
  • Katja Danilova• 340

    @katjadanilova

    Posted

    Hey there!

    The design looks good and has been implemented according to the initial description - well done!

    I noticed that your design isn't mobile-friendly when I tested it with Google Developer Tools. It has no margins and the attribution is too low.

    1
  • Katja Danilova• 340

    @katjadanilova

    Posted

    Hey there!

    The design looks good and has been implemented according to the initial description - well done! However, I would suggest not wrapping the advice-container in a spinner. Because both the spinner and the container are visible when the spinner is active, which is not the expected behavior. Additionally, the container jumps up and down every time the spinner appears or disappears.

    Instead, you could have a separate div that wraps both the container and the spinner, and shows one or the other depending on the isLoading state.

    Marked as helpful

    1
  • Arby• 170

    @mobalti

    Submitted

    Hi there! 👋 This is my solution for the challenge. 🚀

    • I have added a Light and Dark Mode feature and a theme switch component.
    • To represent the data, I created an array of objects that were then mapped to individual <card> components.

    Built with:

    • React JS
    • CSS Modules
    • Open Props
    • Vite

    Any suggestions on how I can improve are welcome!

    Notifications page using ReactJS and Open Props + (Dark/Light Mode)

    2

    Katja Danilova• 340

    @katjadanilova

    Posted

    Hi!

    Your solution looks really good. Light and dark mode switch is a very nice additional touch to the whole design, and your dark mode colours look neat!

    Visually, I haven't noticed any problems, and my eye just caught some issues in the accessibility report. Here is an idea:

    • I believe your aria-live="polite" is the one that gives the first error in the report. Here is an article about using this property: https://bitsofco.de/using-aria-live/, and I am not sure you have a good use case for it. It might be that you rather want to have a dynamic value for aria-label that would say "Switch to light theme" or "Switch to dark theme" respectively.

    Marked as helpful

    0
  • Lucas Matheus• 400

    @Lukiticas

    Submitted

    Oh, how i missed you guys <3

    So, i started to learn vue this week and nothing would help more than building a real app sooooo here i'm!!

    It was a little difficult because i hadnt done something like this for a while, but vue and its systems made it easy!

    • i used pinia for storing user inputs and repopulating the components with them.
    • made a custom directive to handle the stepper logic
    • used vue <Component :is="component" > for mutating the steps component

    What i'll be trying to implement:

    • I tried to use <Transition name=""> tag to animate the transitions between steps change, but it was very buggy, it bet its something about the element getting its position absoluted and then its width shrinking making a mess...
    • i would love to add more steps...

    That was it! Hope you liked and please, please, please, i'm still learning so i would LOVE critics, opinions, tips and tricks envolving vue. See ya <3

    multi step form with Vuejs and dark mode! <3

    1

    Katja Danilova• 340

    @katjadanilova

    Posted

    Hi, Lucas!

    Your animations are fantastic, they are elegant and perfectly match the design. I regret only not thinking of them myself :D.

    The only thing I noticed that is slightly off, is that the phone number field doesn't accept a "+" at the beginning of the number.

    1
  • Eileen dangelo• 1,600

    @Eileenpk

    Submitted

    This project involved creating a form for entering credit card details, using a mobile-first workflow and semantic HTML5 markup. I used CSS custom properties and Tailwind CSS to style the form and make it responsive to different screen sizes.

    The form included fields for entering the cardholder's name, card number, expiration date, and CVV code. I implemented validation for these fields, ensuring that the user could not submit the form with invalid or incomplete data.

    I used React.js to add interactivity to the form, allowing the user to easily input and edit their card details. This included formatting the card number as the user types it and displaying it on the credit card preview.

    Any feedback and or comments are very welcome, I'm always trying to hone my skills! :)

    Interactive Card Details Form- React, Tailwind, Vite

    1

    Katja Danilova• 340

    @katjadanilova

    Posted

    Hi, Eileen!

    I reviewed your solution after completing my own and found it to be really good! I noticed a few things, such as:

    1. inputs and button heights appearing shorter when errors are present (I'm not familiar with Tailwind, so I'm unsure of the cause) then when there are no errors;
    2. based on my short research, I discovered that bank card numbers can have up to 19 digits;
    3. expiration year in your solution can currently be in the past.

    I appreciated your method of formatting the card number. I came up with a slightly different one, and it's always enlightening to have alternatives :) here is mine: value.replace(/\s/g, "").match(/.{1,4}/g)?.join(" ")

    Marked as helpful

    0
  • Katja Danilova• 340

    @katjadanilova

    Posted

    Hey!

    I have a few suggestions that you might find useful:

    1. your picture element is outside the container, although it should rather be inside, and only button (in your case) to be position: absolute.
    2. Accessibility report requires buttons to have a label. So, in this case, it might be better to opt in for a div that has an img inside it, with alt text that would describe the action.
    3. Accessibility report also wants you to have a main tag inside your body instead of a div.

    Please let me know if my suggestions aren't helpful :)

    0
  • Katja Danilova• 340

    @katjadanilova

    Posted

    Hey there,

    I have a couple of suggestions:

    1. Your name verification expects a bit too long names. "Tom Saar" for example isn't accepted by your form, but is a proper name in my country.
    2. Bank card number can be as long as 19 digits, you have a limit for 16.
    3. CVC should have at least 3 digits, and your form accepts even with two.
    4. If CVC field has an error, MM/YY fields are misaligned.

    I really liked your transition to a final component. Nicely done!

    1