DYNAMIC WEB PAGE DESIGNING USING REACT JS

INTERNSHIP REPORT
Submitted by
Ekta Rajubhai Prajapati (211250107007)

BACHELOR OF ENGINEERING
In
Computer Engineering Department
SHREE SWAMINARAYAN INSTITUTE OF TECHNOLOGY, BHAT

Gujarat Technological University, Ahmedabad July, 2024

Gujarat Technological University Shree Swaminarayan Institute of Technology

 SHREE SWAMINARAYAN INSTITUTE OF TECHNOLOGY, BHAT
, GIDC Bhat, Bhat, Gandhinagar, Gujarat 382428

CERTIFICATE

This is to certify that the internship report entitled “Dynamic Web Page Designing

Using React Js” has been carried out by Ekta Rajubhai Prajapati under my guidance
In Computer Engineering Department, 7th Semester of Gujarat Technological
University, Ahmedabad during the academic year 2024-25.

Prof. Shreya Bhatt Prof. Darshan Patel

Internal Guide Head of Department

Computer Engineering Computer Engineering

SSIT, Bhat, Gandhinagar SSIT, Bhat, Gandhinagar

Gujarat Technological University Shree Swaminarayan Institute of Technology

 CONFIRMATION LETTER

Gujarat Technological University Shree Swaminarayan Institute of Technology

 CERTIFICATE OF COMPLETION

Gujarat Technological University Shree Swaminarayan Institute of Technology

 ACKNOWLEDGEMENT

The successful completion of my summer internship named “Dynamic Web Page Designing Using

React Js” stands on the constant encouragement, guidance, and support, both technical &

personal of many individuals.

However, it would not have been possible without the kind support and help of many individuals
and institutional. We would like to extend our sincere thanks to all of them. We are highly in debted
to our internal guide Prof. Shreya Bhatt for their guidance and constant supervision as well as for
providing necessary support in the summer internship. This project work could not have been
completed without the expert guidance Prof. Chintan Nagrecha who shown me proper path and
direction of work.

At the same time, I would like to thank my Head of the Department Prof. Darshan Patel for his kind
cooperation and support. I would also appreciate his keen interest in helping me and his regular
guidance throughout the project. I would also like to thank all the staff members of my department
for their cooperation and help me when asked for. I am also grateful to all my colleagues for helping
me with all their resources and knowledge they could, as when required.

Ekta Rajubhai Prajapati

(211250107007)

Gujarat Technological University Shree Swaminarayan Institute of Technology

 COMPANY PROFILE

Established in 2016, incorporation with our parent IT company, INFOLABZ IT SERVICES

PVT. LTD. has managed to make it's own position in IT Sector. We are involved in Web
Development, App Development, Progressive Web Application Development, IOT solutions,
Graphics & Designing, Digital Marketing, Domain & Hosting services, SMS services etc.

In the span of seven years we have managed to deliver all projects on time with utmost accuracy
to our clients across the globe. We have dedicated teams of experienced and hard working
developers. Our developers who are always willing to take new challenges and looking forward
to learn new things, are heart of this company.

Our objective is to sustain with exponential growth in IT industry. Our mission is to deliver the
best with top notch quality every quarter and vision is to develop a product with one of its kind
concept which could be used by millions of people.

Gujarat Technological University Shree Swaminarayan Institute of Technology

 TABLE OF CONTENT

Tasks CONTENT PAGE NO

Acknowledgement I

Company Profile II

Table Of Content III

Chapter 1 Introduction

1.1 Project Summary

Chapter 2 About Technology

2.1 HTML

2.2 CSS

2.3 JavaScript

2.4 ES6

2.5 React

2.6 Bootstrap

Chapter 3 System Requirement and Specifications

3.1 Software Requirements

3.2 Hardware Requirements

Chapter 4 Task/Project Screenshots with Code

4.1 - INTRODUCTION TO JS

4.2 - INTRODUCTION TO ES6

4.3 - OBJECTS

Gujarat Technological University Shree Swaminarayan Institute of Technology

Task 1 01 JULY 2024

4.4 - JS Functions & Arrow Functions

4.5 - Async Function

4.6 - Object Data Handling

4.7 - Fetching bitcoin data

4.8 - Working with Covid API

Task 2 02 JULY 2024

4.9 - Template Literals

4.10 - Conditional Data fetching from API

4.11 - Form to Js variables

Task 3 03 JULY 2024

4.12 - Form to Table

4.13 - Search operation in API

4.14 - Bootstrap

Task 4 04 JULY 2024

4.15 - Introduction to react

4.16 - First react project

4.17 - Components in react : Functional component and custom

components

Task 5 05 JULY 2024

4.18 - React bootstrap

Gujarat Technological University Shree Swaminarayan Institute of Technology

Task 6 06 JULY 2024

4.19 - API search

4.20 - API data to table (University API)

4.21 - Passing data to API (University API)

Task 7 08 JULY 2024

4.22 - Responsive webpage development using bootstrap cards

4.23 - News API data fetching using js

Task 8 09 JULY 2024

4.24 - JavaScript Inside React

4.25 - Rendering real time bitcoin price in react component

using hooks ( state management )

Task 9 10 JULY 2024

4.26 - Passing data using hooks to bootstrap table

Final Task 11 JULY 2024

4.27 - Project Implementation

Conclusion 12 JULY 2024

4.28 - Conclusion

Chapter 5 References

Gujarat Technological University Shree Swaminarayan Institute of Technology

 Chapter 1: Introduction

1.1 Project Summary

This internship report focuses on the development of dynamic web pages using React JS. The
project involved various tasks related to web development, including learning and applying
JavaScript, ES6, React components, API integration, and responsive design using Bootstrap.

The primary objective of this internship was to gain practical experience in modern web
development technologies and methodologies. Through a series of structured tasks, I developed a
robust Library Management System that showcases the application of these technologies. This
project not only enhanced my coding skills but also provided a deep understanding of the full
software development lifecycle, from planning and design to implementation and testing.

Key highlights of the project include:

• JavaScript and ES6: Understanding the fundamental concepts of JavaScript, including

functions, objects, and asynchronous programming. ES6 features such as arrow functions,
template literals, and modules were extensively used to write cleaner and more efficient code.
• React Components: Building reusable UI components using React, which facilitated a
modular and maintainable codebase. The project also covered advanced topics like state
management using hooks and context API.
• API Integration: Fetching and manipulating data from various APIs, including a Bitcoin price
tracker and a COVID-19 statistics dashboard. These tasks underscored the importance of
asynchronous programming and error handling in real-world applications.
• Responsive Design: Utilizing Bootstrap to ensure the application is responsive and accessible
on various devices. This involved designing flexible layouts and components that adapt to
different screen sizes.

The project was an excellent opportunity to apply theoretical knowledge to practical problems,
thereby solidifying my understanding of web development. It also emphasized the importance of
writing clean, maintainable code and following best practices in software development.

Gujarat Technological University Shree Swaminarayan Institute of Technology

 Chapter 2: About Technology
2.1 HTML:
HTML (HyperText Markup Language) is the standard markup language used for creating web
pages. It forms the structure of a web page and is used to define elements like headings,
paragraphs, links, and images.

2.2 CSS:
CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a
document written in HTML. CSS defines how elements should be displayed, including layout,
colors, fonts, and styles.

2.3 JavaScript:
JavaScript is a high-level, interpreted programming language that enables interactive web pages.
It is a core technology of the World Wide Web, alongside HTML and CSS, and allows for the
implementation of complex features on web pages.

2.4 ES6:
ES6 (ECMAScript 2015) introduced significant improvements to JavaScript, including new
syntax for writing more complex applications. Features include arrow functions, template
literals, classes, and modules.

2.5 React:
React is a JavaScript library for building user interfaces. Developed by Facebook, it allows
developers to create large web applications that can update and render efficiently in response to
data changes. React is known for its component-based architecture, which promotes reusable
code.

2.6 Bootstrap:
Bootstrap is a popular front-end framework for developing responsive and mobile-first web
applications. It includes a comprehensive collection of CSS and JavaScript components that help
in designing consistent and visually appealing web interfaces. Bootstrap offers a grid system for
layout management, pre-designed components like buttons, forms, navigation bars, and utilities
for spacing, typography, and alignment.

Gujarat Technological University Shree Swaminarayan Institute of Technology

 Chapter 3: System Requirements and Specifications

3.1 Software Requirements

• Operating System: Windows 10 or higher, macOS, or Linux

• Node.js: v12.x or higher
• React: Latest version
• Code Editor: Visual Studio Code or similar
• Web Browser: Google Chrome, Mozilla Firefox, or similar

3.2 Hardware Requirements

• Processor: Intel i5 or equivalent

• RAM: 8GB or higher
• Storage: 256GB SSD or higher
• Internet Connection: Required for API integration and web development resources

Gujarat Technological University Shree Swaminarayan Institute of Technology

 Chapter 4: Task/Project Screenshots with Code

4.1 Introduction to JavaScript

JavaScript is essential for creating dynamic and interactive web pages. It allows for the
manipulation of HTML and CSS to update content, control multimedia, animate images, and
much more.

4.2 Introduction to ES6

ES6 (ECMAScript 2015) introduced significant improvements to JavaScript, including new

syntax for writing more complex applications. Features include arrow functions, template literals,
classes, and modules.

4.3 Objects

JavaScript objects are collections of properties and methods. They can represent real-world
entities and are fundamental to the language's design.

Example Code:

Output:

Gujarat Technological University Shree Swaminarayan Institute of Technology

 Task 1: 01 July 2024

4.4 JavaScript Functions & Arrow Functions

JavaScript functions are reusable blocks of code that perform a specific task. Arrow functions
provide a shorter syntax.

Example Code:

Output:

4.5 Async Function

Async functions allow for asynchronous code execution using the ‘async’ and ‘await’ keywords.

Gujarat Technological University Shree Swaminarayan Institute of Technology

 Output:

4.6 Object Data Handling

Handling object data in JavaScript involves accessing, modifying, and iterating over object
properties.

Example Code:

Output:

Gujarat Technological University Shree Swaminarayan Institute of Technology

 4.7 Fetching Bitcoin Data

Fetching real-time Bitcoin data from an API and displaying it on a web page.

Example Code:

Output:

Gujarat Technological University Shree Swaminarayan Institute of Technology

 4.8 Working with COVID API

Fetching and displaying COVID-19 data using an API.

Example Code:

Gujarat Technological University Shree Swaminarayan Institute of Technology

 Output:

Gujarat Technological University Shree Swaminarayan Institute of Technology

 Task 2: 02 July 2024

4.9 Template Literals

Template literals allow for easier string interpolation and multi-line strings in JavaScript.

Example Code:

Output:

4.10 Conditional Data Fetching from API

Fetching data from an API based on certain conditions.

Example Code:

Gujarat Technological University Shree Swaminarayan Institute of Technology

 Output:

4.11 Form to JavaScript Variables

Capturing form input values and storing them in JavaScript variables.

Example Code:

Output:

Gujarat Technological University Shree Swaminarayan Institute of Technology

 Task 3: 03 July 2024

4.12 Form to Table

Displaying form input data in a table format.

Example Code:

Gujarat Technological University Shree Swaminarayan Institute of Technology

Gujarat Technological University Shree Swaminarayan Institute of Technology
 Output:

Gujarat Technological University Shree Swaminarayan Institute of Technology

 4.13 Search Operation in API

Implementing a search operation using an API.

Example Code:

Output:

4.14 Bootstrap

Using Bootstrap for responsive web design and styling.

Bootstrap is a popular front-end framework for developing responsive and mobile-first web
applications. It includes a comprehensive collection of CSS and JavaScript components that help
in designing consistent and visually appealing web interfaces. Bootstrap offers a grid system for
layout management, pre-designed components like buttons, forms, navigation bars, and utilities
for spacing, typography, and alignment. By leveraging Bootstrap, we ensure that our Library
Management System is not only aesthetically pleasing but also functions seamlessly across
various devices and screen sizes. This contributes to an improved user experience and
accessibility.

Gujarat Technological University Shree Swaminarayan Institute of Technology

 Example Code:

Output:

Gujarat Technological University Shree Swaminarayan Institute of Technology

 Task 4: 04 July 2024

4.15 Introduction to React

React is a JavaScript library for building user interfaces. It allows developers to create reusable
UI components.

Example Code:

4.16 First React Project

Setting up and running a basic React project.

Example Code:

Gujarat Technological University Shree Swaminarayan Institute of Technology

 Output:

4.17 Components in React: Functional and Custom Components

Creating functional and custom components in React.

Example Code:

Output:

Gujarat Technological University Shree Swaminarayan Institute of Technology

 Output:

Gujarat Technological University Shree Swaminarayan Institute of Technology

 Task 5: 05 July 2024

4.18 React Bootstrap

Using React Bootstrap for styling React components.

Example Code:

Output:

Gujarat Technological University Shree Swaminarayan Institute of Technology

 Task 6: 06 July 2024

4.19 API Search

Implementing a search feature in a React application using an API.

Example Code:

Gujarat Technological University Shree Swaminarayan Institute of Technology

 Output:

Gujarat Technological University Shree Swaminarayan Institute of Technology

 4.20 API Data to Table (University API)

Fetching data from a university API and displaying it in a table.

Example Code:

Gujarat Technological University Shree Swaminarayan Institute of Technology

 Output:

4.21 Passing Data to API (University API)

Sending data to an API using a POST request.

Gujarat Technological University Shree Swaminarayan Institute of Technology

 Example Code:

Gujarat Technological University Shree Swaminarayan Institute of Technology

 Output:

Gujarat Technological University Shree Swaminarayan Institute of Technology

 Task 7: 08 July 2024

4.22 Responsive Webpage Development using Bootstrap Cards

Creating a responsive webpage using Bootstrap cards.

Example Code:

Gujarat Technological University Shree Swaminarayan Institute of Technology

 Output:

Gujarat Technological University Shree Swaminarayan Institute of Technology

 4.23 News API Data Fetching using JavaScript

Fetching news data from an API and displaying it on a webpage.

Example Code:

Gujarat Technological University Shree Swaminarayan Institute of Technology

 Output:

Gujarat Technological University Shree Swaminarayan Institute of Technology

 Task 8: 09 July 2024

4.24 JavaScript inside React

Using JavaScript within a React component to handle logic and state.

Example Code:

Output:

Gujarat Technological University Shree Swaminarayan Institute of Technology

 4.25 Rendering Real-Time Bitcoin Price in React Component using Hooks

(State Management)

Displaying real-time Bitcoin price in a React component using state management.

Example Code:

Gujarat Technological University Shree Swaminarayan Institute of Technology

 Output:

Gujarat Technological University Shree Swaminarayan Institute of Technology

 Task 9: 10 July 2024

4.26 Passing Data using Hooks to Bootstrap Table

Using React Hooks to pass data to a Bootstrap table.

Example Code:

Gujarat Technological University Shree Swaminarayan Institute of Technology

 Output:

Gujarat Technological University Shree Swaminarayan Institute of Technology

 Final Task: 11 July 2024

4.27 Project Implementation: API-Based Food Recipe Portal using React JS

For this task, the focus is on creating a powerful and dynamic web page that serves as a food
recipe portal. The application fetches data from an external API to display various food recipes.

Project Idea: API-Based Food Recipe Portal using React JS

Description: The project aims to create a web portal that fetches and displays food recipes from
an external API. Users can search for recipes, view detailed information, and see images of the
dishes. This project leverages the power of React JS to build a responsive and interactive user
interface.

API Endpoints:

• https://www.themealdb.com/api/json/v1/1/search.php?s=Arrabiata
• https://www.themealdb.com/api/json/v1/1/search.php?s=Pizza

Example Code:

App.js

Gujarat Technological University Shree Swaminarayan Institute of Technology

 SearchBar.js

Gujarat Technological University Shree Swaminarayan Institute of Technology

 RecipeList.js

RecipeDetail.js

Gujarat Technological University Shree Swaminarayan Institute of Technology

 App.css

Explanation:

1. Fetching Data: The useEffect hook fetches data from the API whenever the query changes. The
API endpoint is dynamic, changing based on the search query.
2. Handling Search: A form captures user input for the recipe search. Upon form submission, the
search query is updated, triggering a new fetch request.
3. Displaying Recipes: Recipes are displayed in Bootstrap cards, showing the recipe image, title, a
brief description, and a link to view the full recipe.

Gujarat Technological University Shree Swaminarayan Institute of Technology

 Output: The output is a fully functional food recipe portal where users can search for recipes,
view recipe details, and see images of the dishes.

Gujarat Technological University Shree Swaminarayan Institute of Technology

 Conclusion: 12 July 2024

4.28 - Conclusion

The project has provided valuable insights into the development of dynamic web applications
using React JS. Through the various tasks, I have gained hands-on experience in JavaScript, ES6,
React components, API integration, and responsive design using Bootstrap.

The implementation of a Library Management System has been particularly beneficial,

demonstrating the practical applications of these technologies in real-world scenarios. This
project has allowed me to develop a comprehensive understanding of how to create a full-fledged
web application from scratch, starting with basic JavaScript and moving towards more complex
concepts like state management and API integration in React.

Throughout the internship, I encountered various challenges that required problem-solving and
critical thinking. These included issues with asynchronous data fetching, state management in
React, and ensuring responsive design across different devices. Overcoming these challenges has
significantly enhanced my technical skills and provided me with practical knowledge that goes
beyond theoretical learning.

Moreover, the project emphasized the importance of clean, maintainable code and the use of
modern development tools and practices. Utilizing version control systems, adhering to coding
standards, and implementing best practices in web development were crucial aspects of the
project.

The internship has also highlighted the importance of collaboration and communication within a
development team. Regular interactions with mentors and peers provided valuable feedback and
new perspectives, contributing to the overall success of the project.

In conclusion, this internship has been a highly rewarding experience that has prepared me well
for future endeavors in web development. The skills and knowledge acquired during this period
will undoubtedly be beneficial in my academic and professional career.

Gujarat Technological University Shree Swaminarayan Institute of Technology

 Chapter 5: References

1. Mozilla Developer Network (MDN) Web Docs. HTML: HyperText Markup Language.
Retrieved from https://developer.mozilla.org/en-US/docs/Web/HTML.

2. Mozilla Developer Network (MDN) Web Docs. CSS: Cascading Style Sheets.
Retrieved from https://developer.mozilla.org/en-US/docs/Web/CSS.

3. ECMAScript 6: New Features: Overview & Comparison. Retrieved from http://es6-

features.org/.

4. React Official Documentation. Retrieved from https://reactjs.org/docs/getting-

started.html.

5. Bootstrap Official Documentation. Retrieved from

https://getbootstrap.com/docs/5.1/getting-started/introduction/.

6. Fetch API. Retrieved from https://developer.mozilla.org/en-

US/docs/Web/API/Fetch_API.

7. COVID-19 Data API. Retrieved from https://covid19api.com/.

8. Bitcoin Price API. Retrieved from https://www.coindesk.com/coindesk-api.

9. News API. Retrieved from https://newsapi.org/.

Gujarat Technological University Shree Swaminarayan Institute of Technology