Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted 3 months ago

Full-stack note-taking app with React and Inertia

laravel, tailwind-css, react
Ilya Andreev•880
@NeoScripter
A solution to the Note-taking web app challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


What are you most proud of, and what would you do differently next time?

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.

  1. 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))

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on Ilya Andreev's solution.

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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit all CSS, SCSS and Less files in your repository.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.

How does the JavaScript validation report work?

When a solution is submitted, we use eslint to run an automated check on the JavaScript code.

The report picks out common JavaScript issues such as not using semicolons and using var instead of let or const, among others.

The report will audit all JS and JSX files in your repository. We currently do not support Typescript or other frontend frameworks.