0% found this document useful (0 votes)
59 views37 pages

MERN

Mern stack road map

Uploaded by

Vetriselvan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
59 views37 pages

MERN

Mern stack road map

Uploaded by

Vetriselvan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 37

Error Makes Clever

Direct impact on Digital Impact Students placed Highest CTC


students globally in companies

5000+ 1.5M+ 30+ 15LPA

Advance Full Stack


Bootcamp
Get ready to land your first or next Dream IT Job

2025

www.errormakesclever.com
Error Makes Clever

About Full Stack Bootcamp

This Full Stack Program aims to upskill individuals to a level


where they can be confident in their skills and crack any
interview by learning current technology directly from industry
experts. As we focus on educating students by simplifying
tech content, their understanding tends to be high. This
provides them with the solid foundation required for any
developer to enter the field

Program Designed By
Agnel John D
Founder & CEO at Error Makes Clever

Agnel John, an ex-software engineer from


Accenture, founded Error Makes Clever to make
tech simple and unforgettable. He has been
featured in TED Talk MIT Anna University and
awarded Promising Tech Educator by Social Eagle

MIT Anna University Ex Accenture YouTube Awards Promising Tech Educator Creator for Change

Have been a speaker at: IIT Madras, MIT (Anna University), Karunya
University, and Kongunadu Engineering College

2 www.errormakesclever.com
Error Makes Clever

About Full Stack Bootcamp

Program Co-Designed By: Arjun


5+ Years of Software Engineering experience

Software Engineer at Infosys with 5+ years


of experience in full stack development

Rating: 4.9/5 for his teaching style and


subject knowledge

You will meet many more mentors along


the way in this 90-day journey, who will
support and guide you

2 www.errormakesclever.com
Error Makes Clever

Who will be your Mentor?


Our mentors have worked with the following companies. Having
served as Full Stack Web Developers in top giant companies,
they can share their invaluable knowledge directly.

Learn Full Stack Web Development from mentors who have worked with
companies like

4 www.errormakesclever.com
Error Makes Clever

Doubt Support

Co-Mentor Support:
Once you enter the program, a dedicated
mentor and co-mentor will be assigned to
you. You can contact your co-mentor
anytime you have questions or doubts
regarding the program through whatsapp or
our community platform.

Community Support:
We have a dedicated community platform
designed for you, where you can
communicate and collaborate with your
fellow cohorts and support each other. Your
doubts can be resolved instantly by fellow
members through our WhatsApp community
or the dedicated platform.

Mentor Support:
You can connect with your industry mentor
one-on-one anytime, based on their
availability. They will be like your next-door
tutor and friend.

5 www.errormakesclever.com
Error Makes Clever

Program Details

Duration 5 Month
Course
3 Month + 2 Month
Internship

Everyday 2 Hours
Learning We expect 2 hours of your
dedication daily

Support Lifetime
After Program Community support will
be provided.

Placement 100%
Assistance Our team will help you
with Linkedin, naukri
Resume & Job Hunting

Softskill Weekend
Training On alternative weekends,
you will be trained on
soft skills

6 www.errormakesclever.com
Error Makes Clever

Where our Students are working?


Our students are working in well-reputed MNCs and
fast-growing startups across the globe.

These are some of the companies in which our students are working.

People Consultancy

7 www.errormakesclever.com
Error Makes Clever

Hear from HR professionals


Recruiters are thrilled to hire top-notch talent from Error Makes
Clever, where we shape future-ready professionals.

Rakesh
HR at Handbuilt apps
(5.0)

As an HR Lead in an Reputed organization HandBuiltApps I want to express my


gratitude to Error Makes Clever for providing us well trained freshers candidate
especially in specific location were we won't get more resources for particular
skills and also they provide excellent coordination throughout the hiring
process.I would definitely Thank them for their continues support and
commitment to excellence.

I will definitely recommend other who are hiring freshers take help from them
because they are having very good skilled and knowledgeable candidate's.

HR Navin
Recruitment Specialist at Confidential
(5.0)

EMC - Error Makes Clever is a fantastic e-learning platform! Brother John makes
coding easy for everyone. I've met many training institute founders, and most of
them focus on their revenue and profits. But every time I talk to John, he’s
always focused on improving teaching and giving more value to students. Over
the past year, EMC has grown a lot and is now one of the best places to learn
coding and other skills. I’m really happy to work with them and share my
knowledge with all the students. In my opinion, it’s 100% worth joining. You’ll get
more value than you expect.

8 www.errormakesclever.com
Error Makes Clever

Modules Covered
What you will learn with us over the next 4 months

Module 1
Introduction to Full Stack Web Development

Module 2
Implementing HTML & CSS to Build Udemy Clone

Module 3
Mastering Tailwind CSS by Realtime Project

Module 4
Integrating JavaScript With Greenden E-commerce Project

Module 5
API Integration Techniques with Weather App Building

Module 6
React Mastery with Actodo Project

9 www.errormakesclever.com
Error Makes Clever

Modules Covered
What you will learn with us over the next 4 months

Module 7
Learn NodeJS & Express with Realtime Project

Module 8
Understand and Build Applications using MongoDB

Module 9
Develop Authentication in Your Application using Firebase

Module 10
Professional Placement Preparation

Module 11
Git and GitHub Mastery

Module 12
Capstone Project and Internship

10 www.errormakesclever.com
Error Makes Clever

Weekly Reward Program


Weekly Activities

Learn 2 Hours Everyday

Report to your Co-Mentor Everyday

Complete your weekly Task

Attend Live Class

Upload your Projects in Linkedin & GitHub

Upload your Projects in Linkedin & GitHub

Take up Weekly test

6000
Get a maximum reward worth 6,000
rupees during your program, based
on your weekly score.

11 www.errormakesclever.com
Error Makes Clever

Internship Reward Program


Internship Eligibility

Become a Top Performer of your Batch

Crack your Final Mock Interview

Get into Internship Program with Us

4000
Get a stipend between 1,000 to
4,000 rupees after the internship,
provided you complete the tasks.

You can get a maximum of 10,000 rupees


during this program as a Reward !

12 www.errormakesclever.com
Error Makes Clever

Internship Reviews

Mugundhan
"My experience has been great! Working on a real-time project for the first
time and being part of a two-member team was completely new to me.
Learning how to pull, merge, and push changes on GitHub, along with dealing
with conflicts, has been incredibly valuable. The practical skills I’ve gained,
along with the guidance from the mentors at Error Makes Clever, have really
boosted my confidence as a developer."

Yogapriya
"I recently completed a one-month (May 2024 - June 2024) MERN Stack
internship at Error Makes Clever Academy. I gained hands-on experience in
full-stack web development, focusing on building scalable web applications.
This internship has not only strengthened my understanding of modern web
technologies but also prepared me for my future career in tech. The real-
world projects and the support from experienced mentors were invaluable."

Sushmitha
"My internship experience working on a chat application project was
incredibly rewarding. With the guidance of my mentors, Yosuva and Arjun, I
got hands-on with the MERN stack and Tailwind CSS, improving my frontend
and backend development skills. Implementing real-time communication
using WebSockets and learning about hosting and security measures were
particularly beneficial. This experience has significantly boosted my
confidence and technical abilities."

13 www.errormakesclever.com
Error Makes Clever

Opportunities:
After completing our program, you have exciting opportunities:

Work in MNCs:
Join big companies and work on important projects with global exposure.

Startups:
Be part of a dynamic team where your ideas and work can make a big
difference.

Internships:
Get real-world experience, learn from professionals, and build strong
connections.

Freelancing:
Enjoy the freedom to choose your projects and work on your own terms.

Tutoring:
Share your knowledge with others, while strengthening your own skills.

14 www.errormakesclever.com
Error Makes Clever

Success Stories

Yogeshwari
“Before joining Error Makes Clever, I had trouble showcasing my skills on my
resume and felt anxious during interviews. I wasn’t confident with technical
questions and struggled with some areas. But the Bootcamp changed that.
The easy-to-understand teaching, weekly rewards, and helpful mock
interviews made a big difference. The support from mentors at companies
like Zoho and Infosys gave me the confidence I needed. Now, I cracked an
interview in TCS and got an job offer”

Amal josen
"I'm Amal Josen, coming from a mechanical background. Joining the EMC
program changed everything for me. I started building Instagram and Netflix
clones and shared my work on LinkedIn. This got the attention of recruiters,
leading to interviews. After 6+ months in an IT company, I shifted to
freelancing. EMC truly opened the door to these opportunities!"

Akash
I joined the FSD course at EMC, and it's the best decision I've made. I learned
everything from basics to advanced topics, and the mentors here are like
friends, making it easy to connect and clear doubts quickly. Agnel bro's
teaching is amazing—he not only teaches but also shows us how to learn on
our own with practical tasks. His LinkedIn and Naukri sessions were super
helpful, and the offline meet was a great experience where he answered all
our questions. This course is definitely worth it, and I recommend it to
anyone looking to enter the web development field.

15 www.errormakesclever.com
Error Makes Clever

Learn More about


Full Stack Web Development

Click this below link

Error Makes Clever - Your tutor friend

16 www.errormakesclever.com
Error Makes Clever

Get Ready to Build


+ Projects

01
Design a Portfolio Website Using HTML & CSS

02
Build the Reestar Restaurant Project with HTML & CSS

03
Create an Elegant Perfume Project with HTML & CSS

04
Develop a Udemy Clone with Responsive HTML,
CSS, and Tailwind CSS

05
Build a To-Do List App to Manage Your Daily Activities

17 www.errormakesclever.com
Error Makes Clever

06
Craft a Stylish Trip Advisor-Inspired Web
Interface with HTML, CSS, and Tailwind CSS

07
Launch the Nostra E-Commerce Project: Sell
Your Products Online

08
Design the Greenden Plant Shop: Full Responsive
Interior Designs

09
Implement Login and Signup Functionality for a
React-Based Actodo Project

10 Develop a Weather Application Using React and


the Axios API

18 www.errormakesclever.com
Error Makes Clever

11 Create a Bulk Mail Application with Nodemailer,


React, Node.js, MongoDB, and Express

12 Build a Random Joke Generator with API


Integration: React, Redux, Node.js, Express, and
Tailwind CSS

13 Build a Complete E-Commerce Project like


Amazon

19 www.errormakesclever.com
Error Makes Clever

Graduation
Become a community member of EMC

Once after you complete 75% of the Program and


Complete all the assignments and task you will be
eligible for Graduation.

19 www.errormakesclever.com
Error Makes Clever

Events
By becoming a part of our community you will be eligible
to participate in all the events conducted by us.

Career LaunchPad at Perungudi

19 www.errormakesclever.com
Error Makes Clever

Who can Enroll in our Program?

Fresh Graduates who want to kick start their career


in Full Stack Development Market.

IT job seekers who are looking to switch from non-


IT to IT.

Career gappers who want to secure a job in IT by


becoming Full Stack Developers.

Students who are willing to upskill their knowledge


in the Full Stack domain

20 www.errormakesclever.com
Error Makes Clever

Program Details
Program Duration: 3 Month+ 2 Month Internship

Program Format: Online

How to get into the Program?

Prebook for Just ₹999


Get your entry level kit within a week after prebook..

Take a Fundamental Class


Take our Entry Level Test

₹94999
Full Stack Bootcamp ₹35,555
Prebook -₹999

₹34,556

21 www.errormakesclever.com
Error Makes Clever

Making Tech Simple &


Unforgettable
Start your career with us and become a pro Full Stack Developer.

For More Details


Contact Us
+91 6380085196
[email protected]

New no 16,
Plot no 24 , pandian Street,
Sankaran Avenue, Velachery,
Chennai - 600024

22 www.errormakesclever.com
Error Makes Clever

Full Stack Web Development Syllabus

Section 1: Introduction to web development


1.1. What is Internet?
1.2. What is www/http/URL?
1.3. Frontend and Backend Explained
1.4. HTML/CSS/JS
1.5. Setting up your environment
1.6. Things you should know
1.7. MUST WATCH

Section 2: Let’s Dive into HTML


2.1. HTML Introduction
2.2. HTML in Action - Learning Basic tags
2.3. Building a simple portfolio website using only HTML
2.4. Browser Developer Tools
2.5. HTML Boilerplate

Section 3: HTML Forms and Tables


3.1. HTML Forms
3.2. HTML Tables
3.3. HTML Tables + Forms
3.4. Create a Contact form for my Portfolio Page
3.5. How to link Multiple HTML Pages?
3.6. Things you should know

22 www.errormakesclever.com
Error Makes Clever

Section 4: Introduction to CSS


4.1. What is CSS and its type?
4.2. CSS Basic Styles
4.3. CSS Selectors
4.4. CSS Box Model Explained
4.5. Display Property of CSS is everything you need
4.6. CSS hover Property
4.7. Creating a CSS Card Component
4.8. BEM Explained
4.9. The concept of Specificity

Section 5: Upgrading Portfolio Website


5.1. Adding basic Styles
5.2. Working with Display Property
5.3. Styling Contact Page
5.4. Launch your first website on GitHub.
5.5. Reestar Project Task

Section 6: Master Flexbox with a Project


6.1. Udemy Project Introduction
6.2. Introduction to Complete Flexbox with Exercise
6.3. Building Categories Section - Udemy
6.4. Sale Image Section - Udemy
6.5. Course Card - Udemy
6.6. Flex-grow and Flex-basis Explained.
6.7. Wrapping up Udemy Project
6.8. Time to Practice Flex

22 www.errormakesclever.com
Error Makes Clever

Section 7: Git and GitHub - Introduction


7.1. What is Git and GitHub?
7.2. Setup your Git Environment
7.3. GitHub Push and Pull Demo
7.4. Let’s Push Udemy Project from the Terminal

Section 8: CSS Positioning with Examples


8.1. What is CSS Position
8.2. What are 5 Different Positions?
8.3. Create Components Using CSS Position
8.4. What is z-index?
8.5. Update Udemy Project and Git it.

Section 9: CSS Animations - Learn Basics


9.1. What is CSS Animation
9.2. Opacity vs rgba
9.3. Transition Property
9.4. Advance Animation using Keyframes.
9.5 Animation in Practice.
9.6. Update Udemy Project and Git it.

Section 10: Responsive Websites Makes You Pro


10.1. What is a Responsive Website?
10.2. Introduction to Media Queries
10.3. Practice Questions on Responsive Design
10.4. Upgrading Udemy Project using MQ

22 www.errormakesclever.com
Error Makes Clever

Section 11: Time to CSS all by yourself


11.1. You are going to create a TripAdvisor Clone

Section 12: Tailwind for Fast Development


12.1. What is Tailwind CSS?
12.2. Bootstrap vs Tailwind CSS
12.3. Introduction to Greenden Project
12.4. Building Responsive Navbar
12.5. Header Section
12.6. About Section
12.7. How grid differs from flex?
12.8. Building Best Seller Section Using Grid
12.9. Let’s Wrap it up with Reviews, Newsletter and Footer
12.10. Product Page Task
12.11 How you can easily Take Template from Internet
12.12 Time to Git it

Section 13: JavaScript: It's time to code.


13.1. Why JavaScript?
13.2. What are Variables?
13.3. What ES6 means?
13.4. JavaScript Primitives
13.5. JavaScript Operators
13.6. Ternary Operators
13.7. Let’s Practice Basic JavaScript

22 www.errormakesclever.com
Error Makes Clever

Section 14: JavaScript: If-Else and Functions


14.1 If-Else in JavaScript
14.2 If-Else Practice Questions
14.3 What are functions in JavaScript?
14.4 Parameters Explained
14.5 Return Keyword in JavaScript
14.6 Function Practice Questions

Section 15: JavaScript: Guess the Number Game


15.1. How to generate a random Number?
15.2. Let’s create a Game.

Section 16: JavaScript: Loop is powerful.


16.1. Loops Explained!
16.2. Exercise Questions.

Section 17: JavaScript: Arrays


17.1. What is Array?
17.2. Push and Pop
17.3. Slice and Splice
17.4. indexOf, includes, Length.
17.5. const & Arrays
17.6. Combining Arrays with loop
17.7. Arrays Practice Question

22 www.errormakesclever.com
Error Makes Clever

Section 18: JavaScript: Object Literals


18.1. Introduction to Object Literals
18.2. Arrays + Objects

Section 19: JavaScript: DOM Introduction


19.1. What is JavaScript DOM?
19.2. Selecting and Manipulating DOM using ID
19.3. Selecting and Manipulating DOM using querySelector
19.4. textContent vs InnerHTML
19.5. Exercise Questions with Id and querySelector
19.6. use of setAttribute?
19.7. How to Manipulate CSS?

Section 20: All about Events


20.1 What are Events & Even handlers?
20.2. Event Object
20.3. Add 2 Numbers and Print Result
20.4. Exercise with Input Tag
20.5. Guess the Random Number 2.0
20.6. What are event Listeners with Example?
20.7. Create a PopUp Box on a Button Click - 1
20.8. Create a PopUp Box on a Button Click - 2

Section 21: Let’s Create a TO-DO List


21.1. How to create a HTML Element?
21.2. Append vs Prepend.
21.3. How to Delete an Element
21.4. Let’s Create a TO-DO List from Scratch
21.5. Task for the Session

22 www.errormakesclever.com
Error Makes Clever

Section 22: Working with Forms


22.1. How to select value from Radio Buttons
22.2. How to select value from CheckBox
22.3. What is Regex and its Example
22.4 Form Validation

Section 23: Upgrading Greenden Project with JS


23.1 Creating a Responsive Side Navbar
23.2. Search Functionality in Product Page
23.3. Deploy into GitHub

Section 24: E-commerce Task (HTML+CSS+JS)


24.1. Create an E-commerce Website called Nostra.

Section 25: ES6 in detail


25.1. Arrow Function
25.2. Template Literals
25.3. Destructuring Assignment
25.4. Spread and Rest Operator
25.5. Default Parameter
25.6. Classes
25.7. Callback
25.8. Promises
25.9. Async /Await

Section 26: JavaScript Array Methods


26.1. ForEach Method
26.2. Let’s Filter
26.3. Map is powerful

22 www.errormakesclever.com
Error Makes Clever

Section 27: This is what everyone is talking about - React JS


27.1. What and why is React?
27.2. Let’s Practice React - codesandbox
27.3. How to run React Application from VS Code
27.4. How to add Styles?
27.5. What are React Components?
27.6. Recreate Perfumy Project Using React.
27.7. Import and Export Components.
27.8. Upgrade Perfumy React
27.9. What are Fragments?
27.10. Push React Apps to Git
27.11. Using vercel to Deploy
27.12. Convert Udemy css Project to Udemy-react

Section 28: Props and Map


28.1. What are props?
28.2. Separation of Components
28.3. Statement vs Expression
28.4 How to Work with Maps

Section 29: Exercise Question: React Components, Props & Map


29.1. Image Gallery Exercise.

Section 30: useState Explained.


30.1. What is state?
30.2. How to create a State
30.3. Counter App with State
30.4. State Exercise

22 www.errormakesclever.com
Error Makes Clever

Section 31: Form Controls


31.1. Controlled Components
31.2. Multiple Inputs
31.3. Multiple Inputs 2.0
31.4. Creating a Shopping List

Section 32: Conditional Rendering


32.1. Change Color on a Button Click
32.2. Check & Uncheck List
32.3. Before vs After Login

Section 33: Let’s Create a To-Do List


33.1. Complete To-Do List Tutorial

Section 34: Things you should know


34.1. React component Life Cycle
34.2. React Hooks and its Types.
34.3. UseEffects Hook Explained
34.4. List and key

Section 35: Actodo Project - Part 1


35.1. Actodo Project Overview
35.2. How to Integrate Tailwind with React
35.3. Project Folder Structure
35.4. Creating a Header Component
35.5. Creating a Card Component
35.6. Building TodoList
35.7. Adding TodoList Functionality
35.8. Building AddTodoForm

22 www.errormakesclever.com
Error Makes Clever

Section 36: React Router


36.1 React router Explained.
36.2. Link Tag in React Router
36.3. Create Login and Signup Page
36.4. Add Login Functionality
36.5. Add User via Sign Up
36.6. Fixing Login Logical Error
36.7. How to Navigate?

Section 37: Finishing up Actodo Project


37.1 Merge Router+Actodo Todo List
37.1 Let’s Deploy

Section 38: useContext Hook Explained


38.1. Why useContext?
38.2. Create your own context.
38.3. Add list with UseContext
Section 39: Task (Router + Context)
39.1 Favourite Student List Task

Section 40: Weather App using API


40.1. What is API?
40.2. What are Promises?
40.3. How to work with Axios?
40.4. Working with Weather API
40.5. React Weather App

22 www.errormakesclever.com
Error Makes Clever

Section 41: Backend Begins


41.1. Server vs Client
41.2. How to create your own server
41.3. Let’s Create an API
41.4. Practice Session

Section 42: Integrate Backend and Frontend


42.1. Let’s Connect Backend with html.
42.2. What is Get and POST Method?
42.3. Simple Login Practice.
42.4. How to receive data from Post?

Section 43: Integrate React with Node


43.1. Create Login Functionality in React
43.2. What is Middleware?
43.3. Send and receive data from React and Node
43.4. Axios Post Method

Section 44: React + Node Exercise


44.1. Recreate Todo List with React + Node.
Section 45: Let’s Learn about Database
46.1. What is Database?
46.2. Relational vs non-relational

22 www.errormakesclever.com
Error Makes Clever

Section 46: MongoDB


46.1. What and why is MongoDB
46.2. Installation and Setup
46.3. MongoDB CRUD
46.4. MongoDB CRUD Exercise

Section 47: Integrate MongoDB with Node


47.1. How to use Mongoose?
47.2. Creating Todo with React + Node.
47.3. Connecting Todo with MongoDB

Section 48: Creating BulkMail App (MERN APP)


48.1. BulkMail App Overview
48.2. How to Send an Email from node?
48.3. How to read a file?
48.4. Building UI for BulkMail
48.5. Merge Frontend with Backend
48.6. Adding Bulk Mailing Feature
48.7. Fixing a Problem
48.8. Connecting to MongoDB
48.9. MongoDB Cloud
48.10 How to Deploy?

Section 49: Redux Tutorial


49.1. What and why is Redux?
49.2. Redux Short Tutorial
49.3. Redux Slicer Explained
49.4. Redux Mini Project

22 www.errormakesclever.com
Error Makes Clever

Section 50: Firebase Explained


50.1. What is Authentication?
50.2. Why do we need Firebase?
50.3. Firebase Authentication Tutorial

Section 51: Blog Portfolio Project


51.1. Project Setup
51.2. Connect our Project to firebase.
51.3. Enable Login and Signup Page
51.4. Power of Firebase
51.5. Blog Admin Access

Section 52: Integrating Payment Gateway


52.1. Learn How to Connect Razor Pay with your Application
52.2. Build a Simple Project With Razorpay Integration

See you inside our program!

22 www.errormakesclever.com

You might also like