My MERN Learning Roadmap: React, Next.js, Supabase, Prisma and DSA Without Trying to Learn Everything at Once

My first rule is simple: React should not hide weak JavaScript fundamentals. I am working through control flow, functions, arrays, objects, scope, closures, modules, asynchronous JavaScript, promises, async/await, DOM concepts and modern ES features. I also practice output-prediction problems because they force me to understand what the language is actually doing.

After JavaScript, I am focusing on components, props, state, events, forms and the mental model behind rendering. I want to understand when state is necessary and when normal variables or server data are enough. I am also practicing reusable components instead of making every page one large file.

I am using this portfolio migration as one of my small Next.js projects. It lets me practice the App Router, layouts, static generation, metadata, localized routes and the difference between Server and Client Components. That feels more useful than building only tutorial counters or to-do lists.

For the MERN side, I will move into Node.js and Express after the frontend fundamentals are stable. The goal is to build REST APIs, authentication, validation, error handling and authorization rather than only learning Express syntax. MongoDB and Mongoose come here because I want to understand document modelling in contrast with the relational database work I already know from MySQL.

I also want experience outside the strict MERN stack. Supabase is useful for quickly building projects with PostgreSQL, authentication, storage and realtime features. Prisma is useful because it gives a typed data-access layer and exposes me to a different database workflow than Eloquent.

I do not plan to mix every tool into every project. I would rather build one small project with Supabase, another with Prisma and PostgreSQL, and a more traditional MERN project with MongoDB. That way I can compare the trade-offs instead of memorizing APIs.

I do not want DSA to become a separate subject that I study for interviews and immediately forget. I am planning regular practice alongside development: arrays, strings, hash maps, stacks, queues, linked lists, trees, recursion, sorting, searching and basic dynamic programming. The goal is problem-solving speed and better reasoning, not solving hundreds of problems only for a number on a profile.

My learning projects will become gradually more complete. Each one should introduce only a few new concepts so I can understand the code instead of copying a giant starter project.