SlideShare uma empresa Scribd logo
1 de 21
Baixar para ler offline
Dr. Akhilesh Das Gupta Institute
of Technology and Management
PROJECT PRESENTATION -
Twitter Clone using MERN Stack
Neeraj Gupta
09715602719
B.Tech 5th Semester
CSE-T2
What is Stack?
A stack is the mixture of technologies used to create
Web applications. Any web application will be made
utilizing various technologies like (frameworks,
libraries, databases).
-The MERN stack is a JavaScript stack that is
intended to make Application Development process
smoother.
A “stack” refers to any combination of coding languages, tools, and
frameworks developers use to create software products for their clients.
A stack contains different layers of components that play a vital role in the
process of software product creation.
• Client-side - front-end (HTML, CSS, JavaScript)
• Server-side - back-end (OS, web server, programming language, web
framework, databases)
3
STACK
4
Choosing the Right Stack for your
Project-
Unfortunately, that isn’t always the right criteria for choosing the best type
of “stack”. Many factors come into play here, like:
•Type and size of the project
•Team expertise and knowledge bases
•Time to market
•Scalability
•Maintainability
•Cost of the overall development
5
What is a MERN Stack Development ?
MERN is an acronym used to describe a specific set of JavaScript based
technologies that are used in the web application development
process. It is designed with an idea to make the development process
as smooth as possible. MERN includes the following open-source
components:
•Mongo DB
•Express JS
•React JS/ Redux
•Node JS
Every single one of these components plays a crucial role in
the web app development process. All of these provide an
end-to-end framework for developers to work in. For
instance, Mongo DB is a database system, Node JS is a
back-end runtime environment, Express JS is a back-end
web framework and React is a front-end framework.
7
This is a free open-source, cross-platform document-oriented database
program. It is classified as a No SQL database program, which means that
data is stored in flexible documents with JSON-based query language. This
also means that the size of the content number of fields in the documents
tends to vary. The whole data is structured in a way to be prone to change
over time.
MongoDB is known as a flexible solution that is always easy to scale.
1. Mongo DB
8
This is also a free, open-source software, it can be classified as a
web application framework for Node.js. To be more precise,
Express JS is made for developing web apps and APIs.
Instead of manually writing full web server code in Node.js,
developers use this MERN component to simplify the coding
process. The best feature of this framework is that devs don’t
repeat the same code over and over, as they would with writing
Node.js code in the HTTP module.
2. Express JS
9
This is a JavaScript library used for building user interfaces. Originally
created by a software engineer who worked for Facebook, React was
later on open-sourced.
This specific library is often used for creating views rendered in HTML.
The views that you create in Reach declarative, which means that you
don’t have to deploy additional time on managing the changes and
effects they have on the data.
React uses a full-featured programming language (JavaScript) to
construct repetitive or conditional DOM elements.
With React, the same code can run on both the server and the browser
3. React JS/ Redux
10
4. Node JS
Originally built for Google Chrome and later on open-sourced,
Node JS is a cross-platform run-time JavaScript environment used
for executing JavaScript code outside of a browser. JavaScript was
originally used for front-end scripting, but Node JS has enabled
devs to use it to write command line tools and back-end scripts for
the purpose of creating dynamic web page content before the page
is sent to the user's web browser.
Node JS was designed with an idea of allowing devs to build
scalable network applications.
11
The Main Benefit of a MERN Stack
• JavaScript is everywhere. It is used both on the front-end and
back-end side. Because of this, there’s no need for context
switching.
• MRN is JavaScript-based, devs only need to master a single
coding language, which makes things a million times easier.
• building dynamic web applications in no time.
Working of Twitter Clone
To Start the server
13
To Start the Client
14
Outputs
16
17
18
19
20
THANK YOU

Mais conteúdo relacionado

Mais procurados

Web Development on Web Project Presentation
Web Development on Web Project PresentationWeb Development on Web Project Presentation
Web Development on Web Project PresentationMilind Gokhale
 
Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1Oleksii Prohonnyi
 
Ppt of web development
Ppt of web developmentPpt of web development
Ppt of web developmentbethanygfair
 
ppt of web development for diploma student
ppt of web development for diploma student ppt of web development for diploma student
ppt of web development for diploma student Abhishekchauhan863165
 
Introduction to React JS
Introduction to React JSIntroduction to React JS
Introduction to React JSArno Lordkronos
 
Ppt full stack developer
Ppt full stack developerPpt full stack developer
Ppt full stack developerSudhirVarpe1
 
Web Development Ppt
Web Development PptWeb Development Ppt
Web Development PptBruce Tucker
 
Web development using javaScript, React js, Node js, HTML, CSS and SQL
Web development using javaScript, React js, Node js, HTML, CSS and SQLWeb development using javaScript, React js, Node js, HTML, CSS and SQL
Web development using javaScript, React js, Node js, HTML, CSS and SQLJayant Surana
 
Introduction to Node.js
Introduction to Node.jsIntroduction to Node.js
Introduction to Node.jsRob O'Doherty
 
Modern Web Development
Modern Web DevelopmentModern Web Development
Modern Web DevelopmentRobert Nyman
 
Full Stack Web Development
Full Stack Web DevelopmentFull Stack Web Development
Full Stack Web DevelopmentSWAGATHCHOWDARY1
 
Internship presentation
Internship presentationInternship presentation
Internship presentationWasim Shemna
 

Mais procurados (20)

Web Development
Web DevelopmentWeb Development
Web Development
 
NodeJS for Beginner
NodeJS for BeginnerNodeJS for Beginner
NodeJS for Beginner
 
Web Development on Web Project Presentation
Web Development on Web Project PresentationWeb Development on Web Project Presentation
Web Development on Web Project Presentation
 
Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1Front-end development introduction (HTML, CSS). Part 1
Front-end development introduction (HTML, CSS). Part 1
 
Ppt of web development
Ppt of web developmentPpt of web development
Ppt of web development
 
ppt of web development for diploma student
ppt of web development for diploma student ppt of web development for diploma student
ppt of web development for diploma student
 
Mern stack developement
Mern stack developementMern stack developement
Mern stack developement
 
ReactJS presentation.pptx
ReactJS presentation.pptxReactJS presentation.pptx
ReactJS presentation.pptx
 
Introduction to React JS
Introduction to React JSIntroduction to React JS
Introduction to React JS
 
Introduction to Angularjs
Introduction to AngularjsIntroduction to Angularjs
Introduction to Angularjs
 
Ppt full stack developer
Ppt full stack developerPpt full stack developer
Ppt full stack developer
 
Web Development Ppt
Web Development PptWeb Development Ppt
Web Development Ppt
 
Asp.net.
Asp.net.Asp.net.
Asp.net.
 
Web development using javaScript, React js, Node js, HTML, CSS and SQL
Web development using javaScript, React js, Node js, HTML, CSS and SQLWeb development using javaScript, React js, Node js, HTML, CSS and SQL
Web development using javaScript, React js, Node js, HTML, CSS and SQL
 
Introduction to Node.js
Introduction to Node.jsIntroduction to Node.js
Introduction to Node.js
 
Web Development
Web DevelopmentWeb Development
Web Development
 
Modern Web Development
Modern Web DevelopmentModern Web Development
Modern Web Development
 
Full Stack Web Development
Full Stack Web DevelopmentFull Stack Web Development
Full Stack Web Development
 
Internship presentation
Internship presentationInternship presentation
Internship presentation
 
Introduction to Node.js
Introduction to Node.jsIntroduction to Node.js
Introduction to Node.js
 

Semelhante a MERN PPT

Why You Should Use MERN Stack for Startup Apps?
Why You Should Use MERN Stack for Startup Apps?Why You Should Use MERN Stack for Startup Apps?
Why You Should Use MERN Stack for Startup Apps?Pixel Crayons
 
9 Best JavaScript Frameworks To Choose
9 Best JavaScript Frameworks To Choose9 Best JavaScript Frameworks To Choose
9 Best JavaScript Frameworks To ChooseAlbiorix Technology
 
Top 11 Front-End Web Development Tools To Consider in 2020
 Top 11 Front-End Web Development Tools To Consider in 2020 Top 11 Front-End Web Development Tools To Consider in 2020
Top 11 Front-End Web Development Tools To Consider in 2020Katy Slemon
 
Node.JS Development_ Features and Trends.pdf
Node.JS Development_ Features and Trends.pdfNode.JS Development_ Features and Trends.pdf
Node.JS Development_ Features and Trends.pdfJPLoft Solutions
 
Full Stack Web Development: Vision, Challenges and Future Scope
Full Stack Web Development: Vision, Challenges and Future ScopeFull Stack Web Development: Vision, Challenges and Future Scope
Full Stack Web Development: Vision, Challenges and Future ScopeIRJET Journal
 
Getting Started With Mean Stack
Getting Started With Mean StackGetting Started With Mean Stack
Getting Started With Mean StackKnoldus Inc.
 
Industrial Training.pptx
Industrial Training.pptxIndustrial Training.pptx
Industrial Training.pptxSamraatBansal1
 
COMP6210 Web Services And Design Methodologies.docx
COMP6210 Web Services And Design Methodologies.docxCOMP6210 Web Services And Design Methodologies.docx
COMP6210 Web Services And Design Methodologies.docxwrite31
 
Latest Web development technologies 2021
 Latest Web development technologies 2021 Latest Web development technologies 2021
Latest Web development technologies 2021SWATHYSMOHAN
 
React Js vs Node Js_ Which Framework to Choose for Your Next Web Application
React Js vs Node Js_ Which Framework to Choose for Your Next Web ApplicationReact Js vs Node Js_ Which Framework to Choose for Your Next Web Application
React Js vs Node Js_ Which Framework to Choose for Your Next Web Applicationadityakumar2080
 
Top frontend web development tools
Top frontend web development toolsTop frontend web development tools
Top frontend web development toolsBenji Harrison
 
Exploring MERN Stack and Tech Stacks: A Comparative Analysis
Exploring MERN Stack and Tech Stacks: A Comparative AnalysisExploring MERN Stack and Tech Stacks: A Comparative Analysis
Exploring MERN Stack and Tech Stacks: A Comparative AnalysisIRJET Journal
 
Know the difference - Angular.js vs Node.js
Know the difference - Angular.js vs Node.jsKnow the difference - Angular.js vs Node.js
Know the difference - Angular.js vs Node.jsdenizjohn
 
Built Cross-Platform Application with .NET Core Development.pdf
Built Cross-Platform Application with .NET Core Development.pdfBuilt Cross-Platform Application with .NET Core Development.pdf
Built Cross-Platform Application with .NET Core Development.pdfI-Verve Inc
 

Semelhante a MERN PPT (20)

Why You Should Use MERN Stack for Startup Apps?
Why You Should Use MERN Stack for Startup Apps?Why You Should Use MERN Stack for Startup Apps?
Why You Should Use MERN Stack for Startup Apps?
 
9 Best JavaScript Frameworks To Choose
9 Best JavaScript Frameworks To Choose9 Best JavaScript Frameworks To Choose
9 Best JavaScript Frameworks To Choose
 
NodeJs Frameworks.pdf
NodeJs Frameworks.pdfNodeJs Frameworks.pdf
NodeJs Frameworks.pdf
 
Top 11 Front-End Web Development Tools To Consider in 2020
 Top 11 Front-End Web Development Tools To Consider in 2020 Top 11 Front-End Web Development Tools To Consider in 2020
Top 11 Front-End Web Development Tools To Consider in 2020
 
Node.JS Development_ Features and Trends.pdf
Node.JS Development_ Features and Trends.pdfNode.JS Development_ Features and Trends.pdf
Node.JS Development_ Features and Trends.pdf
 
Resume
ResumeResume
Resume
 
AFTAB AHMED.pptx
AFTAB AHMED.pptxAFTAB AHMED.pptx
AFTAB AHMED.pptx
 
Full Stack Web Development: Vision, Challenges and Future Scope
Full Stack Web Development: Vision, Challenges and Future ScopeFull Stack Web Development: Vision, Challenges and Future Scope
Full Stack Web Development: Vision, Challenges and Future Scope
 
Getting Started With Mean Stack
Getting Started With Mean StackGetting Started With Mean Stack
Getting Started With Mean Stack
 
Industrial Training.pptx
Industrial Training.pptxIndustrial Training.pptx
Industrial Training.pptx
 
COMP6210 Web Services And Design Methodologies.docx
COMP6210 Web Services And Design Methodologies.docxCOMP6210 Web Services And Design Methodologies.docx
COMP6210 Web Services And Design Methodologies.docx
 
Latest Web development technologies 2021
 Latest Web development technologies 2021 Latest Web development technologies 2021
Latest Web development technologies 2021
 
React Js vs Node Js_ Which Framework to Choose for Your Next Web Application
React Js vs Node Js_ Which Framework to Choose for Your Next Web ApplicationReact Js vs Node Js_ Which Framework to Choose for Your Next Web Application
React Js vs Node Js_ Which Framework to Choose for Your Next Web Application
 
Top frontend web development tools
Top frontend web development toolsTop frontend web development tools
Top frontend web development tools
 
Java script framework
Java script frameworkJava script framework
Java script framework
 
Node.js vs. java
Node.js vs. javaNode.js vs. java
Node.js vs. java
 
Exploring MERN Stack and Tech Stacks: A Comparative Analysis
Exploring MERN Stack and Tech Stacks: A Comparative AnalysisExploring MERN Stack and Tech Stacks: A Comparative Analysis
Exploring MERN Stack and Tech Stacks: A Comparative Analysis
 
How backbone.js is different from ember.js?
How backbone.js is different from ember.js?How backbone.js is different from ember.js?
How backbone.js is different from ember.js?
 
Know the difference - Angular.js vs Node.js
Know the difference - Angular.js vs Node.jsKnow the difference - Angular.js vs Node.js
Know the difference - Angular.js vs Node.js
 
Built Cross-Platform Application with .NET Core Development.pdf
Built Cross-Platform Application with .NET Core Development.pdfBuilt Cross-Platform Application with .NET Core Development.pdf
Built Cross-Platform Application with .NET Core Development.pdf
 

Último

EJECTOR REFRIGERATION CYCLE WITH THE INJECTION OF A HIGH DENSITY FLUID INTO A...
EJECTOR REFRIGERATION CYCLE WITH THE INJECTION OF A HIGH DENSITY FLUID INTO A...EJECTOR REFRIGERATION CYCLE WITH THE INJECTION OF A HIGH DENSITY FLUID INTO A...
EJECTOR REFRIGERATION CYCLE WITH THE INJECTION OF A HIGH DENSITY FLUID INTO A...marijomiljkovic1
 
Tekom Netherlands | The evolving landscape of Simplified Technical English b...
Tekom Netherlands | The evolving landscape of Simplified Technical English  b...Tekom Netherlands | The evolving landscape of Simplified Technical English  b...
Tekom Netherlands | The evolving landscape of Simplified Technical English b...Shumin Chen
 
autonomous_vehicle_working_paper_01072020-_508_compliant.pdf
autonomous_vehicle_working_paper_01072020-_508_compliant.pdfautonomous_vehicle_working_paper_01072020-_508_compliant.pdf
autonomous_vehicle_working_paper_01072020-_508_compliant.pdfPandurangGurakhe
 
Final PPT.ppt about human detection and counting
Final PPT.ppt  about human detection and countingFinal PPT.ppt  about human detection and counting
Final PPT.ppt about human detection and countingArbazAhmad25
 
pulse modulation technique (Pulse code modulation).pptx
pulse modulation technique (Pulse code modulation).pptxpulse modulation technique (Pulse code modulation).pptx
pulse modulation technique (Pulse code modulation).pptxNishanth Asmi
 
0950_Rodriguez_200520_Work_done-GEOGalicia_ELAB-converted.pptx
0950_Rodriguez_200520_Work_done-GEOGalicia_ELAB-converted.pptx0950_Rodriguez_200520_Work_done-GEOGalicia_ELAB-converted.pptx
0950_Rodriguez_200520_Work_done-GEOGalicia_ELAB-converted.pptxssuser886c55
 
PhD summary of Luuk Brederode, presented at 2023-10-17 to Veitch Lister Consu...
PhD summary of Luuk Brederode, presented at 2023-10-17 to Veitch Lister Consu...PhD summary of Luuk Brederode, presented at 2023-10-17 to Veitch Lister Consu...
PhD summary of Luuk Brederode, presented at 2023-10-17 to Veitch Lister Consu...Luuk Brederode
 
Investigating the Efficiency of Drinking Water Treatment Sludge and Iron-Base...
Investigating the Efficiency of Drinking Water Treatment Sludge and Iron-Base...Investigating the Efficiency of Drinking Water Treatment Sludge and Iron-Base...
Investigating the Efficiency of Drinking Water Treatment Sludge and Iron-Base...J. Agricultural Machinery
 
Searching and Sorting Algorithms
Searching and Sorting AlgorithmsSearching and Sorting Algorithms
Searching and Sorting AlgorithmsAshutosh Satapathy
 
Governors ppt.pdf .
Governors ppt.pdf                              .Governors ppt.pdf                              .
Governors ppt.pdf .happycocoman
 
Flutter GDE session GDSC ZHCET AMU, aligarh
Flutter GDE session GDSC ZHCET AMU, aligarhFlutter GDE session GDSC ZHCET AMU, aligarh
Flutter GDE session GDSC ZHCET AMU, aligarhjamesbond00714
 
electricity generation from food waste - based bioenergy with IOT.pptx
electricity generation from food waste - based bioenergy with IOT.pptxelectricity generation from food waste - based bioenergy with IOT.pptx
electricity generation from food waste - based bioenergy with IOT.pptxAravindhKarthik1
 
Injection Power Cycle - The most efficient power cycle
Injection Power Cycle - The most efficient power cycleInjection Power Cycle - The most efficient power cycle
Injection Power Cycle - The most efficient power cyclemarijomiljkovic1
 
Caltrans District 8 Update for the CalAPA Spring Asphalt Conference 2024
Caltrans District 8 Update for the CalAPA Spring Asphalt Conference 2024Caltrans District 8 Update for the CalAPA Spring Asphalt Conference 2024
Caltrans District 8 Update for the CalAPA Spring Asphalt Conference 2024California Asphalt Pavement Association
 
Field Report on present condition of Ward 1 and Ward 2 of Pabna Municipality
Field Report on present condition of Ward 1 and Ward 2 of Pabna MunicipalityField Report on present condition of Ward 1 and Ward 2 of Pabna Municipality
Field Report on present condition of Ward 1 and Ward 2 of Pabna MunicipalityMorshed Ahmed Rahath
 
Conventional vs Modern method (Philosophies) of Tunneling-re.pptx
Conventional vs Modern method (Philosophies) of Tunneling-re.pptxConventional vs Modern method (Philosophies) of Tunneling-re.pptx
Conventional vs Modern method (Philosophies) of Tunneling-re.pptxSAQIB KHURSHEED WANI
 
12. Stairs by U Nyi Hla ngae from Myanmar.pdf
12. Stairs by U Nyi Hla ngae from Myanmar.pdf12. Stairs by U Nyi Hla ngae from Myanmar.pdf
12. Stairs by U Nyi Hla ngae from Myanmar.pdftpo482247
 

Último (20)

EJECTOR REFRIGERATION CYCLE WITH THE INJECTION OF A HIGH DENSITY FLUID INTO A...
EJECTOR REFRIGERATION CYCLE WITH THE INJECTION OF A HIGH DENSITY FLUID INTO A...EJECTOR REFRIGERATION CYCLE WITH THE INJECTION OF A HIGH DENSITY FLUID INTO A...
EJECTOR REFRIGERATION CYCLE WITH THE INJECTION OF A HIGH DENSITY FLUID INTO A...
 
Tekom Netherlands | The evolving landscape of Simplified Technical English b...
Tekom Netherlands | The evolving landscape of Simplified Technical English  b...Tekom Netherlands | The evolving landscape of Simplified Technical English  b...
Tekom Netherlands | The evolving landscape of Simplified Technical English b...
 
autonomous_vehicle_working_paper_01072020-_508_compliant.pdf
autonomous_vehicle_working_paper_01072020-_508_compliant.pdfautonomous_vehicle_working_paper_01072020-_508_compliant.pdf
autonomous_vehicle_working_paper_01072020-_508_compliant.pdf
 
Final PPT.ppt about human detection and counting
Final PPT.ppt  about human detection and countingFinal PPT.ppt  about human detection and counting
Final PPT.ppt about human detection and counting
 
pulse modulation technique (Pulse code modulation).pptx
pulse modulation technique (Pulse code modulation).pptxpulse modulation technique (Pulse code modulation).pptx
pulse modulation technique (Pulse code modulation).pptx
 
0950_Rodriguez_200520_Work_done-GEOGalicia_ELAB-converted.pptx
0950_Rodriguez_200520_Work_done-GEOGalicia_ELAB-converted.pptx0950_Rodriguez_200520_Work_done-GEOGalicia_ELAB-converted.pptx
0950_Rodriguez_200520_Work_done-GEOGalicia_ELAB-converted.pptx
 
Caltrans view on recycling of in-place asphalt pavements
Caltrans view on recycling of in-place asphalt pavementsCaltrans view on recycling of in-place asphalt pavements
Caltrans view on recycling of in-place asphalt pavements
 
PhD summary of Luuk Brederode, presented at 2023-10-17 to Veitch Lister Consu...
PhD summary of Luuk Brederode, presented at 2023-10-17 to Veitch Lister Consu...PhD summary of Luuk Brederode, presented at 2023-10-17 to Veitch Lister Consu...
PhD summary of Luuk Brederode, presented at 2023-10-17 to Veitch Lister Consu...
 
Investigating the Efficiency of Drinking Water Treatment Sludge and Iron-Base...
Investigating the Efficiency of Drinking Water Treatment Sludge and Iron-Base...Investigating the Efficiency of Drinking Water Treatment Sludge and Iron-Base...
Investigating the Efficiency of Drinking Water Treatment Sludge and Iron-Base...
 
FOREST FIRE USING IoT-A Visual to UG students
FOREST FIRE USING IoT-A Visual to UG studentsFOREST FIRE USING IoT-A Visual to UG students
FOREST FIRE USING IoT-A Visual to UG students
 
Searching and Sorting Algorithms
Searching and Sorting AlgorithmsSearching and Sorting Algorithms
Searching and Sorting Algorithms
 
Governors ppt.pdf .
Governors ppt.pdf                              .Governors ppt.pdf                              .
Governors ppt.pdf .
 
Flutter GDE session GDSC ZHCET AMU, aligarh
Flutter GDE session GDSC ZHCET AMU, aligarhFlutter GDE session GDSC ZHCET AMU, aligarh
Flutter GDE session GDSC ZHCET AMU, aligarh
 
electricity generation from food waste - based bioenergy with IOT.pptx
electricity generation from food waste - based bioenergy with IOT.pptxelectricity generation from food waste - based bioenergy with IOT.pptx
electricity generation from food waste - based bioenergy with IOT.pptx
 
Injection Power Cycle - The most efficient power cycle
Injection Power Cycle - The most efficient power cycleInjection Power Cycle - The most efficient power cycle
Injection Power Cycle - The most efficient power cycle
 
Caltrans District 8 Update for the CalAPA Spring Asphalt Conference 2024
Caltrans District 8 Update for the CalAPA Spring Asphalt Conference 2024Caltrans District 8 Update for the CalAPA Spring Asphalt Conference 2024
Caltrans District 8 Update for the CalAPA Spring Asphalt Conference 2024
 
Field Report on present condition of Ward 1 and Ward 2 of Pabna Municipality
Field Report on present condition of Ward 1 and Ward 2 of Pabna MunicipalityField Report on present condition of Ward 1 and Ward 2 of Pabna Municipality
Field Report on present condition of Ward 1 and Ward 2 of Pabna Municipality
 
Hydraulic Loading System - Neometrix Defence
Hydraulic Loading System - Neometrix DefenceHydraulic Loading System - Neometrix Defence
Hydraulic Loading System - Neometrix Defence
 
Conventional vs Modern method (Philosophies) of Tunneling-re.pptx
Conventional vs Modern method (Philosophies) of Tunneling-re.pptxConventional vs Modern method (Philosophies) of Tunneling-re.pptx
Conventional vs Modern method (Philosophies) of Tunneling-re.pptx
 
12. Stairs by U Nyi Hla ngae from Myanmar.pdf
12. Stairs by U Nyi Hla ngae from Myanmar.pdf12. Stairs by U Nyi Hla ngae from Myanmar.pdf
12. Stairs by U Nyi Hla ngae from Myanmar.pdf
 

MERN PPT

  • 1. Dr. Akhilesh Das Gupta Institute of Technology and Management PROJECT PRESENTATION - Twitter Clone using MERN Stack Neeraj Gupta 09715602719 B.Tech 5th Semester CSE-T2
  • 2. What is Stack? A stack is the mixture of technologies used to create Web applications. Any web application will be made utilizing various technologies like (frameworks, libraries, databases). -The MERN stack is a JavaScript stack that is intended to make Application Development process smoother.
  • 3. A “stack” refers to any combination of coding languages, tools, and frameworks developers use to create software products for their clients. A stack contains different layers of components that play a vital role in the process of software product creation. • Client-side - front-end (HTML, CSS, JavaScript) • Server-side - back-end (OS, web server, programming language, web framework, databases) 3 STACK
  • 4. 4 Choosing the Right Stack for your Project- Unfortunately, that isn’t always the right criteria for choosing the best type of “stack”. Many factors come into play here, like: •Type and size of the project •Team expertise and knowledge bases •Time to market •Scalability •Maintainability •Cost of the overall development
  • 5. 5 What is a MERN Stack Development ? MERN is an acronym used to describe a specific set of JavaScript based technologies that are used in the web application development process. It is designed with an idea to make the development process as smooth as possible. MERN includes the following open-source components: •Mongo DB •Express JS •React JS/ Redux •Node JS
  • 6. Every single one of these components plays a crucial role in the web app development process. All of these provide an end-to-end framework for developers to work in. For instance, Mongo DB is a database system, Node JS is a back-end runtime environment, Express JS is a back-end web framework and React is a front-end framework.
  • 7. 7 This is a free open-source, cross-platform document-oriented database program. It is classified as a No SQL database program, which means that data is stored in flexible documents with JSON-based query language. This also means that the size of the content number of fields in the documents tends to vary. The whole data is structured in a way to be prone to change over time. MongoDB is known as a flexible solution that is always easy to scale. 1. Mongo DB
  • 8. 8 This is also a free, open-source software, it can be classified as a web application framework for Node.js. To be more precise, Express JS is made for developing web apps and APIs. Instead of manually writing full web server code in Node.js, developers use this MERN component to simplify the coding process. The best feature of this framework is that devs don’t repeat the same code over and over, as they would with writing Node.js code in the HTTP module. 2. Express JS
  • 9. 9 This is a JavaScript library used for building user interfaces. Originally created by a software engineer who worked for Facebook, React was later on open-sourced. This specific library is often used for creating views rendered in HTML. The views that you create in Reach declarative, which means that you don’t have to deploy additional time on managing the changes and effects they have on the data. React uses a full-featured programming language (JavaScript) to construct repetitive or conditional DOM elements. With React, the same code can run on both the server and the browser 3. React JS/ Redux
  • 10. 10 4. Node JS Originally built for Google Chrome and later on open-sourced, Node JS is a cross-platform run-time JavaScript environment used for executing JavaScript code outside of a browser. JavaScript was originally used for front-end scripting, but Node JS has enabled devs to use it to write command line tools and back-end scripts for the purpose of creating dynamic web page content before the page is sent to the user's web browser. Node JS was designed with an idea of allowing devs to build scalable network applications.
  • 11. 11 The Main Benefit of a MERN Stack • JavaScript is everywhere. It is used both on the front-end and back-end side. Because of this, there’s no need for context switching. • MRN is JavaScript-based, devs only need to master a single coding language, which makes things a million times easier. • building dynamic web applications in no time.
  • 13. To Start the server 13
  • 14. To Start the Client 14
  • 16. 16
  • 17. 17
  • 18. 18
  • 19. 19
  • 20. 20