PROJECT REPORT

ON
FULL STACK WEB DESIGNING

Submitted b y:
Mohammed Radheef A H

1 |Pa ge
 ACKNOWLEDGEMENT

I believe that my project will be complete only after I thank the people who
have helped me in making this project successful.
I would like to take the opportunity to express my humble gratitude to
the employees of Zephyr Technology under whom I executed this project.
Because of their constant guidance and willingness to share their vast
knowledge made me understand this project and its manifestations in great
depths and helped to complete the assigned tasks.

Finally, yet importantly, I would like to express my heartfelt thanks to

my family members for their help and wishes for the successful completion
of the project.

MOHAMMED
RADHEEF A H

2|Page
 INTRODUCTION ABOUT THE COMPANY

ZEPHYR TECHNOLOGIES is a software company delivering high quality,

cost effective, reliable result-oriented web and e-commerce solutions on time
for a global clientele. Professionalism, skill and expertise are the tools we use
to make the web work for your business bringing in maximum return on your
investment in shortest possible time.

They have delivered on IT projects of varying complexities for their very

demanding and internet clients spread across the globe. They develop
unique web solutions which ensures increased efficiency and competitive
advantage for your business and thus to your end users.

Their tools are professionalism, skills and expertise that translate into
delivering quality work at every step for any project we undertake. They
work towards getting better than the best out of every team member at
ZEPHYR TECHNOLOGIES, which means when you hire the mall round
quality is assured off as you want it. Their advantage quality includes
protection of intellectual for the source codes developed specifically for
your business. They do not sell the source codes to the third parties and all
elements that they create for your web solution belongs to you.
ZEPHYR TECHNOLOGIES project managers and business analysts place
great value for building a clean communication link with you as they
consider it the key ingredient for the success of any project at hand.
 ABSTRACT

Full Stack Web Development refers to the comprehensive development of

web applications from both the front-end (client-side) and back-end
(server-side) perspectives. A full stack developer possesses the skills and
knowledge to design, develop, and manage the complete architecture of
web-based applications, including user interfaces, server logic, databases,
and APIs. Front-end technologies such as HTML, CSS, JavaScript, and
modern frameworks like React or Angular are used to create interactive
user experiences. On the back-end, languages and frameworks like Node.js,
Express, Python, Django, or PHP, along with database systems such as
MySQL, MongoDB, or PostgreSQL, are utilized to handle data
processing, authentication, and server communication. Full stack
development enables streamlined workflow, improved project scalability,
and better communication across teams by unifying both client-side and
server-side development under a single expertise. This approach is
increasingly valued in modern software engineering for building efficient,
scalable, and maintainable web solutions.

As web technologies continue to evolve, the role of full stack developers

becomes increasingly important in delivering robust, scalable, and secure
web solutions. This discipline not only requires proficiency in a broad set
of tools and languages but also emphasizes continuous learning to keep
up with the fast-paced nature of web development.

4|Page
 Table of Contents
Contents
Page No

Title Page
1

Acknowledgement
2

Introduction about the Company

3

Abstract
4

Table of Contents
5

Introduction
6-13

Methodology
14-16

Implementation
17-21

Results
22-25

Conclusion
26-27
CHAPTER: 1
INTRODUCTION
1.1 Introduction:
As part of an internship training program, I developed a fully functional E-
commerce web application inspired by Myntra using the MERN
(MongoDB, Express.js, React.js, and Node.js) stack. The primary goal of
this project was to understand the complete lifecycle of a web application,
including backend integration, database management, and frontend UI
development. The platform allows users to browse through a wide variety of
fashion products, view product details, and add items to their shopping cart.
I implemented user authentication features including registration and login
functionality. The product data is stored in MongoDB and fetched
dynamically using Express APIs. React was used to build reusable
components and ensure a smooth single-page application experience. Styling
was handled with clean CSS to provide a simple and intuitive user interface.
This project emphasized working with RESTful APIs and managing state
efficiently using React hooks and the Context API. On the backend,
Express.js handles routes for user authentication, product management, and
cart
functionality, while MongoDB stores user and product data. The admin
interface supports direct insertion of product details via MongoDB Compass,
enabling smooth data updates. Users can browse products, view detailed
information, and add items to their cart with ease. The shopping experience is
enhanced by a clean and responsive layout, ensuring a smooth interface across
devices. Passwords are securely hashed using bcrypt, and Axios manages
seamless communication between frontend and backend.

1.2 Problem Statement

6|Page
 In today's digital age, users prefer shopping from the comfort of their homes rather
than visiting physical stores. However, building a full-featured and user-friendly e-
commerce platform is a complex task. Many developers struggle with integrating
frontend and backend systems efficiently. This project aims to replicate key features
of Myntra using the MERN stack. It offers product browsing, detailed views, user
registration/login, and cart functionalities. The goal is to provide a seamless
shopping experience through a responsive and well-structured web application.

1.3Front End Technologies

1.3.1 HTML:

HTML (Hyper Text Markup Language) is the standard language used to create
and structure content on the web. It tells the browser how to display text,
images, links, and other elements on a web pages.
Basic Concepts of HTML:

• Structure: Every HTML document follows a simple structure with a

beginning, middle, and end. It includes a head section for metadata and a body
section for visible content.
• Elements and Tags: HTML uses elements to define different parts of a
webpages like headings, paragraphs, images, and links. Tags usually come in
pairs: an opening tag and a closing tag.

• Attributes: Tags can include attributes to give extra information, such as links
to other pages or descriptions of images.

•
Nesting: HTML elements can be placed inside other elements. This helps
group content in a logical way, like putting a list of items inside a list
container.
Headings and Paragraphs: Headings (from largest to smallest) and
•
paragraphs help organize the content and make it readable.
• Lists, Images, and Links: HTML allows the use of bullet or numbered lists,
the insertion of images, and links to other pages or websites.
• Comments: Developers can add notes in the code that are not shown in the
browser—these are called comments.

1.3.2 CSS:

CSS (CSS (Cascading Style Sheets) is a stylesheet language used to describe

the look and layout of a web page created with HTML. While HTML
structures the content, CSS controls how it appears like colors, fonts, spacing,
alignment, animations, and responsiveness.

Basic Concepts of CSS:

• Styling Content: CSS changes how HTML elements look. For example, it
can make text red, center it on the screen, or give a background color.
• Selectors: CSS targets specific HTML elements using selectors—this tells the
browser which part of the webpage to style.

• Properties and Values: CSS works with property-value pairs. A property

might be color, and its value could be blue. Together, they define a specific
style.

•
Box Model: Every HTML element is treated as a box with margins, borders,
padding, and content. Understanding this helps with layout and spacing.
Positioning and Layout: CSS allows you to place elements where you want
•
them on the page using techniques like Flexbox, Grid, or positioning rules
(static, relative, absolute, fixed).
Responsiveness: CSS makes websites adjust to different screen sizes (like
•
phones or tablets) using media queries.

8|Page
1.3.4. JAVASCRIPT:

JavaScript is a high-level, interpreted programming language that adds

interactivity, dynamic behavior, and advanced functionality to websites. It
runs in the browser and is a core technology of web development alongside
HTML and CSS.

Following are the key features of javascript:

Client-Side Scripting: JavaScript runs directly in the user's browser, allowing

web pages to respond to user actions without needing to reload the page. Event
Handling: It can detect and respond to user actions like clicks, mouse
movements, key presses, and more, making websites interactive Dynamic
Content Update: JavaScript can change HTML and CSS on the fly, enabling
things like form validation, showing/hiding elements, and updating content
without refreshing the page.
Object-Oriented and Functional Support: JavaScript supports both object
oriented and functional programming styles, making it flexible for various
coding approaches.
Wide Ecosystem and Integration: JavaScript works with libraries (like jQuery)
and frameworks (like React, Angular, Vue) and integrates easily with backend
technologies like Node.js.
 CHAPTER: 2

METHODOLOGY
The project was developed using the MERN stack, focusing on building a
scalable and responsive E-commerce platform like Myntra. The backend APIs
were built using Node.js and Express.js, with MongoDB storing all user,
product, and order data. The frontend was created using React.js, ensuring a
dynamic user experience. Axios was used for seamless API communication,
while Mongoose handled data modeling. Authentication and secure password
handling were implemented using JWT and bcrypt.

a. Requirement Analysis:

• Analyzed user expectations and identified core features such as product

listings, cart, authentication, and order system.

• Selected the MERN stack (MongoDB, Express, React, Node.js) for its
flexibility and scalability.

• Defined the UI layout inspired by Myntra’s design for familiarity and ease of
navigation.The aim was to deliver a clean, responsive, and user-friendly
interface.

b. Environment Setup:

• Initialized backend using Node.js and Express with proper folder

structure.Installed essential libraries like mongoose, dotenv, cors, and
nodemon for efficient development.

14 | P a g e
• Set up the frontend using Create React App and organized it into components
and pages.Installed tools like axios and react-router-dom for API handling and
routing.

• Configured MongoDB Atlas for secure, cloud-based database access and

connected it to the server.Created a .env file to store credentials and maintain
security best practices.

c. Backend Development:

• Created RESTful API endpoints for user auth, product management, cart
operations, and orders.Ensured proper routing using Express and organized
routes into separate modules

• Integrated Mongoose to define schemas and interact with MongoDB

effectively.Applied validation to ensure data consistency and reliability.

d. Frontend Development:

• Built React components like Navbar, Home, and ProductDetail to structure the
UI efficiently.This approach promotes reusability and better project
organization.

• Used React Router for smooth client-side routing across pages. It enables
single-page application behavior for fast navigation. Applied CSS for clean UI
design and responsiveness.

• Styled components with CSS and ensured responsiveness using Flexbox. This
makes the UI adaptable to different screen sizes and devices.
• Connected frontend to backend using Axios for real-time data. Ensured
product data, user data, and cart info load dynamically.

e. Product Management:

• Fetched product data from the backend and displayed it on Home.Users can
browse items with images, price, and description.

• Created a dynamic Product Detail page with useParams in React.This allows

loading of individual product info based on URL

• Implemented Add to Cart functionality using React context.Maintains cart

state globally across all components.

• Displayed cart items with image, name, quantity, and total price. Allowed
users to remove items or adjust quantity in cart.These updates reflect instantly
with proper state management.

f. User Authentication:

• Created Register and Login forms with form validation. Secured user data
and issued JWT tokens upon successful login.

16 | P a g e
 CHAPTER: 3

IMPLEMENTATION

1.React JS

1. Install Node.js and npm

• React requires Node.js and npm (Node Package Manager).

• Download and install from https://nodejs.org

2. Create a New React App

• Use the Command:

npx create-react-app project-name

• This sets up the basic structure and dependencies for your

React app.

3. Navigate to Your Project Folder

• Use the Command:

cd project-name

4. Start the Development Server

• Use the Command:

npm start

5. Understand the Project

Structure

• public/: Static files like images and index.html

 • src/: Contains all React code (components, styles, etc.)
• App.js: Main component rendered in the browser
• index.js: Entry point that renders <App />

6. Create Components

• Break your UI into small, reusable pieces

(components).
example: Header, Searchbar, Login etc.

7. Use JSX for UI Structure

• Write HTML-like code inside JavaScript files using

JSX for designing UI elements.

8. Add Routing

• Use react-router-dom to navigate between pages without

reloading:

npm install react-router dom

9. Style the Components

• Use CSS, SCSS, or frameworks like Bootstrap or Tailwind

for styling.

10.Build the Project for

Deployment

• When finished, create a production-ready version:

npm run build

2.Mongo DB

1. MongoDB Atlas Setup

18 | P a g e
 • Created a cluster on MongoDB Atlas for
cloud-based database hosting.

• Whitelisted IP address and created a database

user with a password.

2. Connecting Backend

• Connected backend using Mongoose with

MongoDB Atlas URI.

3. CRUD Operations

• Implemented add, get, update, and delete functionalities

for products.
• Used Mongoose methods like find, save, and
findByIdAndUpdate.
3.Express JS

1. Initialize Node.js project

• Open the terminal and go to your project folder

• Run this command to generate a package.json file:

npm init -y

2. Install Express.js

• Use the Command:

npm install express

• This adds Express to your project dependencies.

3. Creation of server file

• Create a file named index.js (or app.js) in the root directory.

const express = require('express');

const app = express();
 4. Add a simple route

app.get('/', (req, res) => res.send("Welcome to Express!"));

5. Start the server

• Add this code below the route to make your server listen on
port 5000
app.listen(5000, () => {

console.log("Server running on http://localhost:5000");});

• Now running server

node index.js

3.1 Working This E-commerce project begins on the front-end with a user-

friendly React
interface that allows users to browse products. The Home page displays a
search bar which filter’s products based on search and product listings fetched
dynamically from the backend using Axios. Users can view product details by
clicking on any product card, which routes them to a detailed product page.
From there, they can select desired items and add them to the cart using
context-based state management.

The cart page updates dynamically as users add or remove items. Users need to
register or log in to proceed with the order placement.Once logged in, the user
can proceed to the Order Page, where they input shipping details like address,
city, and country. On clicking the "Place Order" button, all the order data
including user ID, cart items, and shipping info is sent to the backend. The
backend, built with Node.js and Express.js, processes this request. It stores the

20 | P a g e
order in MongoDB through Mongoose models and schema. After the order
is placed, the user is redirected to a success page. This entire flow ensures a
secure and structured order system.

The backend also provides APIs for user authentication, product listing, cart
operations, and order placement. MongoDB Atlas acts as the cloud database,
storing user details, products, and order records. Admins or users can later view
the list of orders placed from the Orders page, which pulls the data based on the
logged-in user's ID. The project structure is modular, separating concerns into
routes, models, and controllers. It demonstrates full-stack functionality and
smooth interaction between the client and server. Overall, it gives a real-world
shopping experience with essential E-commerce features.
CHAPTER: 4

RESULTS

Fig 3.1: Login page

The login page enables users to authenticate using their credentials to access their

accounts and shopping preferences. It ensures that users can manage their profile,

track orders, and view their shopping cart.

22 | P a g e
 Fig 3.2: Registration Page

The registration page allows users to create an account by entering personal

details like email, username, and password. Once registered, users gain access

to personalized features like order history and cart management.

Fig 3.3: Home Page

23 | P a g e
The home page serves as the landing page for users, displaying featured

products and offering easy navigation. It gives users an overview of the

platform and highlights key categories for shopping

Fig 3.4: Home Page

Fig 3.5: Product detail page

24 | P a g e
The product detail page provides users with detailed information about a

selected product, including its image, description, price, and stock availability.

It allows users to add the item to their cart and proceed with the purchase.

Fig 3.6: Cart page

The cart page displays all the products added by the user and calculates the

total price for the order. It gives users the option to proceed to checkout or

continue shopping for additional items

25 | P a g e
CHAPTER: 5

CONCLUSION

This E-commerce Myntra Clone project marks the successful implementation

of a full-stack web application using the MERN stack. It replicates essential
functionalities of a real-world online shopping platform, allowing users to
browse products, view product details, register, log in, and manage their
shopping cart. The integration of MongoDB for storing user and product data
ensures efficient data handling. With Express.js and Node.js managing the
backend API services, the application maintains fast and scalable
performance. React has been used on the frontend to create a dynamic and
user-friendly interface. Styling was kept simple and responsive, making it
adaptable across devices.
The development process involved various concepts like REST APIs, routing,
database connections, authentication, and state management. Each component
was built with modularity and maintainability in mind, ensuring the project
remains scalable. The use of MongoDB Atlas enabled remote database hosting,
enhancing accessibility and deployment readiness. Through this project, a deeper
understanding of full-stack development and cloud-based data handling was
gained. It also improved problem-solving skills, especially while debugging
backend errors and refining frontend layouts. This project can serve as a
foundation for more complex systems like payment integration, admin panels, or
inventory management. It stands as a
practical application of internship-level training in web development.

26 | P a g e
This project can serve as a foundation for more complex systems like payment
integration, admin panels, or inventory management. It stands as a practical
application of internship-level training in web development.

27 | P a g e