I have been familiar with HTML, CSS and JS basics for a while. A few weeks ago I started learning React and I came to the conclusion that building my own website is a good idea while studying the course and watching other tutorials.
Certainly there are some bugs and mistakes here and there, but I managed to make it a responsive website (mobile-first approach). There are random texts and images. One of my hobbies is trading currencies (Forex) so I decided to start building a signal website. I’m not using jQuery, only React. JSX is pretty easy to learn but it takes time of course.
Now, since the front-end part is almost done, I will start learning about the back-end. I will start with Node.js, Express then Mongo. Then I can officially become a full stack MERN developer. For this website, after taking a few courses and tutorials, I will implement a user dashboard (signup, login, signout, profile settings, user dashboard) and will try using an API too. This sounds a bit overwhelming at first and it’s going to be a lot more difficult than the front-end part, but I really want to showcase a full-blown app. So I will start working on this…
What do you think so far? I look forward to your feedback and criticism.
Ah yeah! I will use the hamburger menu in my next project. But thanks for reminding me.
Here, I deliberately used this scrolling navigation bar to showcase something different. I set the opacity on the left and right hand side to let users know that you can scroll for more menu items. And I made the Sign Up button appear next to the list items when you scroll down.
If you go on the official React website on your phone (portrait mode), you’ll see something similar on the top I think, I got the code from there.
The menu does look a lot better when emulating a phone. Not totally convinced about the UX though, even with the fade it isn’t super clear that you can scroll the nav.
I missed that the cursor was a pointer on buttons and some hover effects over buttons, it’s a small thing but something you expect to see. Also I would get better images if you are going to show it but other than that it’s a great project to show for knowing React, I wish I had more free time to put something like that together.
Hey man, thanks for the feedback!
You’re right, I’ll get these done as well. Didn’t bother finding better pictures yet.
You should slowly start a building a similar website, just to showcase what you can do.
It’s mainly the discoverability of the links I worry about. I think the overflow pattern and actual menu usability is pretty good on mobile devices. If the overflow box always cuts off the links and it’s very obvious that there is more content to the left or right, then using an overflow pattern isn’t a bad idea.
The hamburger menu isn’t really considered great UX either. The only reason I mentioned it was that on desktop the overflow didn’t look great. But it’s obviously not meant for desktop navigation.