Intro section & dropdown nav with React, TypeScript and Material UI
Solution retrospective
Hi FEM community! 👋🏻 So happy I can finally share my solution to this challenge!
I wanted to pick a challenge in which I could use Material UI to get more familiar with the library (it's used at my work in which I recently started as a part time Junior dev 🎉), while keeping on practicing with TypeScript. I was reluctant about using MUI at first, but it ended up being the least challenging part of the project, and fun.
- What did you find difficult while building the project?
▪️Regarding the techniques I chose: definitely using React Context in combination with TypeScript. I don't regret using context, but I thought about ditching TS for a second here. 😂 I'm glad it eventually worked out, but as I sometimes wonder with TS, I'm not sure it was worth all the headache.
▪️Regarding the project requirements: coming up with the logic to create the nav buttons dynamically and with the correct sub items (or lack thereof), plus the behaviour of all arrow icons depending on the state of the clicked drop-down (open/closed). I wanted everything to be dynamic and the least redundant possible, so I spent a lot of time thinking about how to render all this conditionally.
-Which areas of your code are you unsure of?
I'm actually not sure if the Layout component serves a real purpose. I kind of replicated this from the MUI tutorial I followed prior to starting the project, but in fact I could have probably done without it.
Also, I find it a bit annoying that if I click on a button with a dropdown in the navbar while I already had another dropdown open, it takes a second click to open the dropdown because the first click is used to close the previous dropdown. In the sidebar drop-downs, I don't have that issue (the MUI component used there is different than the one in the navbar) but in my solution it's not possible to keep both sidebar drop-downs open simultaneously. I did a few attempts to try and change this behaviour, but in the end decided to leave it as it is for now.
-Do you have any questions about best practices?
Not regarding this specific challenge but I'm all ears for any advice, of course!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @ApplePieGiraffe
Hi, Amélie! 👋
Well done on this challenge! 👍 Your solution looks good and it sounds like you learned a lot while completing this challenge! 😄
I don't have much experience with Material UI so I'm afraid I can't be of much help there, but I have a few small tips to improve your solution which are,
- Using link elements for the items in the dropdown menus in the header of the page.
- Adding a max-width to the header element to prevent it from becoming too wide on larger desktop screens.
- Adding some more descriptive
alttext to the hero image (as "hero" doesn't quite describe the image's content or purpose). 😅 - Adding a little bit of space between the content of the page and the edges of the screen in the tablet view of the site.
- Adding a favicon to your site. There should be one in the free starter files that you can use. 😉
- More of a nitpick, but the "Login", "Register" and "Learn more" elements would likely be links, not buttons, as they would take the user to another page when clicked. 😅
Hope you find these suggestions helpful. 😊
Keep coding (and happy coding, too)! 😁
Marked as helpful
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord