E-Commerce Website: Major Project Report

Major Project Report
e-Commerce
Website
Using Next.JS , React.JS and
Sanity
MCA 2nd SEMESTER

Index
1. Abstract
2. Aim
3. Introduction
4. Dependencies
5. Tools & Software Used
6. App Workflow
7. Project Workflow
8. Conclusion
CANDIDATE’S DECLARATION
I hereby declare that the work which is being presented
in this report titled “Project Report on eCommerce
Website” in partial fulfilment of the requirements for the
award of MCA Degree of and submitted to Department
of computer application, Suresh Gyan Vihar University
Jaipur is an authentic record of my own work carried
out by me during the period of 3 months under the
guidance and supervision of Mr. Anil Pal.
The matter presented in this report embodies the

results of my own work and has not been submitted
anywhere else for award of any other qualification. This
is to certify that the above statement made by me is
correct to the best of my knowledge and belief.
Ankit Kumar -100237

Gautam Sharma – 101045
Nishant Kumar Sen - 100236
Acknowledgement
First and foremost, I would like to express my deepest
gratitude to Suresh Gyan Vihar University, Jaipur for
giving me an opportunity to work under the guidance of
learned faculty members. I am really thankful for their
strong commitment to keep in touch despite of their busy
schedule, and also for the time spent during the discussion.
I express my gratitude to Mr. Anil Pal for their external
support and guidance throughout the project. I would like
to convey my thanks to the university personnel for helping
me in gathering data and also giving me a better
understanding of the current situation of the IT
infrastructure. Above all, I would like to thank God, my
family and friends who have supported me throughout the
duration of the project and allowed me to focus my
attention on completing this project.
AIM
To make a Fully Responsive Website with Front End &

Backend using :
Java Script Libraries:

 React.js
 Next.js
 Sanity
 Stripe Payment Gateway.
This website will deal with online electronic commerce and

have a proper payment gateway.
MAJOR PROJECT REPORT
MCA 2nd SEM.
E-Commerce Website
By
Ankit Kumar, Gautam Sharma, Nishant Sen
Abstract:
React is a JavaScript library used to build user interfaces

on the frontend. An open-source project originally created
by Facebook, it’s one of the most popular JavaScript
libraries. The project aims to provide broad compatibility
with React alternatives, but will continue to evolve with
React as APIs like Concurrent Mode and Server
Components are introduced.
1. Introduction:
React was primarily used to render views in web or

mobile applications. It allowed developers to create
reusable components that are independent of each
other. So when any critical feature of a web
application broke, they were still better off with the
remaining elements. Also, React brought this
fantastic feature called Virtual DOM that enabled
developers to implement SSR without needing to
update the whole view each time during an update.
The rest of the paper has the following

organization. React is introduced and using it to
develop a web application which can run on any
platform just using a single codebase with detailed
modules and libraries. Conclusion and future scope
are outlined.
This Project is built with the use of React.JS

Library and using Sanity and Next.JS for front-end
and backend work.
2. Project Dependencies:
This Project required some dependencies or the

modules which helped in building the project. They
are mentioned below:
Package.json: Version:
 Sanity-Client 3.2.0
 Babel-Preset-React 7.16.7
 Babel-core 7.17.9
 Sanity-image-URL 1.0.1
 Stripe / Stripe.JS 1.25.0
 Canvas-confetti 1.5.1
 NEXT 12.1.0
 NEXT-Sanity-image 3.2.1
 React 17.0.2
 React-dom 17.0.2
 React-hot-toast 2.2.0
 React-icon 4.3.1
 Stripe 8.209.0
3. Libraries :
 React JS :
React is a JavaScript library used to build
user interfaces on the frontend. An open-
source project originally created by
Facebook, it’s one of the most popular
JavaScript libraries, with over 180,000 stars
on Github. The goal of React is to allow
developers to quickly build out their
interfaces.
To explain all about React.js, we’ll start by

introducing JavaScript libraries themselves.
Next, we’ll learn more about React by
exploring what it was designed as a solution
to, and its major features. Of these features,
one of the most important ones is
components. These are custom, reusable
features which resemble HTML-like
elements. Using state and props, React
organizes how data is stored and handled in
your application.
 NEXT JS :
Next.js is an open-source web development

framework built on top of Node.js enabling
React-based web applications functionalities
such as server-side rendering and generating
static websites. React documentation
mentions Next.js among "Recommended
Toolchains" advising it to developers as a
solution when "Building a server-rendered
website with Node.js".
Where traditional React apps can only

render their content in the client-side
browser, Next.js extends this functionality to
include applications rendered on the server-
side.
 Stripe Payment Gateway:
Stripe was founded in 2010 with the mission

of making it easier to accept payments over
the internet. At the time, taking credit cards
meant working with a legacy processor or a
middleman broker who would provide you
with access to a processor.
Then there were the banks you had to deal

with, the credit card companies themselves,
and a slew of additional services that were
often poorly explained and sold by various
third parties. Long story short, accepting
credit cards was an incredibly complicated
and poorly explained process.
Stripe set out to fix a lot of that by

streamlining the process. It added services
and features like fraud protection, fixed rates
regardless of network, and an application
programming interface (API) that allowed
app makers to easily incorporate card
processing into their apps.
 Sanity:
Sanity.io is the platform for structured

content. With Sanity.io you can manage
your text, images, and other media with
APIs. You can also use the open-source
single page application Sanity Studio to
quickly set up an editing environment that
you can customize. With Sanity.io you have
access to a bunch of APIs, libraries, and
tooling that helps you leverage the benefits
of having all your content available as a
single source of truth. This article will
quickly walk you through some central
concepts, giving you a head start.
Before we dive in, there are three important

concepts to bear in mind:
Sanity.io has a real-time datastore for

structured content, and supporting APIs for
assets, user management, and more.
Sanity Studio is a user interface for
managing content. It's an open-source React
Single Page Application that you can
customize and host wherever you want.
There are also SDKs, libraries, and tools that
let you query your content and integrate it
with websites, services, and other
applications; wherever you need content.
4. App Work Flow:
 React JS:
 Advance React Belt Practice:

o Folder and File Structure
o Hooks and Refs
 Advance State Management:
o State Management of whole Project
o React Context API
 NEXT JS :
 File Based Routing
 Data Fetching:
o Server Side Rendering
o Static Generation
 NEXT JS as Backend Endpoint
 Stripe Payment Gateway :
 Payments
 Products
 Shipping Rates
 Entire Checkout Process
 Sanity:
 Manages Contents (like products)

 Modify Homepage and all products data
 Sanity Provides, file storage, Content,
Databases.
 Deploy:
 Integrate with Git hub repo

 Git hub repository then is Deployed into
Netlify Hosting
5. Project Workflow:
 Home Page 1:
 Product Page:
 Footer Detail:
 Product Details:
 Adding to Cart:
 Checkout Form:
 Order Confirmation:
 Payment Invoice:
6.Conclusion:
By this Project we had successfully built a fully

responsive dynamic website with proper
workflow.
And as Payment method we have used Stripe
Payment Gateway, for using database and
managing products, we use Sanity and sanity
studio.
Also to modify product and Banner, we have
used sanity studio.
Here react is used to render components on top
of next.js, React is also used for context API and
state management.
At last we committed our project code to GitHub

And deployed our final build to Netlify Hosting.
A Special Thanks to Mr. Anil Pal sir for Guiding

us throughout the project.
Our Project URL link:
https://21stecommerce.netlify.app/

E-Commerce Website: Major Project Report

Uploaded by

Copyright:

Available Formats

E-Commerce Website: Major Project Report

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

E-Commerce Website: Major Project Report

Uploaded by

Copyright:

Available Formats

Major Project Report

MCA 2nd SEMESTER

The matter presented in this report embodies the

Ankit Kumar -100237

To make a Fully Responsive Website with Front End &

Java Script Libraries:

This website will deal with online electronic commerce and

React is a JavaScript library used to build user interfaces

React was primarily used to render views in web or

The rest of the paper has the following

This Project is built with the use of React.JS

This Project required some dependencies or the

To explain all about React.js, we’ll start by

Next.js is an open-source web development

Where traditional React apps can only

 Stripe Payment Gateway:

Stripe was founded in 2010 with the mission

Then there were the banks you had to deal

Stripe set out to fix a lot of that by

Sanity.io is the platform for structured

Before we dive in, there are three important

Sanity.io has a real-time datastore for

 Advance React Belt Practice:

 File Based Routing

 Stripe Payment Gateway :

 Manages Contents (like products)

 Integrate with Git hub repo

By this Project we had successfully built a fully

At last we committed our project code to GitHub

A Special Thanks to Mr. Anil Pal sir for Guiding

Our Project URL link:

You might also like