Internship Report Rajani

Visvesvaraya Technological University
BELAGAVI, KARNATAKA
An Internship Report on
“E-commerce store for Electronics (Front End)”

Submitted to Visvesvaraya Technological University in partial fulfillment of the
requirement for the award of Bachelor of Engineering degree in Information Science
and Engineering.
Submitted by
Rajani N Chauhan 4JN20IS063
Internship carried out at
Center for Innovation and Entrepreneurship (CIE)

Ekathva Innovations Pvt. Ltd.
Internal Guide External Guide
Dr. Pavan Kumar M P Ph.D., KSET Mr. Akshay Kulkarni

Associate Professor, CEO,
Dept. of IS&E, Ekathva Innovations Pvt Ltd
JNNCE, Shivamogga JNNCE, Shivamogga
Department of Information Science & Engineering

Jawaharlal Nehru New College of Engineering
Shivamogga - 577 204
2023-24
National Education Society ®
J.N.N COLLEGE OF ENGINEERING

SHIVAMOGGA - 577204.
DEPARTMENT OF INFORMATION SCIENCE & ENGINEERING
CERTIFICATE
This is to certify that the Internship entitled
“E-commerce store for Electronics (Front End)”
Submitted by:
student of 8th semester B.E. ISE, in partial fulfillment of the requirement for the award
of degree of Bachelor of Engineering in Information Science and Engineering of
Visvesvaraya Technological University, Belagavi during the year 2023-24.
Signature of Guide Signature of Co-ordinator
Mr. Aruna Kumara P MTech,

Associate Professor, Assistant Professor,
Dept. of IS&E, Dept. of IS&E,
Signature of Co-ordinator Signature of HOD
Dr. Pavan Kumar M P Ph.D., Dr. R. Sanjeev Kunte MTech, Ph.D.,

Associate Professor, Professor & Head,
Dept. of IS&E, Dept. of IS&E,
ABSTRACT
This project focuses on the development of an e-commerce website dedicated to electronics,

employing React.js as the primary framework. The aim is to cater to the growing demand for online
shopping experiences tailored specifically for tech enthusiasts. The platform will offer an array of
features to enhance user engagement and streamline administrative tasks. These features include
robust user authentication mechanisms for secure access, a comprehensive product catalog
equipped with advanced search and filtering functionalities, immersive product detail pages
presenting detailed specifications and user-generated reviews, and an intuitive shopping cart
system for seamless browsing experiences. By harnessing the capabilities of React.js, the platform
endeavors to deliver a dynamic and responsive user interface adaptable to diverse devices and
screen sizes. This project contributes to the ongoing digital evolution of electronics retail by
providing a modern and user-centric online shopping platform.
i
ACKNOWLEDGEMENT
The satisfaction and euphoria that accompany the successful completion of any task would
be incomplete without the mention of the people who made it possible whose constant guidance
and encouragement crowned the efforts with success.
I thank to Dr. Y Vijaya Kumar, Principal, Jawaharlal Nehru New College of Engineering,
Shivamogga for giving facilities to undertake internship work.
I would wish to express my gratitude to Dr. R. Sanjeev Kunte, Head of Department,
Information Science and Engineering for providing the good working environment and for his
constant support and encouragement.
I would like to thank my guide , Assistant Professor at Department of Information
Science and Engineering for his guidance, initiative and encouragement that led me through the
internship. Also, I would like to thank our beloved coordinators Mr. Aruna Kumar P, Assistant
Professor, Dr. Pavan Kumar M. P, Associate Professor, Dept. of Information Science and
Engineering. I am highly indebted to them for their guidance and constant supervision as well as
for providing necessary information regarding the internship.
I also thank Ekathva Innovations Pvt Ltd, Shimoga and my guide Mr. Akshay K Kulkarni
for providing me an opportunity to work in the company and complete the internship program.
I am grateful to Department of Information Science and Engineering and our institution J
N N College of Engineering and for imparting me the knowledge with which I can do my best.
I would like to thank the whole teaching and non-teaching staff of Information Science and
Engineering Department.
Finally, I would to like to thank my family for supporting me to do this internship.
Thanking you,
ii
TABLE OF CONTENTS
CHAPTER NO. TITLE PAGE NO.
ABSTRACT i
ACKNOWLEDGEMENT ii
TABLE OF CONTENTS iii
LIST OF FIGURES iv
LIST OF TABLES v
CHAPTER 1 COMPANY PROFILE 1
1.1 Center for Innovation and Entrepreneurship (CIE)
1.2 Ekathva Innovations Pvt. Ltd
CHAPTER 2 ABOUT THE COMPANY 2-6
2.1 Initiatives of CIE
2.2 Additional Initiatives of CIE
2.3 Startups Under CIE
2.4 Members of CIE
2.5 Members of Ekathva Innovations
CHAPTER 3 TASK PERFORMED 7-18
3.1 Technical Skills
3.1.1 HTML
3.1.2 CSS
3.1.3 JavaScript
3.1.4 ReactJS
iii
3.1.5 Firebase
3.1.6 Firebase Firestore
3.2 Assignments
Assignment 1
Assignment 2
Assignment 3
Assignment 4
Assignment 5
Assignment 6
Assignment 7
3.3 Meeting Information
3.4 Soft Skills
CHAPTER 4 REFLECTION NOTES 19-23
4.1 Project and Implementation
4.2 Experiences
CHAPTER 5 CONCLUSION 24
Bibliography 25
Annexure 26-40
iv
LIST OF FIGURES
FIGURE NO. FIGURE NAME PAGE NO.
3.2.1 Output of assignment 1 10
3.2.7 Snapshot of assignment 7 16
4.1 Flowchart of the Project 19
4.2 Home Page 20
4.3 Login/Register Page 20
4.4 Home Page after Login 21
4.5 Available Products 21
4.6 Footer of Home Page 22
4.7 Products 22
4.8 Contact Us Page 23
v
LIST OF TABLES
TABLE NO. TABLE NAME PAGE NO.
2.1 CIE Project Funding 4

3.1 Meeting information 16
vi
E-commerce store for Electronics (Front End)
CHAPTER 1
COMPANY PROFILE
The internship was carried at Jawaharlal Nehru New College of Engineering, Shivamogga. It
was carried out under Center of Innovation and Entrepreneurship (CIE) in collaboration with
Ekathva Innovations Pvt. Ltd. The profile of CIE and Ekathva Innovations Pvt. Ltd. are discussed in
following sections.
1.1 Center for Innovation and Entrepreneurship (CIE)
Center for Innovation & Entrepreneurship (CIE) was started in the year 2018 to jointly run
various Platforms/Programs at JNNCE with the support of various Govt. Departments & agencies,
Universities, Institutions, Industries, Startups, NES Management, JNNCE Faculty, Alumni &
Students. CIE aims to create innovation, startup & Entrepreneurial ecosystem at JNNCE and in &
around Shivamogga by providing all the required facilities like incubation support, startup space,
Mentors connection, Support on IPR & Startup Registration, Investors Connection, assistance in
building Business plan, Financial Projection, team building, product launch, marketing, scale-up etc.,
CIE also provides platform to setup Development Centers & Centers of Excellence by various
startups, Industries, Agencies & MNCs at JNNCE Campus.
1.2 Ekathva Innovations Pvt. Ltd
With the zeal of simplifying the day to day problems in the field of electronics, an Indian
start-up company Ekathva Innovations Pvt., Ltd., came into mainstream. Company consists of
electronics and computer science engineers who have enthusiasm in making day to day life better
with their creative ideas. Company, which was established in mid of 2018 in the JNNCE Campus,
Shivamogga in Karnataka state is targeting electronics and information technology field. Ekathva
Innovations Pvt. Ltd. focuses on creating user-friendly and cost-effective solutions in the realm of
electronics. The company excels in designing and developing embedded systems, which are
specialized computing devices integral to various applications such as consumer electronics, medical
devices, and industrial automation. Leveraging their expertise, Ekathva Innovations also specializes
in the design and fabrication of Printed Circuit Boards (PCBs), ensuring efficient connectivity and
performance for electronic components. Moreover, the company offers innovative solutions in
industrial automation, enhancing productivity and efficiency in manufacturing processes.
Department of IS&E, JNNCE, 2023-24 Page 1

CHAPTER 2
ABOUT THE COMPANY

This chapter details on the products, services and organizational details of Ekathva Innovations Pvt.
Ltd. The milestones and departmental subdivisions are also explored.
2.1 Initiatives of CIE
NewGen IEDC: National Science and Technology Entrepreneurship Development Board

(NSTEDB), Department of Science & Technology (DST), Government of India has started New
Generation Innovation and Entrepreneurship Development Centre (NewGen IEDC) at JNNCE in
2018 to “promote knowledge based and technology-driven start-ups by harnessing young minds and
their innovation potential in an academic environment”. Students will be encouraged to take up
innovative projects with possibility of commercialization. Few amongst the “Job-Seekers” would be
converted to “Job- Generators” through the entrepreneurial route. Best 10 innovative projects in
Batch-1 (2019-20) have been selected recently in which each project team will get upto Rs. 2.5
Lakhs funding support to undergo their projects.
New Age Incubation Network (NAIN) Centre: Department of IT BT, Government of Karnataka
has started “New Age Incubation Network” Centre at JNNCE in 2014 to build startup & business
ecosystem in and around Shivamogga. Innovative Project proposals will be invited from JNNCE
students, Alumni, Research Scholars & the public every year. For Top 10 innovative ideas, there will
be a funding of upto Rs. 3.00 Lakhs per Project. Best 43 innovative projects in Batch-1 (2015-16),
Batch-2 (2016-17), Batch-3 (2017-18) & Batch-4 (2019-20) have been funded to a maximum of Rs.
3.00 Lakhs per project.
JNNRIC: JNNCE Research & Innovation Centre aims to nurture innovation and encourage
entrepreneurial talents among students, faculty and people of the region, and to facilitate
interdisciplinary research and coordinates with Incubation Center to bring up start-ups and promote
budding entrepreneurs. JNNRIC might include research proposals addressing the Agricultural
Technology, Renewable Energy and Energy Conservation System ICT for Socially relevant
problems. JNNRIC will assist students Faculty, staff and students to boost the research and
Innovation by way of funding to a certain extent (seed money) every year as shown in Table 2.1.
JNNCART: Centre for Agriculture & Rural Technology, a Centre for Appropriate and Agricultural
Technologies was setup at JNNCE with the objective of serving farming community and other
people of the Malnad region. Students will be motivated to address problems faced by the farmers

through innovative, cost effective farming implements as a part of their project work as prescribed in
academic curriculum.
CART nurtures innovation, and encourages entrepreneurial talents among students, faculty and
people of the region to help agricultural needs of the farmers. It facilitates interdisciplinary research
and coordinates with incubation centre to bring up start-ups and budding entrepreneurs.
CART aims to Encourage students and faculty for innovation, idea generation and product
development, Provide seed fund to transform an idea into a product, Arrange workshops for students
to create awareness in the field of agri-based entrepreneurship, Help with the patenting process,
Inspire and support staff and students to achieve their potential and meet the challenges of society,
Facilitate development of at least two innovative products that are socially relevant. The five projects
selected and excecuted for the year 2018-19 are
1. Arecanut Plucker cum Sprayer

2. Multipurpose Hybrid Sprayer
3. Mini Trencher Trenching Machine
4. Hydrophobic sand to combat water scarcity in irrigation
5. Trenching Machine
2.2 Additional Initiatives of CIE
The Technology Business Incubator (TBI) initiated by the Karnataka Council for
Technological Upgradation (KCTU), under the auspices of the Government of Karnataka, is poised
to catalyze a paradigm shift in the entrepreneurial landscape. With a steadfast commitment to
fostering innovation and entrepreneurship, the TBI endeavors to unlock the latent potential of
individual innovators, nurturing their ideas into viable technological ventures. Central to its mission
is the empowerment of aspiring entrepreneurs through a comprehensive suite of support services.
These include a state-of-the-art Common Instrumentation Facility to facilitate research and
development, mentorship programs connecting innovators with seasoned industry experts, a robust
network of investors and funding agencies, dynamic co-working spaces fostering collaboration, and
capacity-building initiatives aimed at honing entrepreneurial skills. Through these endeavors, the
TBI aims to propel a new wave of technology-based entrepreneurship, driving economic growth and
societal impact in the region.

Table 2.1: CIE Project Funding
Sl.No Project Type Funding/Project No. of projects otal Funding

(INR) (in INR)
1. Innovative Up to Rs. 10 2,50,000
Project 25,000/-
2. Research & Up to Rs. 7 3,50,000

Innovation 50,000/-
Project
3. Research Project Up to Rs. 9 9,00,000
1,00,000/-
Office Space, Small Manufacturing Units, access to laboratories etc., for all associated individuals,
innovators, startups, MSMEs & Companies.
JNNCE-MHRD Institution’s Innovation Council: In association with MHRD’s Innovation Cell

(MIC) of AICTE, CIE JNNCE is working towards establishing an Institution’s Innovation Council.
Institution’s Innovation Council (IIC) at the Institute is a unique model based on Hub-Spoke and
coherence approach to align with the innovation and entrepreneurship promotion and support
programs are being organized by various departments and ensures round the year activities in the
campus for effective engagement, learning and practicing innovation and entrepreneurship among
students and faculty community. Ideally, the Institution’s Innovation Council is a faculty-led but
student- centric body formed by the institute with the active representation of entrepreneurial
faculties, students and experts representations from regional ecosystem enablers, preincubation and
incubation centers within and outside the institute and work in synergize manner towards to provide
a platform to encourage, inspire and nurture young students by exposing them to new ideas and
process of resulting in innovative activities & entrepreneurial in their formative years.
Intellectual Property Cell (IP Cell): In association with KSCST, VTPC and InovaTree, CIE
JNNCE is working towards establishing an IP Cell to provide all required information & guidance on
IPR to Students, Alumni, Faculty, Research Scholars, Innovators, Startups, Companies,
Industrialists, Academic Institutions & Universities in and around Shivamogga.

Entrepreneurship Cell (E-Cell):In association with E-Cell IIT Madras, CIE JNNCE is working
towards establishing an E-Cell with the objective to develop spirit of Entrepreneurship among the
students, to motivate students towards self-employment and entrepreneurship, to blend technical
skills of students with entrepreneurial skills to convert their innovative ideas into enterprise.
Activities of this cell include Conducting Awareness Programmes, Skill Development Programmes,
Workshops, Business Plan Competitions, Boot Camps, Entrepreneurial Talks, Mentoring Students,
taking up innovative projects, Assisting in getting financial support, Company Incorporation, IPR
etc., for Startups.
Technology Activities & Programs (TAP): A club of passion driven young students excelling
together, either be it in the process of creating innovations, be it being active & rebellious dreamers
in turning real time challenges prevailing in academics & to develop an individual in all possible
ways by learning & sharing the skillsets. TAP is a knowledge sharing & knowledge gaining platform
for all the interested students from different streams & semesters which helps every individual
student to be an out-of-the-box thinker which helps to do innovative projects. Here the students can
conduct group activities, undergo projects etc., Ideas/Projects developed from TAP teams will be
supported by other platforms for further development & commercialization.
NAIN Creative Club: NAIN Creative Club, an initiative of NAIN Centre was started on 23rd
September 2017 to provide a open platform for students to learn, excel & train students by
conducting workshops & Seminars on various cutting edge technologies & languages. Club supports
inter-departmental activities, which ignites the students to think out of box and helps to gain &
explore creativity.
2.3 Startups under CIE
Ekathva Innovations Pvt. Ltd. was started in July 2018 by Mr. Vikas H C & team from NAIN first
batch
CIE also has following development centres:
1. RootsGoods Development Centre by RootsGoods OPC Pvt. Ltd.

2. Sunrise Digital Media Development Centre by Sunrise Digital Media Pvt. Ltd.
3. Ventalyst Development Centre by Ventalyst Pvt. Ltd.
4. Silfra Tech Development Centre by Silfra Technologies Pvt. Ltd.
5. Many other Innovators, Project Teams, Startups, MSMEs & Companies are in discussions
and in pipeline to setup Startups, Development Centers & Centers of Excellence at

JNNCE under CIE. CIE also is in the process of establishing JNNCE Research Park with
the objective of pursuing research in niche and cutting edge technologies and science.
2.4 Members of CIE
1. Mr. Mallesh Kumar K S, Project Manager, Center for Innovation & Entrepreneurship
Incubation Centre Manager, New Age Incubation Network Centre Jawaharlal Nehru New
College of Engineering, Shivamogga
2. Mr. Nrupatunga C M, Project Coordinator, NewGen IEDC
3. Dr. Manjunath P Prof. & Head, Dept. of ECE College Coordinator, NAIN Centre
4. Dr. Basappaji, Prof. Dept. of Mechanical Engineering, Chief Coordinator, NewGen IEDC
5. Dr. E Basavaraj Professor, Dept. of Mechanical Engineering, Co-Ordinator, JNNCART
6. Dr. Karthika B S, Assoc. Prof. and Head, Dept. of Civil Engineering, Convener, JNNRIC
2.5 Members of Ekathva Innovations
With the ideas of innovation in creating the better future in the ever-changing field of
electronics and IT, company wants to be pioneer in some of the products which will change the
perspective of everyday life to the layman too. With the motto of invent for betterment, Ekathva aims
to strive hard in bringing out the economic, uncomplicated, simple products to the world.
Ekathva Innovations currently having 5 members in team 4 directors and 2 employees
1. Vikas H C Co-Founder, CEO and Embedded Developer

2. Akshay K Kulkarni Co-Founder, COO and Full Stack Software Developer
3. Koushik R Udupa Co-Founder and Embedded Developer
4. Akshay K Co-Founder and CFO
5. Manthan K Full Stack Developer
They are currently working on a Embedded Product which is under patent process and on
Information Technology services like Website Development, App Development and Customised
Software.

CHAPTER 3
TASKS PERFORMED
This chapter gives details abouts the tasks performed during the internship, assignments carried out
during internships, about ReactJS, MongoDB and project carried out during internship.
3.1 Technical Skills
This internship gave us an opportunity to learn various technologies in web development and
it also helped us to learn the language JavaScript. In this internship of four weeks , initial four days
were utilized to understand the foundation of web development that is html, css and basics of
JavaScript. Next few days were dedicated for the learning of ReactJS and its fundamentals in Visual
Studio Code Environment. Next few days were dedicated for learning the routing of web pages,
navigation, props and states. Next few days were dedicated for learning of the extra libraries used in
React such as reactstrap, react-router-dom.
3.1.1 HTML
HyperText Markup Language or HTML is the standard markup language for documents
designed to be displayed in web browser. It defines the content and structure of web content. It is
often assisted by technologies such as CSS(Cascading style sheets) and programming language
JavaScript. Web browsers receive HTML documents from a web server or from local storage and
render the documents into multimedia web pages. HTML describes the structure of a web page
semantically and originally included cues for its appearance. HTML elements are building blocks of
web pages.
3.1.2 CSS
Cascading Style Sheets (CSS) is a style sheet language used for specifying the presentation
and styling of a document written in a markup language such as HTML or XML. CSS is designed to
enable the separation of content and presentation, including layout, colors and fonts. This separation
can improve content accessibility and provide more flexibility and control in the specification of
presentation characteristics; enable multiple web pages to share formatting by specifying the relevant
CSS in a separate .css file, which reduces complexity and repetition inthe structural content; and
enable the .css file to be cached to improve the page load speed between the pages that share the file
and its formatting.

3.1.3 JavaScript
JavaScript is a powerful programming language that can add interactivity to a website. It was
invented by Brendan Eich. JavaScript is versatile and beginner-friendly. With more experience,
you'll be able to create games, animated 2D and 3D graphics, comprehensive database-driven apps,
and much more. JavaScript itself is relatively compact, yet very flexible. Developers have written a
variety of tools on top of the core JavaScript language, unlocking a vast amount of functionality with
minimum effort.
3.1.4 ReactJS
React (also known as ReactJS) is a free open-source front-end JavaScript library created by
Meta(formerly known as Facebook). It is maintained by Meta and a community of developers. React
can be used to develop single page, mobile, or server-rendered applications with frameworks like
Next.JS.React is only concerned with the user interface and rendering components to the DOM.
React applications often rely on libraries for routing and other clientside functionality. A key
advantage of React is that it only renders those parts of the page that have changed, avoiding
unnecessary rendering of unchanged DOM elements. React code is made up of entities called
components. These components are modular and reusable. React applications typically consist of
many layers of components. The components are rendered to a root element in the DOM using the
React DOM library. When rendering a component, values are passed between components through
props. Advantages of ReactJS
 Easy to use
 It supports server-side programming
 It has reusable components
 It is extensible
 It is SEO friendly
 It is fast as it uses virtual DOM
3.1.5 Firebase
Firebase is a mobile and web application development platform owned by Google. It provides
a suite of backend services and tools to help developers build high-quality apps quickly and easily.
Some of the services provided by Firebase include:
 Realtime Database --A cloud-hosted NoSQL database that allows developers to store and
sync data in real-time between clients.

 Authentication --A service that allows developers to authenticate users using email and
password, social media, or other methods.
 Hosting --A service that allows developers to deploy and host web apps quickly and easily.
 Storage – can be used to store content
 Analytics --provides insights into app usage, user engagement, and other metrics.
3.1.6 Firebase Firestore
Firebase Firestore stands as a cornerstone within Google's Firebase platform, offering

developers a versatile and scalable NoSQL cloud database solution. Designed with flexibility and
scalability in mind, Firestore presents a document-oriented data model that seamlessly
accommodates the storage, synchronization, and querying needs of web, mobile, and server
applications alike. One of Firestore's key strengths lies in its adept handling of real-time data
synchronization across multiple clients. This feature facilitates the development of collaborative and
responsive applications, eliminating the complexities associated with server-side logic. Developers
can leverage Firestore to create applications that maintain synchronized data across various
platforms, ensuring a seamless user experience. Central to Firestore's functionality is its organization
of data into collections and documents, each capable of housing fields with diverse data types. This
hierarchical structure provides developers with a straightforward yet powerful means of managing
and accessing data within their applications. Moreover, Firestore boasts robust querying capabilities,
enabling developers to retrieve data efficiently based on specific criteria, including intricate filters
and sorting options. Furthermore, Firestore seamlessly integrates with other Firebase services, such
as authentication and cloud functions, thereby offering a comprehensive solution for building
modern, cloud-based applications. By streamlining the integration process and providing a unified
ecosystem, Firestore empowers developers to focus their efforts on crafting innovative features and
functionality for their applications. In summary, Firestore emerges as a compelling choice for
developers across a spectrum of use cases, thanks to its user-friendly interface, real-time
synchronization capabilities, robust querying options, and seamless integration with other Firebase
services. By alleviating infrastructure and scalability concerns, Firestore enables developers to
channel their energy into building exceptional applications that meet the evolving needs of users in
today's dynamic digital landscape.

3.2 Assignments
Assignment 1
This assignment was made to learn about the HTML, CSS fundamentals. The assignment was to
display username, phone number, email-id using HTML and CSS for Login Page.
Figure 3.2.1 Output of assignment 1
The Figure 3.2.1 is the output of the assignment 1 which is the simple login page created using the
HTML and CSS containing the name , gmail and phone of the person. A button is created first which
when clicked displays the information of the person.

Assignment 2
This assignment was made to learn about the HTML, CSS fundamentals. The assignment is to
create a resume using HTML and CSS.
Figure 3.2.2 Output of assignment
The Figure 3.2.2 is the output of the assignment 2 which is the resume created using
the HTML and CSS

Assignment 3
The assignment 3 was done to get familiarise with the react environment and it was done for
the better understanding of the ReactJS. The assignment was done to learn the commands of
ReactJS. To accomplish the better understanding an user login was made in React.
React commands:
npm create-react-app my-app: This command is used to create react app.
npm run : Runs react app in developer mode.
npm run build : Builds the app for production to the build folder. It correctly bundles React
in production mode and optimizes the build for the best performance.
The Figure 3.2.3 shows the output of the user input login form.

Assignment 4
The assignment was done to get practice of using ReactJS. The resume was created
in React environment.
Rajani N Chauhan
The Figure 3.2.4 shows the output of assignment 3, the resume was created in React
environment.

Assignment 5
The assignment was done for the better understanding of the Reactstrap. Unlike some
component libraries, Reactstrap does not embed its own styles, and instead depends on the
Bootstrap CSS framework for its styles and theme. This allows you to have consistent styles
across your Reactbased components and static parts of your site,and allows you to include
your own custom Bootstrap theme when needed. Unlike using Bootstrap in HTML,
Reactstrap exports all the correct Bootstrap classes automatically, and don't need to use or
include Bootstrap's JavaScript files or add data attributes to trigger functionality. Instead,
components are defined in Reactfriendly components with appropriate props for you to
control. To install Reactstrp command is : npm install reactstrap react react-dom.
The Figure 3.2.5 is the output of assignment 5 which shows the navigation between the web
pages.

Assignment 6
This assignment was done for the better understanding of the navigation between the web
pages in React environment. An internal routing property is used for navigation among the
web pages. Usually React does not have routing property a third-party library is to be
installed to enable routing. The library is installed by the command: npm i -D react-router-
dom. The react router dom helps to display multiple views in a single page application.
The Figure 3.2.6 is the output of assignment 6 showing before update & delete details, after
delete details and after update details respectively.

Assignment 7
The assignment was done to learn carrying out CRUD operations in React environment.
CRUD operations means create, read, update and delete operations. The packages or
modules required for the integration of firebase is installed by the command npm install
firebase.
Figure 3.2.7 Snapshot of assignment 7
3.3 Meeting Information

Table 3.1 Meeting information
Sl. No Date Meeting Outcomes
1 16-08-2023 Basics of HTML ,CSS and JavaScript
2 17-08-2023 Introduction to React with environment setup
3 18-08-2023 JSX and Rendering Elements
4 19-08-2023 React Components and Life Cycle
5 21-08-2023 React Components and Life Cycle

6 22-08-2023 Axios and Authentication
7 23-08-2023 Exploring Firebase
8 24-08-2023 Project Assigned: E-Store (User Side)
9 14-09-2023 Mid-Project Review
10 16-09-2023 Final Submission of the project
3.4 Soft Skills

The following soft skills were acquired during four weeks of internship.
 Time Management : Time management is the process of planning and exercising

conscious control of time spent on specific activities, especially to increase
effectiveness, efficiency, and productivity. It involves a juggling act of various
demands upon a person relating to work, social life, family, hobbies, personal
interests, and commitments with the finiteness of time. Using time effectively gives
the person "choice" on spending or managing activities at their own time and
expediency
 Personality Development : Personality development encompasses the dynamic
construction and deconstruction of integrative characteristics that distinguish an
individual in terms of interpersonal behavioral traits. Indeed, personality
development is ever-changing and subject to contextual factors and life-altering
experiences. Personality development is also dimensional in description and
subjective in nature. That is, personality development can be seen as a continuum
varying in degrees of intensity and change.
 Communication : Effective Communication is significant for managers in the
organizations so as to perform the basic functions of management, i.e., Planning,
Organizing, Leading and Controlling. Communication helps managers to perform
their jobs and responsibilities. Communication serves as a foundation for planning.
All the essential information must be communicated to the managers who in-turn
must communicate the plans so as to implement them.

 Email writting: Email communication is important type of written communication.

Today, communications are conducted among business firms, organizations and
companies mostly via emails. Moreover email provides most authentic and secure
means of communication. The records of past emails can be retrieved very easily in
moments.
 Group Discussion practice: A little practice on Group Discussion was done and we
were taught how to start the GD conversation and how to end it effectively to clear
the round

CHAPTER 4
REFLECTION NOTES
4.1 Project and Implementation
The project was carried out during internship. The project was “E-commerce store for
Electronics (Front End)”. The project was to build a platform for electronic store shopping.
The project was done using ReactJS. The web app consists of a login page, after logging in
the user is directed towards home page where a user finds product page, about page and
contact us page.
Figure 4.1 Flowchart of the project
The Figure 4.1 shows the flow of the project

Figure 4.2 Home Page

The Figure 4.2 shows the Home Page of our project. In the header section it contains
Products, About , Contact page at the left and Login, Cart buttons at right.
Figure 4.3 Login / Register Page
The Figure 4.3 shows the Login / Register Page of our project, here the user can login by
providing their earlier credentials or can create new account or continue with Google.

Figure 4.4 Home Page after Login

The Figure 4.4 shows the Home Page after Login of our project.
Figure 4.5 Available Products

The Figure 4.5 shows the Available Products of our project which includes Sensors &
Modules, Boards & Programmers, Robotics and Power Supply.

Figure 4.6 Footer of Home Page

The Figure 4.6 shows the Footer of Home Page of our project.
Figure 4.7 Products

The Figure 4.7 shows the Products of our project based on the category chosen by the user.

Figure 4.8 Contact Us Page
The Figure 4.8 shows the Contact Us Page of our project.
4.2 Experiences
My internship as a Web Development Intern for Ekathva innovations has been the
most rewarding and motivational experiences I had during my time as a student at
Jawaharlal Nehru New college of Engineering. Because of the lessons I learned from my
supervisor and cooperating mentors, I am confident that I will continue to grow and develop
professionally and in my personal endeavours. I learnt about many trending topics of which
industries are using in a very efficient way. I got a chance to learn about soft skills and
interview cracking techniques which is gonna help me in my future placements and to work
individually on project. Some soft skills were attained during my internship. The following
soft skills were acquired during four weeks of internship.

CHAPTER 5
CONCLUSION
Our E-store web application built with React.js offers a seamless and efficient platform for
purchasing electronic products. With its intuitive user interface and smooth navigation,
users can easily browse through a wide range of products, compare prices, and make
purchases hassle-free. React.js plays a pivotal role in enhancing the user experience by
providing faster response times, ensuring that users can swiftly interact with the application
without experiencing delays or lags. Its virtual DOM enables efficient rendering of
components, resulting in a snappy and responsive interface. Additionally, React.js facilitates
seamless integration with other technologies, enabling dynamic content updates and
personalized recommendations based on user preferences. Ultimately, our platform powered
by React.js delivers a user-centric shopping experience, empowering users to make
informed decisions and enjoy a convenient and enjoyable shopping journey for electronic
products.

Bibliography
1. https://react.dev/
2. https://legacy.reactjs.org/docs/getting-started.html
3. https://www.w3schools.com/react/
4. https://www.npmjs.com/package/reactstrap
5. https://getbootstrap.com/
6. Firebase | Google’s Mobile and Web App Development Platform

Annexure 1
import React, {useState} from 'react'
import Nav from './nav'
import Rout from './rout';
import {BrowserRouter} from 'react-router-dom';
import Footer from './footer';
import Productdetail from './productdetail';
const App = () => {
// add to cart
const [cart, setCart] = useState([])
//product Detail
const [close, setClose] = useState(false)
const [detail, setDetail] = useState([])
//filter product
const [product, setProduct] = useState(Productdetail)
const searchbtn = (product) =>
{
const change = Productdetail.filter((x) =>
{
return x.Cat === product
})
setProduct(change)
}
//product detail
const view = (product) =>
{
setDetail([{...product}])
setClose(true)
}
// add to cart
const addtocart = (product) =>
{
const exsit = cart.find((x) =>
{
return x.id === product.id
})
if(exsit)
{
alert("This Product is already added to cart")
}
else
{
setCart([...cart, {...product, qty:1}])
alert("product is added to cart")
}
}
console.log(cart)
return (
<>
<BrowserRouter>
<Nav searchbtn={searchbtn}/>
<Rout product={product} setProduct={setProduct} detail={detail} view={view}
close={close} setClose={setClose} cart={cart} setCart={setCart} addtocart={addtocart}/>
<Footer />
</BrowserRouter>
</>
)
}
export default App

Annexure 2
import React from 'react'
import { AiOutlineClose } from 'react-icons/ai';
import { Link } from 'react-router-dom';
import './cart.css'
const Cart = ({cart, setCart}) => {
// increace qty
const incqty = (product) =>
{
{
})
setCart(cart.map((curElm) =>
{
return curElm.id === product.id ? {...exsit, qty: exsit.qty + 1} : curElm
}))
}
// Dec Qty
const decqty = (product) =>
{
{
})
setCart(cart.map((curElm) =>
{
return curElm.id === product.id ? {...exsit, qty: exsit.qty - 1} : curElm
}))
}
//Remove cart product
const removeproduct = (product) =>
{
{
})
if(exsit.qty > 0)
{
setCart(cart.filter((x) =>
{
return x.id !== product.id
}))
}
}
// Total price
const Totalprice = cart.reduce((price, item) => price + item.qty * item.Price, 0)
return (
<>
<div className='cartcontainer'>
{cart.length === 0 &&

<div className='emptycart'>
<h2 className='empty'>Cart is Empty</h2>
<Link to='/product' className='emptycartbtn'>Shop Now</Link>
</div>
}
<div className='contant'>
{
cart.map((curElm) =>
{
return(
<div className='cart_item' key={curElm.id}>
<div className='img_box'>
<img src={curElm.Img} alt={curElm.Title}></img>
</div>
<div className='detail'>
<div className='info'>
<h4>{curElm.Cat}</h4>
<h3>{curElm.Title}</h3>
<p>Price: ₹{curElm.Price}</p>
<div className='qty'>
<button className='incqty' onClick={() =>
incqty(curElm)}>+</button>
<input type='text' value={curElm.qty}></input>
<button className='decqty' onClick={() => decqty(curElm)}>-
</button>
</div>
<h4 className='subtotal'>sub total: ₹{curElm.Price *
curElm.qty}</h4>
</div>
<div className='close'>
<button onClick={() => removeproduct(curElm)}><AiOutlineClose
/></button>
</div>
</div>
</div> ) })}
</div>
{
cart.length > 0 &&
<>
<h2 className='totalprice'>total: ₹ {Totalprice}</h2>
<button className='checkout' onClick={() =>alert("Your order is processing...")}
>checkout</button>
</>
}
</div>
</>
)} export default Cart

Annexure 3

import { AiOutlineShoppingCart } from 'react-icons/ai';
import { BsEye } from 'react-icons/bs';
import { AiOutlineHeart, AiOutlineCloseCircle } from 'react-icons/ai';
import { useAuth0 } from "@auth0/auth0-react";
import Productdetail from './productdetail'
import './product.css'
const Product = ({product, setProduct, detail, view, close, setClose, addtocart}) => {
const { loginWithRedirect,isAuthenticated} = useAuth0();
const filtterproduct = (product) =>
{
const update = Productdetail.filter((x) =>
{
return x.Cat === product;
})
setProduct(update);
}
const AllProducts = () =>
{
setProduct(Productdetail)
}
return (
<>
{
close ?
<div className='product_detail'>
<div className='container'>
<button onClick={() => setClose(false)}
className='closebtn'><AiOutlineCloseCircle /></button>
{
detail.map((curElm) =>
{
return(
<div className='productbox'>
<div className='img-box'>
</div>
<h3>₹{curElm.Price}</h3>
<h3>Rating:{curElm.Rating}</h3>
</div>
</div>
)
})
}
<div className='productbox'></div>

</div>
</div> : null
}
<div className='products'>
<h2>Products</h2>
<p>Home . products</p>
<div className='filter'>
<div className='categories'>
<h3>categories</h3>
<ul>
<li onClick={() => AllProducts ()}>All Products</li>
<li onClick={() => filtterproduct ("Sensors & Modules")}>Sensors &
Modules</li>
<li onClick={() => filtterproduct ("Boards & Programmers")}>Boards &
Programmers</li>
<li onClick={() => filtterproduct ("Robotics")}>Robotics</li>
<li onClick={() => filtterproduct ("Power Supply")}>Power Supply</li>
<li onClick={() => filtterproduct ("Tools & Connectors")}>Tools &
Connectors</li>
</ul>
</div>
</div>
<div className='contant'>
{
product.map((curElm) =>
{
return(
<>
<div className='box' key={curElm.id}>
<div className='icon'>
{
isAuthenticated ?
<li onClick={() => addtocart
(curElm)}><AiOutlineShoppingCart /></li>
:
<li onClick={() =>
loginWithRedirect()}><AiOutlineShoppingCart /></li>
}
<li onClick={() => view (curElm)}><BsEye /></li>
</div>
</div>
<p>{curElm.Cat}</p>
<h4>₹{curElm.Price}</h4>
</div>
</div>
</>
)
})
}
</div>
</div>
</div>
</div>
</>
)
}
export default Product

Annexure 4
const Productdetail =
[
{
id:1,
Title:" ECG Sensor",
Cat: 'Sensors & Modules',
Price: '200',
Img: './img/ECG_sensor.jpg',
Rating:'★★★★★'
},
{
id:2,
Title:"Finger Print Sensor.",
Price: '168',
Img: './img/finger_sensor.jpg',
Rating:'★★★★'
},
{
id:3,
Title:"ESP Wifi Module ",
Price: '490',
Img: './img/ESP_module.jpg',
},
{
id:4,
Title:"LASER Module",
Price: '1049',
Img: './img/laser_module.jpg',
},
{
id:5,
Title:"Raspberry Pi",
Cat: 'Boards & Programmers',
Price: '490',
Img: './img/rasberrypi_board.jpg',
},
{
id:6,
Title:"Arduino",
Cat: 'Boards & Programmers',
Price: '1560',
Img: './img/aurdino.jpg',
},
{
id:7,
Title:"MX Connectors",
Cat: 'Tools & Connectors',
Price: '2098',
Img: './img/mx_tools.jpg',
},
{
id:8,
Title:"Wire Cutter",
Cat: 'Tools & Connectors',
Price: '3860',
Img: './img/cutter_tools.jpg',
},
{
id:9,
Title:"Quadcopter & Drone",
Cat: 'Robotics',
Price: '6930',
Img: './img/drone_robotics.jpg',
},
{
id:10,
Title:"Solar Panels & Cells",
Cat: 'Robotics',
Price: '5036',
Img: './img/solar_robotics.webp',
},
{
id:11,
Title:"Adapter",
Cat: 'Power Supply',
Price: '1980',
Img: './img/adapter_power.jpg',
},
{

id:12,
Title:"SMPS",
Cat: 'Power Supply',
Price: '7930',
Img: './img/smps_power.webp',
},
]
export default Productdetail;

Annexure 5
import { AiOutlineInstagram } from 'react-icons/ai';
import { RiFacebookFill } from 'react-icons/ri';
import { AiOutlineTwitter } from 'react-icons/ai';
import { BsYoutube } from 'react-icons/bs';
import './footer.css'
const Footer = () => {
return (
<>
<div className='footer'>
<div className='about'>
<div className='logo'>
<img src='./img/estore_logo.jpg' alt='logo'></img>
</div>
<p>Electrify Your world by our devices</p>
<li><RiFacebookFill /></li>
<li><AiOutlineInstagram /></li>
<li><AiOutlineTwitter /></li>
<li><BsYoutube /></li>
</div>
</div>
</div>
<div className='account'>
<h3>My Account</h3>
<ul>
<li>Account</li>
<li>Cart</li>
</ul>
</div>
<div className='page'>
<h3>Pages</h3>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</>
) } export default Footer

Annexure 6
import {Link } from 'react-router-dom'
import { BsArrowRight } from 'react-icons/bs';
import { FiTruck } from 'react-icons/fi';
import { BsCurrencyDollar } from 'react-icons/bs';
import { CiPercent } from 'react-icons/ci';
import { BiHeadphone } from 'react-icons/bi';
import { AiOutlineShoppingCart, AiOutlineCloseCircle } from 'react-icons/ai';
import { BsEye } from 'react-icons/bs';
import { AiOutlineHeart } from 'react-icons/ai';
import Homeproduct from './homeproduct';
import './home.css'
const Home = ({detail, view, close, setClose, addtocart}) => {
return (
<>
{
close ?
<div className='product_detail'>
<button onClick={() => setClose(false)}
className='closebtn'><AiOutlineCloseCircle /></button>
{
detail.map((curElm) =>
{
return(
<div className='img-box'>
</div>
<h3>{curElm.Price}</h3>
<button>Add To Cart</button>
</div>
</div>
)
})
}
<div className='productbox'></div>
</div>
</div> : null
}
<div className='top_banner'>
</div>
<img
className="card-img img-fluid"
src="./img/img.jpeg"
alt="Card"
height={700}
width={1400}
/>
<br></br>
<Link to='/product' className='link'><b>Shop Now </b><BsArrowRight
/></Link>
</div>
</div>
</div>
<div className='product_type'>
<div className='box'>
<img src='./img/ECG_sensor.jpg' alt='Sensors & module'></img>
</div>
<h4>Sensors & Modules</h4>
<p>4 products</p>
</div>
</div>
<img src='./img/rasberrypi_board.jpg' alt='Boards & Programmers'></img>
</div>
<h4>Boards & Programmers</h4>
<p>2 products</p>
</div>
</div>
<img src='./img/solar_robotics.webp' alt='Robotics'></img>
</div>

<h4>Robotics</h4>
<p>2 products</p>
</div>
</div>
<img src='./img/adapter_power.jpg' alt='Adapter'></img>
</div>
<h4>Power Supply</h4>
<p>2 products</p>
</div>
</div>
</div>
</div>
<div className='about'>
<FiTruck />
</div>
<h3>Free Shipping</h3>
<p>Order above ₹1000</p>
</div>
</div>
<BsCurrencyDollar />
</div>
<h3>Return & Refund</h3>
<p>Money Back Gaurenty</p>
</div>
</div>
<CiPercent />
</div>
<h3>Member Discount</h3>
<p>On every Order</p>
</div>

</div>
<BiHeadphone />
</div>
<h3>Customer Support</h3>
<p>Every Time Call Support</p>
</div>
</div>
</div>
</div>
<div className='banner'>
<h1>LATEST EQUIPMENTS ADDED</h1>
<br></br>
<br></br>
<br></br>
<Link to='/product' className='link'>Shop Now <BsArrowRight /></Link>
</div>
<img src='./img/led_home.png' alt='sliderimg'></img>
</div>
</div>
</div>
</>
)
}
export default Home

Internship Report Rajani

Uploaded by

Copyright:

Available Formats

You might also like

Internship Report Rajani

Uploaded by

Document Information

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

Internship Report Rajani

Uploaded by

Copyright:

Available Formats

Visvesvaraya Technological University

“E-commerce store for Electronics (Front End)”

Rajani N Chauhan 4JN20IS063

Internship carried out at

Center for Innovation and Entrepreneurship (CIE)

Internal Guide External Guide

Dr. Pavan Kumar M P Ph.D., KSET Mr. Akshay Kulkarni

Department of Information Science & Engineering

J.N.N COLLEGE OF ENGINEERING

“E-commerce store for Electronics (Front End)”

Signature of Guide Signature of Co-ordinator

Mr. Aruna Kumara P MTech,

Signature of Co-ordinator Signature of HOD

Dr. Pavan Kumar M P Ph.D., Dr. R. Sanjeev Kunte MTech, Ph.D.,

This project focuses on the development of an e-commerce website dedicated to electronics,

Rajani N Chauhan 4JN20IS063

CHAPTER NO. TITLE PAGE NO.

TABLE OF CONTENTS iii

CHAPTER 1 COMPANY PROFILE 1

1.1 Center for Innovation and Entrepreneurship (CIE)

1.2 Ekathva Innovations Pvt. Ltd

CHAPTER 2 ABOUT THE COMPANY 2-6

2.1 Initiatives of CIE

2.2 Additional Initiatives of CIE

2.3 Startups Under CIE

2.4 Members of CIE

2.5 Members of Ekathva Innovations

CHAPTER 3 TASK PERFORMED 7-18

3.1 Technical Skills

3.1.6 Firebase Firestore

3.3 Meeting Information

3.4 Soft Skills

CHAPTER 4 REFLECTION NOTES 19-23

4.1 Project and Implementation

3.2.1 Output of assignment 1 10

3.2.2 Output of assignment 2 11

3.2.3 Output of assignment 3 12

3.2.4 Output of assignment 4 13

3.2.5 Output of assignment 5 14

3.2.6 Output of assignment 6 15

3.2.7 Snapshot of assignment 7 16

4.1 Flowchart of the Project 19

4.2 Home Page 20

4.3 Login/Register Page 20

4.4 Home Page after Login 21

4.5 Available Products 21

4.6 Footer of Home Page 22

4.8 Contact Us Page 23

TABLE NO. TABLE NAME PAGE NO.

2.1 CIE Project Funding 4

1.1 Center for Innovation and Entrepreneurship (CIE)

1.2 Ekathva Innovations Pvt. Ltd

Department of IS&E, JNNCE, 2023-24 Page 1

ABOUT THE COMPANY

2.1 Initiatives of CIE

NewGen IEDC: National Science and Technology Entrepreneurship Development Board

Department of IS&E, JNNCE, 2023-24 Page 2

1. Arecanut Plucker cum Sprayer