
Full-stack note-taking app with React and Inertia
Design comparison
Solution retrospective
This application was my dream for a long time. I have hundrends of notes and links scattered around dozens of text files, completely disorganized. Every time I need the syntax of a React hook, a git command, bash command, Laravel syntax, whatever it is, I had to look around my files forever or go online and search on Google in a hope to find it. No more!
In this app, I used Inertia for the first time. I have already used Laravel before many times, but I could not imagine that it would be compatible with React in such astonishing way. Basically, I get all Laravel's rich backend functionality at the same time with React frontend in one app!
Now, what I am proud of: 1) Security and anthentication. 2) Password reset with email. 3) Database secure and efficient queries (it loads a little sometimes, but mind you, I hosted it on a cheap shared hosting and it still does really well!). 4) Custom loader. 5) Skeleton animation with infinite scrolling. 6) Optimized search with debounce. 7) Automatic locale setup on initial page load (Laravel is really great).
I am really proud of this app, I really love it and I am going to use it a lot. From now on, I wanna use Inertia for my professional projects, I didn't not expect that it would be so cool.
What challenges did you encounter, and how did you overcome them?I have faced multiple challendges as I was not familiar with Inertia at all. First, Inertia docs are very scarce, they don't cover many edge cases, so I had to Google quite a lot.
- Implementing infinite scrolling was painful as the WhenVisible component is not easy to set up. 2) Localization was hard, I had to write a custom React hook and create translation json files for that. 3) It took me a while to figure out how to use preserveState and preserveScroll in different situations as the note list jumped back up when I selected another note. 4) Note list didn't update when I saved or updated a note, I had to use useEffect to refetch the notes when a session flash message's id changes. 5) It was hard to implement font switching while keeping the number of loaded files lean. 6) Shared hostings don't have enough power to compile Tailwind 4.0 and Vite 6 as they use Rust rayon multithreads (I luckily happen to know it because I worked with Rust and rayon before), so I had to compile them locally before uploading to the hosting.
There were many more challenges, but I finished it and it works now. I am very happy with it))
What specific areas of your project would you like help with?Just try it out (just click "try it out" button on the login form if you don't wanna sign up, which I totally get) and tell me what you think about it))
Community feedback
Please log in to post a comment
Log in with GitHubJoin 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