LIVE PORTAL FOR RAAH - NGO USING REACTJS

A PROJECT REPORT

Submitted by
JAYDIP BHUTAIYA

210830116512

In partial fulfillment for the award of the degree of

BACHELOR OF ENGINEERING
in
Information Technology
Dr. Subhash Technical Campus – Junagadh

Gujarat Technological University, Ahmedabad

July, 2024
 400110

Dr. Subhash Technical Campus

Dr. Subhash Road, Junagadh

CERTIFICATE

This is to certify that the project report submitted along with the project entitled Live Portal for
Raah - Ngo Using ReactJs has been carried out by Jaydip Bhutaiya under my guidance in
partial fulfillment for the degree of Bachelor of Engineering in IT, 8th Semester of Gujarat
Technological University, Ahmadabad during the academic year 2023-24.

Internal Guide Head of the Department

Prof. Mayur M. Jani Dr. Hemant S. Patel

I
GTU DSTC
400110

COMPANY CERTIFICATE

II
GTU DSTC
 400110

Dr. Subhash Technical Campus

Dr. Subhash Road, Junagadh

DECLARATION

We hereby declare that the Internship report submitted along with the Internship entitled
Live Portal for Raah - Ngo Using ReactJs submitted in partial fulfillment for the degree
of Bachelor of Engineering in Information Technology to Gujarat Technological
University, Ahmedabad, is a bonafide record of original project work carried out by me at
Infolabz IT Services Pvt. Ltd. under the supervision of Ms. Sakshi Tiwari and that no
part of this report has been directly copied from any students’ reports or taken from any other
source, without providing due reference.

Name of the Student Sign of Student

1. Jaydip Bhutaiya ________________

III
GTU DSTC
400110

ACKNOWLEDGEMENT

I wish to express our sincere gratitude to our External guide Ms. Sakshi Tiwari for
continuously guiding me at the company and answering all my doubts with patience. I
would like to thank our head, Dr. Hemant H. Patel, IT Department, Dr. Subhash
Technical Campus, for providing us an opportunity to do the Internship and giving us all
the support and guidance.

We also thank our parents, friends and all the members of the family for their precious
support and encouragement which they had provided in completion of our work. In addition
to that, we would also like to mention the company personals who gave us the permission
to use and experience the valuable resources required for the internship.

Thus, in conclusion to the above said, we once again thank the staff members of Infolabz
IT Services Pvt. Ltd. for their valuable support in completion of the project.

Thank You

Jaydip Bhutaiya

IV
GTU DSTC
400110

ABSTRACT

Raah is a non-governmental organization (NGO) dedicated to empowering marginalized

communities through education, healthcare, and sustainable development initiatives.
Operating with a vision of fostering inclusive growth, Raah focuses on providing essential
services and resources to underserved populations, particularly in rural areas. Through
collaborative efforts with local stakeholders and volunteers, Raah strives to bridge the gap
between resources and needs, fostering self-reliance and resilience within communities.
Key areas of intervention include promoting access to education for children, enhancing
healthcare facilities, advocating for environmental conservation, and facilitating skill
development programs for socio-economic empowerment. Committed to creating a
brighter future, Raah's holistic approach emphasizes community participation and
sustainable solutions to address the complex challenges facing vulnerable populations.

V
GTU DSTC
 400110

LIST OF FIGURES

Fig 3.1 HTML and CSS ................................................................................................. 9

Fig 3.2 Top News ........................................................................................................... 9
Fig 3.3 National News .................................................................................................... 10
Fig 3.4 Business News .................................................................................................... 10
Fig 3.5 Sports News ........................................................................................................ 11
Fig 3.6 Home .................................................................................................................. 11
Fig 3.7 Events ................................................................................................................. 12
Fig 3.8 Contact Us .......................................................................................................... 12
Fig 4.1 DFD 0 Raah - NGO ............................................................................................ 14
Fig 4.2 DFD 1 User ......................................................................................................... 15
Fig 4.3 DFD 1 Admin ..................................................................................................... 15
Fig 4.4 contactdetailDB .................................................................................................. 16
Fig 4.5 contactusDB ....................................................................................................... 16
Fig 4.6 EventsDB ........................................................................................................... 16
Fig 4.7 FeedbackDB ....................................................................................................... 17
Fig 4.8 MemberDB ........................................................................................................ 17
Fig 4.9 servicesDB ......................................................................................................... 17
Fig 4.10 strategyDB ......................................................................................................... 18
Fig 4.11 usersDB ............................................................................................................. 18
Fig 4.12 volunteerRequestDB ......................................................................................... 18
Fig 4.13 Homepage ......................................................................................................... 19
Fig 4.14 Services page .................................................................................................... 19
Fig 4.15 Single Service Page .......................................................................................... 20

VI
GTU DSTC
400110

LIST OF TABLES

Table 2.1 Weekly Tasks ............................................................................................. 2

VII
GTU DSTC
400110

TABLE OF CONTENTS

Sr. No Chapter No Topic Name Page No.

1 Title Page .......................................................................
2 Internal Certificate ......................................................... I
3 Internship Completion Certificate ................................. II
4 Student Declaration ....................................................... III
5 Acknowledgement ......................................................... IV
6 Abstract .......................................................................... V
7 List of Figures ................................................................ VI
8 List of Tables ................................................................. VII
9 Table of Contents ........................................................... VIII
10 Chapter: 1 Introduction 1
11 1.1 About the company ............................................ 2
12 1.2 Aim and Objectives of the Internship ................ 2
13 1.3 About Technology ............................................. 3
14 Chapter: 2 Roles and Responsibilities during internship 4
15 2.1 Daily Tasks and Activities ................................. 5
16 2.2 My Roles and Responsibilities .......................... 6
17 2.3 Problems Given ................................................. 6
18 Chapter: 3 Skills Learned 7
19 3.1 About the Skill/s ................................................ 8
20 3.2 How do I learn the skills ................................... 9
21 Chapter: 4 Design & Implementation 13
22 4.1 Data Flow Diagram ........................................... 15
23 4.2 Data Dictionaries ............................................... 16
24 4.3 Screenshots ........................................................ 19
25 Chapter: 5 Overall Experience 21
26 5.1 Technical Experience ........................................ 22
27 5.2 Personal Experience .......................................... 22
28 Chapter: 6 Conclusion 23

VIII
GTU DSTC
400110

29 6.1 Conclusion ......................................................... 24

30 Chapter: 7 Future Scope 25
31 7.1 Future Scope ...................................................... 26
32 Chapter: 8 Bibliography 27
33 8.1 Bibliography ...................................................... 28
34 Appendix–I Student’s Weekly Record ............................................... 29
35 Appendix-II Feedback Form by Industry Expert ................................ 41

IX
GTU DSTC
400110 Introduction

CHAPTER: 1

Introduction

1.1 About the Company

1.2 Aim and Objectives of the Internship
1.3 About Technology

1
GTU DSTC
400110 Introduction

1.1 About the Company

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

SERVICES PVT. LTD. has managed to make its 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
hardworking 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 concepts which could be used by millions of people.

1.2 Aim and Objectives of the Internship

The internship program is designed to provide students engaged in a field experience with
an opportunity to share their insights, to explore the links between students’ academic
preparation and their field work, and to assist participants in developing and carrying out
the major research project which will serve to culminate their internship experience.

During this internship, the knowledge, skills, and attitudes learned in the program can be
applied. The aim of the internship provides a direction to the activities, helps to focus on a
result.

2
GTU DSTC
400110 Introduction

1.3 About Technology

React is a JavaScript library primarily utilized for building single-page web applications
(SPAs) using HTML, CSS, and JavaScript (often in the form of JSX). React adopts a
component-based architecture, allowing developers to create reusable and encapsulated UI
components that efficiently update in response to data changes. React emphasizes a
declarative programming paradigm, simplifying the creation of interactive user interfaces.
Data sharing among components is facilitated through props and state management.

Key features of React include:

• Component-based Architecture: Encourages modularity and reusability.

• Virtual DOM: Enhances performance by minimizing direct manipulation of the
DOM.
• State Management: Utilizes props and state to manage component data and
behavior.
• Lifecycle Methods: Provide hooks for executing code at specific points in a
component's lifecycle.
• React Hooks: Allow functional components to utilize state and other React
features.
• JSX: A syntax extension that allows writing HTML-like code within JavaScript,
enhancing component readability.
• Unidirectional Data Flow: Facilitates predictable state management and easier
debugging.
• React Router: Enables client-side routing within single-page applications for
better navigation.
• Testing Utilities: Offers a comprehensive testing ecosystem for unit, integration,
and end-to-end testing.
• Community and Ecosystem: Extensive support, documentation, and a rich
ecosystem of libraries and tools for building robust applications.

3
GTU DSTC
400110 Roles and Responsibilities during internship

CHAPTER: 2

Roles and Responsibilities during internship

2.1 Daily Tasks and Activities

2.2 My Roles and Responsibilities
2.3 Problems Given

4
GTU DSTC
400110 Roles and Responsibilities during internship

2.1 Daily Tasks and Activities

Week Date Tasks & Activities

No.
1 17/01/2024 - 21/01/2024 Getting started with react. installing react and
understanding it. Learned Function component and
class components.
2 22/01/2024 – 28/01/2024 Revised HTML and CSS basic concept and performed
given tasks related to HTML and CSS.
3 29/01/2024 – 04/02/2024 Started JavaScript. Learned about normal function
and arrow function. Fetching data and how to use
template literals.
4 05/02/2024 – 11/02/2024 Learned how to fetch data from API, how to pass data
from form to variable, started bootstrap framework.
5 12/02/2024 – 18/02/2024 Learned about react router, React Bootstrap, learned
about JavaScript popup boxes.
6 19/02/2024 – 25/02/2024 Learned how to convert html templates into reactjs
templates.
7 26/02/2024 – 03/03/2024 Learned about how to use JavaScript inside react. And
how to use react Map and Props.
8 04/03/2024 – 10/03/2024 Learned how to use map and props simultaneously in
react.
9 11/03/2024 – 17/03/2024 Started learning hooks. useState, useEffect and
performed some related tasks.
10 18/03/2024 –24/03/2024 Learned how to implement hooks, props, map using api
in template. And started Project.
11 25/03/2024 – 31/03/2024 Designed Home page. Polished JavaScript.

12 01/04/2024 – 07/04/2024 Designed Contact Us page. Learned more about

bootstrap.

Table: 2.1 Weekly Tasks

5
GTU DSTC
400110 Roles and Responsibilities during internship

2.2 My Roles and Responsibilities

• Role: Junior Intern.

• Responsibilities: During this internship I have to complete all the tasks which is
given by my guide, also have to analyze work flow of these tasks.

2.3 Problems Give

During this internship there are various problems given by guide and I have to solve all
these problems.
Some of them are given below:
• Designing Problems for demonstrating HTML/CSS
• Logical Problems
• JavaScript Problems
• API related problems
• ReactJs related Problems

6
GTU DSTC
400110 Skills Learned

CHAPTER: 3

Skills Learned

3.1 About the Skill/s

3.2 How do I learn the skill/s

7
GTU DSTC
400110 Skills Learned

3.1 About the skill/s

❖ HTML:
• HTML is stands for Hyper Text Markup Language.
• HTML is standard markup language which is used to create layout of web
page.
• HTML elements are basic building block of HTML and webpages.
• HTML elements are represented by <> symbol. Like <p> tag.

❖ CSS:
• CSS stands for Cascading Style Sheet.
• CSS is used to design web pages.
• Using CSS, we can create better UI of our website.

❖ JavaScript:
• JavaScript is a light-weight, cross-platform programming languages which
is also known as the scripting language for webpages.
• JavaScript can be added to your HTML file in two ways:
1) Internal JS
2) External JS

❖ React:
• React is a platform and Library which is used to develop single page web
application using HTML, CSS and JavaScript.
• It allows developers to create reusable UI components.
• Its virtual DOM enables high-performance rendering.
• React is widely adopted for its simplicity and scalability in modern web
development.

8
GTU DSTC
400110 Skills Learned

3.2 How do I learn the skill/s

I learn all these skills from video lectures provided during this internship. Performing
practical of these technologies is also helpful for learning and improving all these skills.
Some of the practicals are given below:

HTML and CSS:

Fig: 3.1 HTML and CSS

Bootstrap and JavaScript:

Fig: 3.2 Top News

9
GTU DSTC
400110 Skills Learned

Fig: 3.3 National News

Fig: 3.4 Business News

10
GTU DSTC
400110 Skills Learned

Fig:3.5 Sports News

ReactJs:

Fig: 3.6 Home

11
GTU DSTC
400110 Skills Learned

Fig: 3.7 Events

Fig: 3.8 Contact Us

12
GTU DSTC
400110 Design & Implementation

CHAPTER: 4

Design & Implementation

4.1 Data Flow Diagrams

4.2 Data Dictionaries
4.3 Screenshots

13
GTU DSTC
400110 Design & Implementation

4.1 Data Flow Diagrams

Fig: 4.1 DFD 0 Raah - NGO

14
GTU DSTC
400110 Design & Implementation

Fig 4.2 DFD 1 User

Fig: 4.3 DFD 1 Admin

15
GTU DSTC
400110 Design & Implementation

4.2 Data Dictionaries

Fig 4.4 contactdetailDB

Fig 4.5 contactusDB

Fig 4.6 EventsDB

16
GTU DSTC
400110 Design & Implementation

Fig 4.7 FeedbackDB

Fig 4.8 MemberDB

Fig 4.9 servicesDB

17
GTU DSTC
400110 Design & Implementation

Fig 4.10 strategyDB

Fig 4.11 usersDB

Fig 4.12 volunteerRequestDB

18
GTU DSTC
400110 Design & Implementation

4.3 Screenshots

Fig 4.13 Homepage

Fig 4.14 Services page

19
GTU DSTC
400110 Design & Implementation

Fig 4.15 Single Service Page

20
GTU DSTC
400110 Overall Experience

CHAPTER: 5

Overall Experience

5.1 Technical Experience

5.2 Personal Experience

21
GTU DSTC
400110 Overall Experience

5.1Technical Experience

During this internship program I learned many technologies and soft skills. All these skills
I can apply in my projects. Working with professional is totally new experience. During
this entire internship I assigned with different problems regarding HTML/CSS, JavaScript,
Angular, which increase my programming skill. All these skills are very useful in my
career.

5.2Technical Experience

My personal experience with this internship is really good. During my internship I have
learned a lot about how the industry of web development is actually work and how to work
on actual projects. I learned to work in a corporate space which not only enriched me
professionally but also helped grow personally as well.

22
GTU DSTC
400110 Conclusion

CHAPTER: 6

Conclusion

6.1 Conclusion

23
GTU DSTC
400110 Conclusion

6.1 Conclusion

Goal of this internship is to learn about React Library which is used to develop single page
web application. I learned about different features of React like: custom component, Data
Binding, Modules, services etc. Also learned some programming languages and tools like
Asynchronous JavaScript, Bootstrap, ES6 etc.

24
GTU DSTC
400110 Future Scope

CHAPTER: 7

Future Scope

7.1 Future Scope

25
GTU DSTC
400110 Future Scope

7.1 Future Scope

During this internship first I have completed basics of web development and then started
React training. After the completion of training phase I tried to implement a project with
all these new technologies which I learned in this internship. In Raah - NGO, I will try to
Implement Multilingual support.

26
GTU DSTC
400110 Bibliography

CHAPTER: 8

Bibliography

8.1 Bibliography

27
GTU DSTC
400110 Bibliography

8.1 Bibliography

• https://www.w3schools.com/js/
• https://developer.mozilla.org/en-US/docs/Web/JavaScript
• https://www.w3schools.com/html/
• https://www.w3schools.com/css/
• https://www.w3schools.com/bootstrap/
• https://react.dev/

28
GTU DSTC
400110 Appemdix-1

Appendix–I

Week 1

29
GTU DSTC
400110 Appemdix-1

Week 2

30
GTU DSTC
400110 Appemdix-1

Week 3

31
GTU DSTC
400110 Appemdix-1

Week 4

32
GTU DSTC
400110 Appemdix-1

Week 5

33
GTU DSTC
400110 Appemdix-1

Week 6

34
GTU DSTC
400110 Appemdix-1

Week 7

35
GTU DSTC
400110 Appemdix-1

Week 8

36
GTU DSTC
400110 Appemdix-1

Week 9

37
GTU DSTC
400110 Appemdix-1

Week 10

38
GTU DSTC
400110 Appemdix-1

Week 11

39
GTU DSTC
400110 Appemdix-1

Week 12

40
GTU DSTC
400110 Appendix-2

Appendix – II

Feedback Form by Industry Expert

41
GTU DSTC