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
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.
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:
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:
Any suggestions from fellow developers on how to improve my project and code is highly appreciated! Thanks!
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!
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 :)
feedback is welcomed
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 :)
Any advice is welcome
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 :).
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.
I just completed my first React project Any tips I could use to improve, please I am all ears.
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.
Hi there! 👋 This is my solution for the challenge. 🚀
<card> components.Built with:
Any suggestions on how I can improve are welcome!
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:
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.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!
<Component :is="component" > for mutating the steps componentWhat i'll be trying to implement:
<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...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
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.
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! :)
Hi, Eileen!
I reviewed your solution after completing my own and found it to be really good! I noticed a few things, such as:
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(" ")
Hey!
I have a few suggestions that you might find useful:
position: absolute.div that has an img inside it, with alt text that would describe the action.main tag inside your body instead of a div.Please let me know if my suggestions aren't helpful :)
Hey there,
I have a couple of suggestions:
I really liked your transition to a final component. Nicely done!
