We may earn an affiliate commission when you visit our partners.
Sameh Manai

This course will involve building two advanced applications from scratch.

  • Project 1:

Read more

This course will involve building two advanced applications from scratch.

  • Project 1:

We will create a React application using TypeScript. We will set up React Router Dom 6 and establish a Redux Toolkit store with dummy data from a JSON file. Alongside this, we are going to define interfaces and create custom hooks to streamline data management and interaction. Configuration of a JSON server to handle the data will be included. Following this, we will integrate API calls and manage data in Redux Toolkit using createApi and useDataQuery. Additionally, we will implement search, filter, and sorting functionalities on the home page. Furthermore, we will perform cart actions such as adding items to the cart and getting the cart total, manage cart item component actions (increase and decrease quantity, clearing the cart, and remove items from the cart), and integrate animated notifications.

  • Project 2:

We will begin by configuring Express with MongoDB using Mongoose. We will emphasize secure user authentication by utilizing JWT, Bcrypt, and Express-Validator. Progressing, we will implement robust CRUD operations for the Story Model, ensuring seamless data management. By integrating Multer, we will enable effortless file uploads within the application. Shifting focus to the front-end, we will meticulously set up React (without TypeScript) with React Router Dom 6, enabling efficient routing within the application. Moreover, we will handle token authentication, manage error responses adeptly, and empower users to create stories with file uploads, enhancing interactivity. Finally, we will conclude the app by implementing update and delete functionalities for stories and incorporating author-based access control to maintain data security and integrity.

Enroll now

Here's a deal for you

We found an offer that may be relevant to this course.
Save money when you learn. All coupon codes, vouchers, and discounts are applied automatically unless otherwise noted.

What's inside

Learning objectives

  • Develop a shopping cart using react, typescript, and json server.
  • Manage state with redux toolkit.
  • Implement advanced features like search, filter, and sorting functionalities, and incorporate animated notifications.
  • Create a mern application enabling users to compose and explore original stories.
  • Implement secure user authentication and proficient token management.
  • Execute comprehensive crud operations, including seamless file uploads.

Syllabus

Introduction and Overview
Introduction
Apps Features Overview
Set up React with TypeScript, utilize React Router 6 for navigation and Redux Toolkit for state management, handle data seamlessly, implementing features like search, filtering, and data sorting.
Read more

Traffic lights

Read about what's good
what should give you pause
and possible dealbreakers
Covers the MERN stack, which is widely used for building scalable web applications, making it highly relevant for full-stack developers
Teaches React Router Dom 6, which is a modern routing library for React applications, enabling developers to build single-page applications with ease
Employs Redux Toolkit for state management, which simplifies Redux development and reduces boilerplate code, making it easier to manage complex application states
Utilizes JWT, Bcrypt, and Express-Validator for secure user authentication, which are industry-standard tools for protecting user data and preventing unauthorized access
Uses React without TypeScript in the second project, which may require learners to adapt their coding style if they are primarily focused on TypeScript development
Requires learners to set up Express with MongoDB using Mongoose, which may require learners to have prior experience with backend development and database management

Save this course

Create your own learning path. Save this course to your list so you can find it easily later.
Save

Reviews summary

Practical react & mern stack project building

According to learners, this course offers a practical and comprehensive guide to building React and MERN stack applications, focusing heavily on hands-on projects. Many appreciate the clear explanations, especially regarding complex topics like Redux Toolkit and JWT authentication. While some found the initial setup challenging, the course is widely praised for being up-to-date and providing production-ready code that is easy to follow and implement.
Code is high quality and reusable.
"The code provided in the course is clean and structured like it would be in a real production environment."
"I can definitely see myself using the patterns and code structure learned here in my own projects."
"The projects are built with best practices in mind, resulting in robust and production-ready applications."
"The quality of the code examples is a major plus; it's not just tutorial code but professional standard code."
Uses modern versions of libraries.
"It's great that the course uses React Router Dom v6 and modern Redux Toolkit features, making it very relevant to current practices."
"Unlike other courses, this one feels truly up-to-date with the latest versions of the frameworks and libraries used."
"I was looking for a course that uses current versions, and this delivered; the code isn't outdated."
"The instructor keeps the content current, which is essential in the fast-paced world of web development."
Concepts explained simply and effectively.
"The instructor explains complex topics like Redux Toolkit and authentication in a very clear and easy-to-understand manner."
"I really appreciated how the course broke down the setup process and backend development into manageable steps."
"Explanations are concise yet thorough, making it easy to follow along even with challenging subjects."
"The way concepts are presented helps in grasping the core principles quickly."
Learn by building real-world applications.
"The hands-on coding and projects are the strongest part of the course for me, allowing immediate application of concepts."
"Building two full applications from scratch really solidified my understanding of integrating different technologies like React, Node, and MongoDB."
"I found the practical nature of the course extremely helpful; it’s not just theory but actual implementation that you can use."
"The projects are well-structured and demonstrate how to build production-ready applications, which is invaluable for a developer."
Setting up projects can be tricky.
"The very beginning with the initial setup steps was a bit confusing and took some troubleshooting to get right."
"I struggled a bit with the initial configuration of the environment and dependencies before getting into the main coding."
"Setting up the different parts (React, Express, MongoDB) took longer than I expected, especially ensuring compatibility."
"A few more detailed steps or troubleshooting tips on the initial environment setup could be helpful."

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in React 2025: A Practical Guide with TypeScript & MERN Stack with these activities:
Review TypeScript Fundamentals
Reinforce your understanding of TypeScript syntax and features to prepare for building React applications with TypeScript.
Browse courses on TypeScript
Show steps
  • Review basic TypeScript syntax and data types.
  • Practice writing TypeScript functions and interfaces.
  • Work through online TypeScript tutorials.
Brush up on React basics
Solidify your understanding of React components, JSX, and state management to prepare for the advanced React projects in this course.
Browse courses on React
Show steps
  • Review React component lifecycle methods.
  • Practice building simple React components.
  • Work through online React tutorials.
Read 'Learning React, 2nd Edition' by Alex Banks and Eve Porcello
Deepen your understanding of React fundamentals and best practices by reading a comprehensive guide.
Show steps
  • Read the book cover to cover.
  • Work through the examples in the book.
  • Take notes on key concepts.
Four other activities
Expand to see all activities and additional details
Show all seven activities
Build a Simple To-Do App with React and TypeScript
Practice your React and TypeScript skills by building a simple to-do application, reinforcing concepts learned in the course.
Show steps
  • Set up a new React project with TypeScript.
  • Create components for adding, displaying, and deleting tasks.
  • Implement state management using React hooks.
  • Style the application using CSS or a CSS framework.
Write a blog post about Redux Toolkit
Solidify your understanding of Redux Toolkit by explaining its core concepts and benefits in a blog post.
Show steps
  • Research Redux Toolkit and its features.
  • Outline the structure of your blog post.
  • Write the blog post, explaining Redux Toolkit in simple terms.
  • Edit and proofread your blog post.
  • Publish your blog post on a platform like Medium or Dev.to.
Contribute to an Open Source React Project
Gain practical experience and contribute to the React community by contributing to an open-source project.
Show steps
  • Find an open-source React project on GitHub.
  • Read the project's contribution guidelines.
  • Identify a bug or feature to work on.
  • Submit a pull request with your changes.
Create a portfolio website showcasing your MERN stack projects
Showcase your skills and projects to potential employers by creating a professional portfolio website.
Show steps
  • Design the layout and structure of your portfolio website.
  • Implement the front-end using React.
  • Set up a back-end using Node.js, Express, and MongoDB.
  • Deploy your portfolio website to a hosting platform.

Career center

Learners who complete React 2025: A Practical Guide with TypeScript & MERN Stack will develop knowledge and skills that may be useful to these careers:
Frontend Developer
A Frontend Developer builds the user interface of websites and applications, focusing on the visual and interactive elements. This course helps build a foundation for this role by providing practical experience with React, a popular JavaScript library for building user interfaces. The course emphasizes the use of TypeScript and various state management techniques, preparing you to handle the complexities of large frontend applications. Furthermore, the projects in this course demonstrate proficiency in implementing crucial features like search, filtering, data sorting and managing user interactions, all of which are very important for a Frontend Developer.
Full-Stack Developer
A Full Stack Developer works on both the frontend and backend of web applications. This course is particularly helpful as it covers both aspects, working with React for the frontend, and Express with MongoDB for the backend. The course includes practical exercises in building full-stack applications with secure user authentication, file uploads, and CRUD operations across both the front and back ends. This experience can help a Full Stack Developer manage a diverse set of responsibilities and handle the full software lifecycle. The course also offers practice with essential skills, like token management, and implementing secure authentication, both of which are important for an effective full stack developer.
Web Application Developer
A Web Application Developer designs, develops, and maintains web-based applications. This course provides practical experience with common web development tasks such as setting up React applications and routing, managing data with Redux Toolkit, integrating APIs, and performing CRUD operations. The course also covers building a full stack application with both frontend and backend components. This provides a good background for a Web Application Developer who must work on all parts of a web-based application. The course also touches upon important skills such as user authentication and file uploads.
Software Engineer
Software Engineers are involved in the design, development, and testing of software systems. This course will be helpful for those pursuing software engineering, particularly for roles focused on web development. The hands-on experience with React, TypeScript, Redux Toolkit, and MERN stack technologies provides a good foundation for a Software Engineer who will be working on the full software development life cycle. The course's emphasis on creating full stack applications and implementing full CRUD operations helps one develop a strong understanding of designing and building robust software systems. Furthermore, the course's focus on important topics, such as user authentication and data handling, are important for Software Engineers.
JavaScript Developer
A JavaScript Developer will be well-served by this course as it provides hands-on experience with one of the most popular libraries for JavaScript, which is React, along with TypeScript. A substantial portion of the course is dedicated to building frontend applications with React and managing complex state using Redux Toolkit. This is very valuable for a JavaScript Developer who is often tasked with creating user interfaces. In addition to the frontend, the course covers backend development using Node.js, Express, and MongoDB, so a JavaScript Developer is able to handle full stack applications. The course further strengthens skills in areas like creating custom hooks and integrating APIs.
User Interface Engineer
A User Interface Engineer specializes in designing and developing the front-end of applications. This course helps build a foundation for this role by providing extensive practical experience in building UIs with React. The course emphasizes the use of TypeScript, custom hooks, and state management techniques using Redux Toolkit. User Interface Engineers often work with complex data and user interactions, and this course allows for practice in implementing features like search, filtering, and sorting. This course also covers important concepts related to user interactions and cart management, both of which are essential for a User Interface Engineer.
Application Developer
An Application Developer is responsible for designing, building, and maintaining applications. This course is beneficial for an Application Developer working with web applications. The course focuses on building two advanced applications that will provide a practical understanding of the overall application development process. This includes working with frontend technologies such as React and TypeScript, as well as backend technologies using the MERN stack. The course also provides practice in implementing and managing user authentication, file uploads, and full CRUD operations. Ultimately this training is valuable for anyone working as an Application Developer.
Web Developer
A Web Developer will build and maintain websites, and this course is directly relevant to that. The course covers important technologies including React for frontend development and MERN stack for backend. Through the creation of two advanced applications, a Web Developer will build familiarity working with routing, state management, and API integration. The course also covers important skills like user authentication, token management, and CRUD operations. These skills are important to the work of a Web Developer, who often will work with the full spectrum of web development.
Backend Developer
A Backend Developer builds and maintains the server-side logic and databases that power applications. This course helps someone who wants to move into a backend role, as it covers important backend technologies including Express with MongoDB using Mongoose. The course focuses on implementing secure user authentication using JWT, Bcrypt, and Express-Validator, as well as building CRUD operations, both of which are the job of a Backend Developer. This course also covers important topics like integrating Multer for file uploads, which is required for backend work, as well as securing endpoints.
Software Developer
A Software Developer will design, build, and maintain software systems. This course may be a good fit for a Software Developer, because it covers the full stack of technologies used in building modern web applications. The course includes experience with frontend technologies using React and TypeScript, as well as backend technologies with Node.js, Express, and MongoDB. The course also touches upon important skills like setting up and managing databases with Mongoose, implementing secure user authentication, and full CRUD operations. All of these skills are relevant to a Software Developer.
Database Administrator
A Database Administrator manages and maintains databases; this course may be useful for someone who wants to enter this field because of the emphasis on working with MongoDB using Mongoose. The course also provides practical experience setting up databases, performing CRUD operations, and securing endpoints. Though this course does not focus exclusively on database management, the experiences offered may be valuable to a Database Administrator. The course also works with file uploads and data management, which are both relevant to the work of a Database Administrator.
Systems Analyst
A Systems Analyst studies an organization's computer systems and procedures and designs information systems solutions to help the organization operate more efficiently. This course may be helpful for a systems analyst who is working with web application software. The course will provide an understanding of the technologies that make up the different parts of web applications, from the user interface to the database, and it also offers a practical understanding of application development. Furthermore, the course includes relevant topics such as user authentication and data management, which will help a Systems Analyst make more informed decisions.
Technical Consultant
A Technical Consultant provides expert advice on technology-related projects. This course may be helpful for a Technical Consultant who is working on web application projects. The course offers a good overview of building applications end-to-end. A Technical Consultant will be able to understand the full technical stack for web applications, including both frontend and backend technologies. Furthermore, the course goes into important aspects of application development such as data handling, user authentication, and implementing secure endpoints. All of this information will help the Technical Consultant in their role.
Technical Support Engineer
A Technical Support Engineer provides important technical assistance to clients or internal teams. This course may be useful for this role, as it offers a strong foundation in web application development. Even though the role might not directly involve developing applications, a Technical Support Engineer will have a better understanding of the technologies being used. For example, the course covers frontend technologies like React and backend technologies using the MERN stack. Furthermore, the course also covers topics like authentication and error handling, both of which are relevant to technical support.
Project Manager
A Project Manager is responsible for planning, executing, and closing projects. This course may be useful for a Project Manager who is in the technology field, or who has to manage technology projects. The course provides a general understanding of the full stack of software development from frontend to backend. This includes working with JavaScript libraries, databases, and user authentication. A Project Manager familiar with the technical aspects of the project may be more prepared to handle the requirements of the project.

Reading list

We've selected one books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in React 2025: A Practical Guide with TypeScript & MERN Stack.
Provides a comprehensive introduction to React, covering fundamental concepts and best practices. It's a valuable resource for understanding the core principles behind React development. While the course covers practical application, this book offers a deeper dive into the underlying theory. It is best used as additional reading to supplement the course material.

Share

Help others find this course page by sharing it with your friends and followers:

Similar courses

Similar courses are unavailable at this time. Please try again later.
Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.

© 2016 - 2025 OpenCourser