MERN stack Workshop - GDG On Campus NBNSCOE
- 1. MERN STACK DEVELOPMENT: A BEGINNER'S GUIDE Modern Web Application Development Presentation By: Mohit Shaharwale, Vice Campus Organiser, GDG-NBNSCOE GDG NBNSCOE
- 2. WHAT IS A TECH STACK ? • A tech stack is a combination of technologies, programming languages, frameworks, libraries, databases, and tools used together to develop a software application • Think of it like a set of building blocks that work together to create a complete software solution • Analogous to a chef's toolkit - each tool serves a specific purpose in creating a final dish GDG NBNSCOE
- 3. IMPORTANCE IN MODERN WEB DEVELOPMENT GDG NBNSCOE • Provides a structured approach to building applications • Ensures compatibility and seamless integration between different technologies • Helps in: ⚬ Efficient development ⚬ Scalability of applications ⚬ Faster time-to-market ⚬ Consistent performance ⚬ Easier maintenance and updates
- 5. (CLIENT SIDE) FRONTEND • Technologies that users directly interact with • Includes user interface and user experience elements • Examples: HTML, CSS, JavaScript, Frontend Frameworks (React, Vue, Angular) GDG NBNSCOE
- 6. (SERVER-SIDE) GDG NBNSCOE BACKEND • Handles server logic, database interactions, and application core functionality. • Manages data processing, storage, and security. • Examples: Node.js, Python, Ruby, Java, Server-side Frameworks
- 7. GDG NBNSCOE DATABASE • Stores and manages application data • Types: Relational (SQL) and Non- Relational (NoSQL) • Examples: MySQL, PostgreSQL, MongoDB, Firebase
- 8. GDG NBNSCOE DEVOPS AND DEPLOYMENT TOOLS • Version Control: Git • Containerization: Docker • Cloud Platforms: AWS, Azure, Google Cloud • Continuous Integration/Deployment: Jenkins, GitLab CI
- 9. GDG NBNSCOE TYPES OF FULL STACK DEVELOPMENT ENVIRONMENT 1. LAMP Stack • L - Linux • A - Apache • M - MySQL • P - PHP 3. MERN Stack 2. MEAN Stack • M - MongoDB • E - Express.js • A - Angular • N - Node.js
- 10. GDG NBNSCOE WHY MERN STACK IS POPULAR AMONG DEVELOPERS Unified Language (JavaScript) Open-Source and Community Support • All components use JavaScript • Reduces context switching • Easier learning curve • Consistent coding style across stack • Free to use • Large, active community • Constant updates and improvements • Extensive libraries and resources Flexibility and Scalability • Suitable for small startups and large enterprises • Easy to add or replace components • Supports microservices architecture • High performance and responsiveness
- 11. GDG NBNSCOE • NoSQL document database • Stores data in flexible, JSON- like documents • Designed for scalability and performance • Supports dynamic schemas M - MongoDB BREAKING DOWN THE ACRONYM • Minimal and flexible Node.js web application framework. • Simplifies server-side routing and middleware integration. • Lightweight and unopinionated. E - Express.js • JavaScript library for building user interfaces. • Developed and maintained by Facebook. • Component-based architecture. • Virtual DOM for efficient rendering. • Supports single-page applications (SPAs). R - React.js • JavaScript runtime built on Chrome's V8 JavaScript engine • Allows server-side JavaScript execution • Event-driven, non-blocking I/O model • Highly scalable for network applications N - Node.js
- 12. GDG NBNSCOE MongoDB - Key Features • Data is stored in flexible, JSON-like documents • Each document can have different fields • No need for predefined schema • Allows for dynamic and evolving data structures a) Document-Oriented Database • BSON (Binary JSON) ⚬ Binary-encoded serialization ⚬ More efficient than JSON ⚬ Supports additional data types • Data Types Supported ⚬ Strings ⚬ Numbers (Integer, Float) ⚬ Dates ⚬ Binary data ⚬ Arrays ⚬ Nested objects b) JSON-like Storage (BSON) • Create (Insert) • Read (Find) • Update (Modify) • Delete (Remove) c) Basic MongoDB Operations
- 13. GDG NBNSCOE
- 14. GDG NBNSCOE
- 15. GDG NBNSCOE
- 16. GDG NBNSCOE
- 17. GDG NBNSCOE
- 18. Express.js - Key Features GDG NBNSCOE • Lightweight core framework • Allows developers to add only needed features • Unopinionated design a) Minimal and Flexible • Define routes for different HTTP methods • Handle complex routing scenarios • Support for parameterized routes b) Routing Capabilities • Functions that have access to request and response • Can modify request/response cycle • Execute code, change request/response • End request-response cycle c) Middleware Support
- 19. GDG NBNSCOE
- 20. GDG NBNSCOE
- 21. Express.js - Key Takeaways GDG NBNSCOE • RESTful API Development • Microservices • Backend for Single Page Applications • Real-time Web Applications • Proxy Servers • Server-Side Rendering a) Use Cases • Master Node.js Fundamentals • Understand HTTP Methods • Learn Middleware Concepts • Practice Building APIs • Explore Advanced Routing • Study Security Best Practices b) Learning Path for Students
- 22. React.js - Key Features GDG NBNSCOE • UI divided into independent, reusable components • Each component manages its own state and props • Promotes code reusability and modularity a) Component-Based Architecture • Lightweight copy of actual DOM • Efficiently updates and renders components • Minimizes direct manipulation of browser DOM b) Virtual DOM • Data flows in single direction: parent to child • Predictable state management • Easier to debug and understand application state c) Unidirectional Data Flow
- 23. GDG NBNSCOE
- 24. GDG NBNSCOE
- 25. Node.js - Key Features GDG NBNSCOE • Allows server-side JavaScript execution • Uses V8 engine for high-performance compilation • Unified language across frontend and backend a) JavaScript Runtime Environment • Based on event loop mechanism. • Handles multiple concurrent connections. • Non-blocking I/O operations. b) Event-Driven Architecture • Allows simultaneous multiple operations. • Improves application performance. • Efficient resource utilization. c) Non-Blocking I/O
- 26. GDG NBNSCOE
- 27. GDG NBNSCOE
- 28. PROJECT TIME : HOSPITAL MANAGEMENT SYSTEM GDG NBNSCOE
- 29. CONLUSION • Embrace the MERN stack as your gateway to modern, full-stack web development. • Stay curious and adaptable in the rapidly evolving tech landscape. • Practice consistently and build projects to transform theoretical knowledge into practical skills. • Learn from your mistakes and view challenges as opportunities for growth. • Your passion and creativity are the ultimate tools in creating innovative digital solutions. GDG NBNSCOE