NSS Web Application using Django and React

ABSTRACT

Colleges use offline mode for communicating with students who participate in social service schemes like National Service Scheme. Announcements of activities and events will be known to the students by the staff or the organization through offline meetings. This way of information sharing is not fast and efficient. Using a Web Application for spreading information like Events, Registration, Photos, Collaboration, Participation and others will become easier and efficient, when an information is posted will be available to all the respective individuals quickly. As all the data will be stored and maintained with back-up, it can be updated and maintained easily by the institution, information will reach the students in an instant. Staff or an Admin can add events, modify and delete an event, admin can manage the staff, add new staff or modify information about the staff. The project will help the students, staff and institution to communicate easily and share information rapidly to everyone.

Keywords: Redux, React, Django, JSON, SASS, PostgreSQL, Python, and JavaScript

I. INTRODUCTION

Project Description

In the present world everything has become online. With the help of the internet communication has become easier and faster. National service scheme is a public service programme conducted by Government of India. College students participate in NSS to service the society and help the needy, activitieslike educating the poor, cleaning the surroundings, plantation, yoga, blood donation camp and other events will be conducted by the NSS team. Generally the information will be shared to the students by conducting a meeting, it will not reach every student as some might not be able to attend the meeting. If the information is available in the Internet to all the students they will get an update on the current situation and ongoing events, with the help of this project students can login to a web application and check all the available information like events, organizers date of the event and the location of the event.

The application is developed using Python and JavaScript framework Django and React. The application can be accessed in mobile phones and computers of any operating system, using a web browser. The responsive feature of the application will set the components based on the device resolution. This reduces a lot of code, complexity and makes it easy to develop.

II. LITERATURE SURVEY

Existing System

All the colleges or education institutions which are part of NSS had been doing things offline. When an event is organized by the college NSS team, the information usually reaches the candidates of NSS through a meeting. The news spreads slower sometimes, if not all candidates has attended the meeting. This is one of the drawback of offline method. For a student to join NSS, he has to fill an application form with required information to join. The organization has to manage all the documents carefully and store them in a safe place. It becomes very difficult as more number of students apply.

Accessing the information of the applicants becomes a difficult task. With offline process, retrieving information of a registered student and editing the information becomes difficult. Generally, colleges and other education institutions follow the same. To contact the NSS team or get any information about anything, the respective person has to visit the NSS Team of their respective colleges. This makes the information exchange difficult and slow.As the information about NSS events or activities reaches the students slow, they will miss many events if the information doesn't reach the interested students within time. As the same continues the number of participants becomes less.

Proposed System

A user friendly system, with great User Interface and easy to use controls. The proposed system contains an application where the users can use it to gain information, communicate and keep record of all the activities done in the past. Post contents, announcements of events and

more. The application uses django rest framework, Django is a backend Python framework. The frontend of the application is developed using a JavaScript framework React. The Web Application of NSS will have a login, where a registered user can login and access the available information. The users are authenticated using JSON Web Token, which makes it secure.

New Users can register using the registration form where they have to fill certain information which are required by the NSS Officers, Only registered users can login into the application. An offline application is converted in to Registration in the app. This way we can keep track of all the users or the applicants. We can retrieve information of users which will be stored in the database. The application uses PostgreSQL as database, we can keep backup of the database to safe keep it from system crashes.

III. Functional Requirements

Admin

Table 1.1 Functional Requirements of Admin

Abbildung in dieser Leseprobe nicht enthalten

Table 1.2 Functional Requirements for user

Abbildung in dieser Leseprobe nicht enthalten

IV. SYSTEM DESIGN

The purpose of the system perspective is to provide a best environment for the application to be active and running. It is helpful to students, staff and other users in participating in NSS Activities. The users can access the Event Published, from the event section and check the information like event type, event date, photos of the event, city and description of the event. The users can also contact the co-ordinator by checking the details of event coordinator. The admin can add new user, event, staff and contact. The user can use the contact section to ask queries to the NSS Officer using gmail.

Abbildung in dieser Leseprobe nicht enthalten

Figure 1.1 Architectural Design

V. Data Flow Diagram (DFD)

Abbildung in dieser Leseprobe nicht enthalten

Figure 1.2 DFD Level -0

Abbildung in dieser Leseprobe nicht enthalten

Figure 1.3 DFD Level -1

It is important to understand the role of each type of user in the system, so that we developer can understand what level of privilege should be given to specific users.

Abbildung in dieser Leseprobe nicht enthalten

Figure 1.4 Use Case Diagram

Abbildung in dieser Leseprobe nicht enthalten

VI. SOFTWARE TESTING

Testing is a phenomenon that is used to detect faults and bugs in software that have occurred or may arise in the future. It also provides information on the product's quality, such as the system, software, and so on. In software testing, software developers run programmers to look for flaws or faults in the system. Software testing ensures that the system meets its specifications

Abbildung in dieser Leseprobe nicht enthalten

Table 1.3 Admin login

VII. CONCLUSION

College students participate in NSS to service the society and help the needy, activities like educating the poor, cleaning the surroundings, plantation, yoga, blood donation camp and other events will be conducted by the NSS team. Generally the information will be shared to the students by conducting a meeting, it will not reach every student as some might not be able to attend the meeting. If the information is available on the Internet to all the students they will get an update on the current situation and ongoing events, with the help of this project students can login to a web application and check all the available information like events, organizers date of the event and the location of the event.

Through the Internet the information will be shared faster compared to offline meetings. The idea is to create a web application where students can login and check the available information about activities, contact the organizers or contribute funds to the society. The web application is developed using Django, which is a python framework for backend, React which is a JavaScript framework for frontend. Django Rest Framework is used for application development. Application Program Interface is created which gives the JSON response to the frontend.

APPENDIX A

BIBLIOGRAPHY

Websites referred

1) https://sass- lang.com/ documentation/ style- rules/parent-selector/

2) https://docs.djangoproject.com/en/ 4.0/topics/db/models/

3) https://web.postman.co/workspace/

4) https://stackoverflow.com/question s/45290822/react-router-dom-not- working

5) https://docs.djangoproject.com/en/ 4.0/topics/http/views/

6) https://jwt.io/introduction

[...]