MERN STACK

FRONT-END
BACK-END
DEVELOPER
AGENDA

WEB Fundamentals

React Library

Next.js Framework

Database

2
WEB
FUNDAMENTALS
HTML
CSS
JAVASCRIPT

S O U R CE : YO U T U B E

ELZERO WEB SCHOOL

C LI C K HE RE
REACT
LIBRARY
Com ponents Basics

• JSX: JSX is a syntax extension for JavaScript that allows for the creation of React elements in a familiar
HTML-like format, making it easier to visualize the structure of UI components.
• Props vs State: Understanding the distinction between props and state is crucial for managing data and
passing information between React components effectively.
• Conditional Rendering: Learning how to conditionally render components based on certain conditions or
states is a fundamental aspect of building dynamic user interfaces.
• Composition: Composing components by nesting them within one another allows for the creation of
R EACT
complex FUNDAMENTAL
UI structures S
and promotes reusability.
Com ponent Li fe C ycle

• CLI Tools: Familiarizing with command-line interface tools for React development is essential for
efficiently creating, building, and managing React applications.
• Lists and Keys: Managing lists and keys in React components is crucial for rendering dynamic data and
optimizing performance.
• Refs: Understanding and utilizing refs is important for accessing and interacting with DOM elements in
React applications.
• Events: Handling events in React, such as onClick and onChange, is fundamental for creating interactive
user experiences.
State Management

• Context: Context provides a way to pass data through the component tree without having to pass props
down manually at every level, making state management more efficient.
• High Order Components: HOCs are a powerful pattern in React for code reuse, allowing logic to be
shared across multiple components.
• Routers: Learning how to implement routers in React applications is essential for creating multi -page web
applications and managing navigation.
Hooks: Understanding and utilizing hooks such as useState, useEffect, useCallback, useRef, useMemo, and
useReducer is fundamental for managing state and side effects in functional components.

6
REACT FULL
COURSE

SO U R CE : YO U T U B E

BRO CODE : CL ICK HE RE

S O U R CE : U D E M Y

JONAS : CL ICK HE RE
Advanced React Concepts
State Management Libraries
• Redux / Toolkit: Understanding and implementing Redux, along with its
modern toolkit, is crucial for managing complex state in larger applications.
Advanced UI and Styling
R EACT FUNDAMENTAL S
• Styled Components: Styled Components allows for the creation of styled
React components using tagged template literals, promoting component -
based styling and theming.
• Tailwind: is a popular CSS library for styling React components, offering
powerful styling capabilities and theming support.
Testing and API Calls
• React Testing Library: Learning how to use React Testing Library for
testing React components ensures the creation of robust and maintainable
test suites.
• Jest: Jest is a delightful JavaScript testing framework for unit testing React
applications, providing a seamless testing experience.
API Calls: Understanding how to make API calls from React applications using
libraries such as Axios, SWR, react-query, and superagent is crucial for
integrating with backend services.
8
REDUX️
SO U R CE : D O CU ME N TAT I ON

LEARN ONLY FROM

DOC TO BE UPDATED
CL ICK HE RE

TAILWIND
SO U R CE : D O CU ME N TAT I ON

LEARN ONLY FROM

DOC TO BE UPDATED
CL ICK HE RE
NEXTJS
FRAMEWORK
Next.js Fundamentals
• Next.js: Next.js is a popular React framework that provides features such
as server-side rendering, static site generation, and API routes, offering a
powerful and flexible environment for building web applications.
Advanced Topics and Frameworks
• R EACT FUNDAMENTAL
Shadcn:Beautifully S components that you can copy and paste into
designed
your apps. Accessible. Customizable
Advanced Form Libraries
• Vite: Vite is a fast build tool that significantly improves the frontend
development experience, offering features such as instant server start and
lightning-fast hot module replacement.

11
NEX️TJS
COURSES

Start with this course : Youtube Link

Then you should continue learn from Documentation
, to learn advanced topics : Documentation Link

12
Nodejs
Expressjs
MongoDB
Nodejs | Expressjs Fundamentals
• Nodejs: Node.js is a JavaScript runtime built on Chrome's V8 JavaScript
engine.
• Expressjs: Express is a minimal and flexible Node.js web application
framework that provides a robust set of features for web and mobile
applications. APIs.
R EACT FUNDAMENTAL S
Database Fundamentals
• MongoDB: MongoDB is a source-available, cross-platform, document-
oriented database program. Classified as a NoSQL database product,
MongoDB utilizes JSON-like documents with optional schemas. MongoDB is
developed by MongoDB Inc. and current versions are licensed under the
Server Side Public License.
• postgreSQL: PostgreSQL, also known as Postgres, is a free and open -source
relational database management system emphasizing extensibility and SQL
compliance. Go into Documentation
• GraphQL : GraphQL is an open-source data query and
manipulation language for APIs and a query runtime
engine. GraphQL enables declarative data fetching where a client can specify
exactly what data it needs from an APIPostgreSQL, Go into Documentation

14
BACKEND
COURSES

Nodejs and Expressjs : Youtube course

MongoDB : Youtube course
Full Cours "Udemy" : Jonas Course

15
THANK YOU
Osama Zinhom Sen ior Software Engineer

Book a consultation for 30-45 min

Contact us via WhatsApp Contact

16