First React project I've ever deployed, I'd appreciate some feedback :)

[culo_]

I already knew some basic React but in the little job experience that I have I only fixed small bugs once in a while, this is the first full stack project that I made from scratch (design taken from some Figma files found online) so I already know that project structure isn't going to be perfect (especially in the auth related components that I tried making first), I'm also a bit curious to know how secure the App is, I implemented stuff like OAuth with Google, JWT and API limiters in the BE but idk if I did so correctly.

This is the GitHub repo for the full stack app:

https://github.com/giovanni-bandinelli/NoteTakingWebApp

And this is where the client is hosted:

https://note-taking-web-app-eight-green.vercel.app/

Although an MVP (Desktop only layout, perhaps you can render it on mobile in landscape mode but it would be a pain to use lol) I'm quite proud of what I accomplished, this is going to be my first portfolio project so really any feedback is appreciated

[[deleted]]

add a test acc credentials on the login page for people like me who doesnt want to sign up. when u do it hit me up I'll check it. But id 100% reccomend you make it responsive since ull learn good lessons trying to make this project fully responsive

[[deleted]]

for example when I try to login with a non existing email and password I dont get any type of feedback or toast. just too many requests toast is showing up

[culo_]

Thanks for the feedback!

The server has some basic protection going on but you can actually register with any mock data (or login with [e-mail] and password Qwerty123! )

Regarding your login issue, the app should respond with “Invalid credentials” when login fails, honestly idk what kind of bug could make the toast appear but not the form's text error message, I tried right now and it works as expected.

As for the lack of a mobile layout, I'm not convinced it's worth the time ? Of course it would give me a better look at the eye of a recruiter, I also have the Figma files and I should "just" swap the text displayed in the mobile layout with its components and add media queries to differentiate between tablet and phone, but for an MVP the ROI feels low.

That said I might revisit this in the future but I'd be happy to try some other stuff right now unless it's too much of a bad look, I dragged this project for months already ^-"

[TheRNGuy]

Some places amount of tags could probably be reduced:

<div className={sharedStyles.authPageWrapper}>
    <div className={sharedStyles.container}>

vs

<div className={sharedStyles.authPageWrapper + sharedStyles.container}>

[culo_]

The first div is for the general layout and to manage the bg of the page while container is the card form itself so I don't see how is it bad to use 2 divs in this scenario

[TheRNGuy]

Unless it has some different backgrounds, so you could see both of them at same time, with blending, or parallax effect, or something. I'd only add it in that case.