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
