Mern stack project report ppt

1. ONLINE
WEB-APPLICATION
(Using MERN)

2. Group -Members
Chandan Kumar M
(BC192573)
Anirudh Tantry
(BC192566)
Mahesh K S
(BC192605)
Under The Guidance of:
JAYARAM N
Assistance Proffecor
Dept. of Computer Science

3. INDEX
1. INTRODUCTION
2. What is mern
3. Why mern stack
4. Existing system
5. Proposed system
6. Layers of mern
7. System architecture
8. Modules
9. snapshots
10. Hardware and software requirements
11. Conclusion
12. reference

4. INTRODUCTION
In today's generation, most people are using technology for leading their lives and fulfilling
their daily needs. In this generation most of us using online websites for shopping for clothes,
groceries, and electronics.
We have developed one online shopping web application by using MERN stack technology
as it contains MongoDB, Express.JS framework, React.JS library, Node.JS platform.
This application is fully functional with different views(websites) for user and admin and it
also has integrated with payment gateway for checkout.
For creating these types of online shopping web applications MERN stack will be the best
option that can help us for creating the most effective and powerful web applications.

5. What is mern
MERN is acronym for four main components or can say four main
technologies that are:
1. M stands for MongoDB( Database ), mainly used for preparing document database and is a
NoSQL (Non-Structured Query Language ) Database System
2. E stands for Express, mainly used for developing Node.js web framework
3. R stands for React, mainly used for developing a client-side JavaScript framework in other
word frontend
4. N stands for Node, mainly used for developing the premier JavaScript web server

6. Why MERN STACK
In this project we are using MERN technology because it is one of the most popular stacks
currently used in web development
MERN stack is a collection of powerful technologies and robust, used to develop scalable
master web applications comprising backend, front-end, and database components.
The main purpose of using MERN stack is to develop apps using javascript only. this is
because the four technologies that make up the technology stack are all JS-based. thus, if one
knows javascript (and json), the backend, frontend, and database can be operated easily.
Because we are using javascript in all the stack it will help at faster and easier development of
full-stack web applications. MERN stack is a technology that is a user-friendly full

7. Existing System
The present scenario for shopping is to visit the shops and market manually and then from
the available product list one needs to choose the item he or she wants and then pay for the
same item mainly in cash mode is done, as not every society is well educated and aware to
use net banking or card modes or wallets etc.
Disadvantage of Existing System
1. It is less user-friendly.
2. User must go to shop and select products.
3. It is difficult to identify the required product.
4. Description of the product limited.
5. It is a time consuming process
6. Not in reach of distant users.
7. lack of different payment gateways

8. Proposed System
The purpose of this project is to makes a web application which will be easier to find
interesting clothes and easier to sell goods. This Shopping web application will make
buyers easy to find product and admin can add any number of product, also update
product and user and also advertise there product over internet which will be
attracting customers. Customers also can easily search for their favourite goods.
Advantages
• They no need to go and buy products physically they
can buy them easily by just adding to the cart and place
an order
• Time Saving
• Different Payment Gateway options.
• 24*7 accessible for all individuals And more Privacy.
• Easy and faster way to find interesting products

9. LAYERS OF MERN
Various layers of MERN Stack 1. Client layer(Views)
• These are UI which is visible to the client.
• developed using React which combinedly uses
Javascript, HTML & CSS
• On this layer, end users tries to access the
feature of our application.
2. Application Layer(Controllers)
• This layer is a Express application on top of
Node.js platform.
• This layer acts as the bridge of communication
between client & database layer.
• This layer accepts client's requests and serves
them by fetching appropriate data
3. Database Layer(Models)
• Database layer runs the mongoDB server,
• All application data is stored in this database

10. SYSTEM ARCHITECTURE

11. MODULES
Perfect Fit shopping website
1. Front End
❖ Models
❖ MongoDB
2. Back End
3. Database
❖ Routers
❖ Controllers
❖ Register
❖ Login
❖ Search product
❖ View products
❖ View product
details
❖ Add to Cart
❖ Buy product
• Online pay
• Cash On Deliver
USERS
❖ Login
❖ Dashboard
❖ product
❖ Products
• Add product
• Delete product
• Update product
❖ Update users
❖ Manage orders
❖ Manage payment
admin

12. Snapshots-
Home page

13. Register Login

14. Product detail page Cart Page

15. Payment page Admin page

16. 4.4 SOFTWARE REQUIREMENTS
• Operating system : Windows 8 and above
• Coding Language : HTML,CSS, JAVASCRIPT
• Data Base : MongoDB
• Front End : React.js
• Back End : Express.js(Node.js)
• IDE : Visual Studio Code or atom
4.5 HARDWARE REQUIREMENTS
▪ Processor : i3+
▪ Ram : 512 MB.
▪ Hard Disk : 20 GB+
▪ Processor Speed : 2 ghz+
SOFTWARE AND HARDWARE REQUIREMENTS

17. CONCLUSION
The main theme is to build an online Fashion Store(Clothing) web
application with all three i.e., Front end, back end, and Database.
This web application is a fully pledged working web application right from
the login authentication, admin authorization, add items to cart, using
payment gateway.
It can be used by any textile industry on either a small scale or a larger
scale and shop owner can make use of that web- site to sell and advertise
there product.
The web application is easy for them to access and without any
effort categories can be created and products can be added by
them. It will be very attractive for the customer to see the products
by sitting at home or office.

18. REFERANCE
1. MERN Stack [Internet]. javatpoint.com Available from: Click here
2. JavaScript [Internet]. Mozilla.org. Available from: Click Here
3. NodeJS Introduction[Internet]. Tutorialspoint.com. Available from: Click Here
4. NodeJS Pros and Cons [Internet]. Mindinventory.com. Available from: Click Here
5.Express.js Introduction [Internet]. Mozilla.org. Available from: Click Here
6.MongoDB [Internet]. Mongodb.com. Available from: Click Here
7.Virtual-DOM [Internet]. Reactjs.org. Available from: Click Here
8.Component [Internet]. Reactjs.org. Available from: Click Here
9.Props and State [Internet]. Flaviocopes.com. Available from: Click Here
10. Pros and Cons of ReactJS [Internet]. Javatpoint.com. Available from: Click Here
11. Stack technology [Internet]. Stackshare.io. Available from: Click here
12. MERN stack concept [Internet]. Mongodb.com. Available from: Click here

19. “A PICTURE IS WORTH A
THOUSAND WORDS”
THANKS!