Arya College Of Engineering, Jaipur
Rajasthan Technical University, Kota
Session: 2020-2024
Industrial Training Presentation on:
Presented To : Presented By:
Pawan Sen Jay Prakash Dwivedi(20EAICS067)
HOD (CS Department) Tanu Sharma (20EAICS155)
Content
1. Introduction
2. How Does MERN Stack Work?
3. MongoDB
4. [Link]
5. [Link]
6. [Link]
7. Project
I. Tools and Technologies
II. Database
III. UI Screenshots
IV. Customer Mail
V. Features
Introduction
• MERN stands for MongoDB, Express, React, Node, after the four key
technologies that make up the stack.
• MongoDB — document database
• Express(.js) — [Link] web framework
• React(.js) — a client-side JavaScript framework
• Node(.js) — the premier JavaScript web server
How does the MERN stack work?
• The MERN architecture allows you to easily construct a three-tier
architecture (front end, back end, database) entirely using JavaScript
and JSON.
MongoDB
• It is NoSQL.
• Open Source Document Oriented Database.
• Written in C++.
• It stores data in JSON format.
• Data Stores in Key value Pair.
• It uses BSON to query Database.
NodeJS
• Javascript Runtime Environment.
• [Link] allow to run javascript on the server.
• It is free & open source.
• It is written in C++.
• Ryan Dahl developed [Link] in 2009.
• It uses V8 engine for development.
ExpressJS
• [Link] framework that provides set of features for Development.
• Provides routing of requests based on HTTP methods and URLs.
• It allows to set up Middleware to respond to HTTP request.
ReactJS
• ReactJS is a JavaScript Library created by Meta.
• React is an open-source and component-based front-end library.
• React is responsible for the UI design.
• React makes code easier to debug by dividing it into components.
Why to use React?
• JSX
• Virtual DOM
• One-way data binding
• Components
• Simplicity
• Reusability
How does React Work?
[Link] a user interacts with a React application, React updates Virtual
DOM.
[Link] then compares representation to the actual DOM and updates
the DOM as needed.
[Link] only updates the changed elements in the DOM, which makes
it very efficient.
Project
Tools and Technology Used
• IDE: VScode
• Hosting: Vercel
• Frontend: HTML, CSS, Tailwind CSS, JavaScript, [Link],Redux
• Backend: [Link], [Link]
• Database: MongoDB
• Authentication: JSON Web Tokens (JWT)
• Payment Integration: Stripe
• APIs: Edamam Food Search API
• Libraries and Frameworks
• Axios,dotenv,cookie-parser,js-cookie,Toastify,Nodemon,bcrypt,chalk,chrome-
aws-lambda,Cors,morgan,multer,mongoose,nodemailer,nodemon,puppeteer
Database Screenshot
Project UI
Customer Mail UI
Features
1. Recipe Search
2. Purchase and Selling
3. User Authentication
4. Interactive Design
5. Stripe Integration
6. PDF Receipt Generation
7. Email Delivery System
8. Responsive Design
