Volume 9, Issue 4, April – 2024 International Journal of Innovative Science and Research Technology

ISSN No:-2456-2165 https://doi.org/10.38124/ijisrt/IJISRT24APR2465

AI-Driven School Management

System: A React-Based Web Application
Enhancing Educational Administration and
Student Performance Analytics
Anupam Dwivedi1; Michelle Dsouza2; Dr. Ankita Aggarwal3
Ajeenkya D. Y. Patil University, School of Engineering, Pune-412105

Abstract:- This research presents the development and  Problem Statement

implementation of an AI-Driven School Management In the context of these limitations, the specific
System, a comprehensive React-based web application problems that our AI-based system aims to solve include
designed to transform educational administration and inefficiencies in navigating complex management software,
enhance student performance analytics. The primary the inability of traditional systems to provide predictive
aim of this system is to streamline administrative tasks, analytics and personalized insights on student performance,
improve navigation efficiency within the application, and and the lack of support in decision-making processes for
provide sophisticated analytical tools that leverage AI to educational administrators and teachers. These issues
monitor and predict student performance trends. The contribute to a gap in achieving optimized educational
methodology employed involves the integration of React outcomes and resource management within schools.
for dynamic user interface design, coupled with
advanced AI algorithms that process and analyze  Objective
student data for actionable insights. Key findings from The primary objective of developing this AI-
the deployment of this system indicate a significant integrated system is to enhance the functionality of school
reduction in administrative overhead, improved user management by introducing a highly interactive, user-
experience for staff and students, and a marked increase friendly web application powered by React and enriched
in the accuracy and relevance of performance analytics with AI capabilities. The system aims to automate and
provided by the AI. These enhancements have streamline administrative tasks, provide detailed and
demonstrated potential benefits in educational settings predictive analytics on student performance, and improve
by aiding decision-making processes, personalizing the overall user experience for administrators, teachers, and
learning experiences, and optimizing operational students. Moreover, the integration of AI seeks to facilitate
efficiency. The system not only addresses existing gaps in more informed decision-making processes, thereby
traditional school management software but also sets a improving educational outcomes and operational efficiency.
precedent for future advancements in the integration of
AI technologies in educational administration.  Significance
The significance of implementing an AI-driven
I. INTRODUCTION school management system lies in its potential to
revolutionize the management of educational institutions.
Traditional school management systems have been By enhancing how data is used and insights are generated,
pivotal in organizing and managing the day-to-day the system promises not only to improve the efficiency of
administrative tasks inherent to educational institutions. administrative operations but also to significantly impact the
These systems typically handle student admissions, academic and developmental outcomes of students. It can
scheduling classes, tracking attendance, and managing support customized teaching approaches, identify at-risk
examinations. However, many such systems are often students earlier, and optimize resource allocation across
limited by static functionalities that do not adapt to the departments. The use of this technology in educational
dynamic needs of modern educational environments. They settings opens up new possibilities for adaptive learning
lack real-time analytics, personalized insights into student environments and proactive management strategies, making
performance, and the flexibility required to accommodate it a valuable asset in the pursuit of educational excellence
varying educational frameworks and teaching and reform.
methodologies. Furthermore, these conventional tools do not
make full use of the latest advancements in technology,
particularly in artificial intelligence, which can transform
data into actionable insights and predictive models.

IJISRT24APR2465 www.ijisrt.com 3042

Volume 9, Issue 4, April – 2024 International Journal of Innovative Science and Research Technology
ISSN No:-2456-2165 https://doi.org/10.38124/ijisrt/IJISRT24APR2465

II. LITERATURE REVIEW ● Facilitate Real-Time Feedback: AI-enabled systems

offer immediate feedback to students and educators,
 Current Technologies which is crucial for the educational process.
Existing school management systems are primarily
designed to automate the administrative operations of Several studies have shown that AI integration in
educational institutions. These systems typically facilitate school management systems not only enhances
functionalities such as student enrollment, attendance administrative efficiency but also significantly improves
tracking, grade management, timetable organization, fee educational outcomes by supporting data-driven decision-
processing, and communications between teachers, students, making and personalized learning approaches. As such, the
and parents. Notable platforms like Blackboard and need for an advanced AI-driven system in schools is clear,
PowerSchool offer robust solutions that integrate these core aligning with the growing demand for more sophisticated,
functionalities with user-friendly interfaces. However, these analytical, and user-friendly educational technologies.
systems are often modular and static, focusing more on data
management and less on data analysis and forecasting. III. SYSTEM DESIGN

 Gaps in Current Systems  Architecture Overview

Despite the sophistication of current school The architecture of the AI-driven school management
management systems, several gaps remain, particularly in system is structured to optimize both functionality and user
the integration of Artificial Intelligence (AI) and advanced experience, encompassing a React-based front-end, a robust
analytics. Most existing solutions lack: back-end server, and integrated AI components. The system
is designed as a three-tier architecture:
 Predictive Analytics: The ability to predict student
academic outcomes or identify at-risk students based on  Front-End (Client Tier): Built using React, this layer is
historical and real-time data is seldom a feature. responsible for presenting the user interface and
 Personalized Learning Insights: There is a limited handling user interactions efficiently. React's
capacity for these systems to offer personalized learning component-based architecture enables a modular
recommendations or to adapt based on individual approach, allowing for reusable UI components and
student performance. streamlined state management, which improves the
 Real-Time Decision Support: Current systems do not speed and responsiveness of the application.
generally provide real-time analytics that can assist  Back-End (Server Tier): This layer handles data
educators in making immediate instructional or management, API services, and server-side logic. It
administrative decisions. interacts with the database to retrieve, update, and store
 Interactive User Experience: Many systems do not information and serves processed data to the front end.
utilize AI to enhance user interaction, leading to Technologies typically used in this tier include Node.js,
interfaces that can be cumbersome for users who are not Express.js, and databases such as MongoDB or
tech-savvy. PostgreSQL for data storage.
 Integration with Diverse Educational Tools: There is  AI Components (Logic Tier): Integrated within the back
often a lack of seamless integration with other end but also interfacing directly with the front end for
educational technologies and tools, restricting the certain real-time functionalities, the AI components are
overall functionality and utility of the management crucial for processing complex algorithms and
system. delivering insights. They handle tasks ranging from data
analysis to predictive modeling and natural language
 Relevance of AI in Education processing for enhancing navigation.
The role of AI in education has been expanding, with
research and developments focusing on its capability to  React Application
transform both teaching and administrative processes. AI The front-end application utilizes React for its
technologies are being used to: dynamic capabilities and high performance in rendering
complex interfaces. React’s virtual DOM efficiently updates
● Automate Administrative Tasks: AI can automate tasks changes to the user interface without reloading the entire
like scheduling, thus reducing the workload on view, which is particularly useful for real-time data updates
administrative staff and increasing operational in administrative dashboards. This enhances user experience
efficiency. by providing a smooth, interactive environment that is
● Enhance Learning Experiences: Through adaptive responsive to the diverse needs of users, from students and
learning platforms, AI tailors educational content to teachers to administrative staff.
match the learning pace and style of individual students,
which can improve learning outcomes.  AI Implementation
● Provide Analytics and Insights: AI can analyze vast
amounts of data to provide insights that help educators ● Navigation AI: This component of AI focuses on
understand student performance patterns and predict improving user interaction with the web application.
future performance. Using natural language processing and machine
learning, the Navigation AI allows users to input

IJISRT24APR2465 www.ijisrt.com 3043

Volume 9, Issue 4, April – 2024 International Journal of Innovative Science and Research Technology
ISSN No:-2456-2165 https://doi.org/10.38124/ijisrt/IJISRT24APR2465

commands or queries in natural language. The AI  MongoDB: Chosen for its NoSQL database capabilities,
processes these inputs to guide users through the allowing for flexible data storage and management.
system, helping them find features, access reports, and
retrieve data effortlessly. This not only makes the ● AI and Machine Learning:
system more accessible but also quicker to navigate,
especially for less tech-savvy users.  Python: The primary programming language used for
● Performance Analytics: The AI-driven analytics engine AI functionalities because of its extensive libraries and
processes student data to provide insights and predictive frameworks.
outcomes. It uses machine learning algorithms to  Scikit-Learn and TensorFlow: Utilized for building and
analyze historical data and current inputs to predict training machine learning models.
trends and student performance. This capability  Pandas and NumPy: For data manipulation and
supports educators in identifying at-risk students, numerical analysis essential in preprocessing data for
understanding the efficacy of teaching methods, and AI models.
customizing learning paths for students based on
predictive outcomes.  AI Model Training
The AI models were trained using a combination of
 Integration historical educational data and real-time input from the
The integration between the front-end, back-end, and application. Key aspects of the training process included:
AI components is managed through well-defined APIs and
web services, ensuring seamless communication across ● Data Collection: Data was sourced from academic
different parts of the application. The React front-end records, performance metrics, and behavioral analytics.
communicates with the back-end via RESTful APIs, which Privacy and ethical guidelines were strictly followed in
in turn interact with the AI modules to process and fetch acquiring and handling this data.
predictive analytics and real-time data insights. This layered ● Data Preprocessing: Data cleansing operations were
yet interconnected architecture ensures that the system is not performed to handle missing values, eliminate outliers,
only scalable but also maintainable and secure, capable of and normalize data. Feature selection techniques were
handling sensitive educational data with robust data applied to identify the most relevant variables for
protection measures. predictive modeling.
● Model Selection: Different algorithms were tested for
In summary, the design of the AI-driven school various AI functionalities. For instance, decision tree
management system focuses on leveraging advanced algorithms were used for classification tasks, while
technologies like React for front-end development and AI linear regression was employed for predicting student
for backend analytics to create a powerful, efficient, and performance trends.
user-friendly system that transforms traditional school ● Training and Validation: Models were trained using
management into a dynamic, insight-driven process. training datasets and validated using cross-validation
techniques to prevent overfitting and ensure they
IV. METHODOLOGY generalize well on unseen data.

 Development Tools and Languages  System Testing

The development of the AI-driven school Comprehensive testing strategies were implemented
management system utilized a variety of tools, frameworks, to ensure the functionality, reliability, and security of the
and programming languages, each chosen for their system:
robustness, scalability, and community support:
● Unit Testing: Each module (e.g., API endpoints, AI
● Front-End Development: predictions) was tested independently to verify
correctness in functionality and handling of edge cases.
 React.js: Used for building the user interface with ● Integration Testing: Tested interactions between
efficient updating and rendering using its virtual DOM. modules to ensure that data flows correctly across the
 Redux: Employed for state management across the system and that modules operate together without
React application, ensuring that the UI is consistent and errors.
reactive to state changes throughout the application. ● System Testing: The complete system was tested in an
 Bootstrap and Material-UI: These CSS frameworks environment that simulates real-world operations to
were integrated for quick and responsive design to validate the integrated application’s performance,
enhance the aesthetics and usability of the application. usability, and reliability.
● User Acceptance Testing (UAT): Conducted with actual
● Back-End Development: users (administrators, teachers, students) to ensure the
system meets their needs and expectations in real-world
 Node.js: Served as the runtime environment for the scenarios.
back-end server.
 Express.js: This web application framework for Node.js
was used to handle server-side logic and routing.

IJISRT24APR2465 www.ijisrt.com 3044

Volume 9, Issue 4, April – 2024 International Journal of Innovative Science and Research Technology
ISSN No:-2456-2165 https://doi.org/10.38124/ijisrt/IJISRT24APR2465

● Performance Testing: Load testing and stress testing ● Accuracy: The AI models used for predicting student
methodologies were applied to ensure that the performance and outcomes showed an accuracy of
application can handle the expected number of approximately 85-90% in various tests. This high level
simultaneous users and data volume without of accuracy indicates that the AI is reliable for making
degradation in performance. predictions that can effectively contribute to academic
The methodologies employed ensured a rigorous planning and interventions.
development process, from the foundational coding and ● Efficiency: Efficiency tests revealed that AI processes
system architecture to the comprehensive testing that were streamlined, with most data analysis tasks being
guarantees a robust, efficient, and user-friendly AI- completed in real-time or near-real-time. The
driven school management system. integration of efficient data handling libraries and
algorithms ensured minimal delay, thus supporting a
V. RESULTS fluid user experience even under heavy load conditions.

 Functionality Testing VI. DISCUSSION

The functionality testing of the system focused on
evaluating the performance of the navigation and analytics The testing results and user feedback collectively
features. Results indicated a high level of performance in suggest that the AI-driven school management system
several key areas: significantly enhances the functionality and user experience
compared to traditional systems. The high accuracy and
● Navigation: The AI-powered navigation feature was efficiency of the AI components ensure that the system not
tested to ensure it could correctly interpret and respond only meets the current educational needs but is also scalable
to user queries and commands. Testing showed a 95% and adaptable for future requirements. However, the system
success rate in understanding and executing commands could still benefit from continuous improvement, especially
accurately, facilitating efficient user interaction and in expanding the AI’s learning capabilities and integrating
accessibility across the system. more personalized learning and predictive features. Ongoing
● Analytics: The performance analytics feature was user training and engagement will also be crucial to
scrutinized for its ability to accurately process and maximize the system's benefits and ensure its effective
display student performance data. The system adoption within more educational institutions.
demonstrated the capability to dynamically generate
detailed reports and predictive analytics with a VII. IMPLICATIONS
processing time averaging below 2 seconds for complex
queries, confirming its efficiency and responsiveness.  Educational Impact
The AI-driven school management system has
 User Feedback profound implications for improving various aspects of
Feedback from actual users, including school educational institutions:
administrators, teachers, and students, was overwhelmingly
positive, highlighting several aspects: ● Administrative Tasks: The system automates and
streamlines key administrative functions such as
● Ease of Use: Users appreciated the intuitive design and enrollment processes, attendance tracking, and
easy navigation facilitated by the AI-driven interface. scheduling. This automation reduces the administrative
Teachers and students found the system straightforward burden and allows staff to focus more on strategic tasks
to use, enhancing their day-to-day interactions with the and less on routine paperwork.
platform. ● Teacher Workflow: Teachers benefit from advanced
● Utility of Analytics: Administrators and teachers analytics that provide insights into student performance
particularly valued the depth and relevance of the and learning patterns. These insights can inform
analytics provided, which helped them make informed instructional strategies, allowing teachers to tailor
decisions about teaching strategies and student lessons to meet the diverse needs of their students more
interventions. effectively. Additionally, with easier access to student
● Responsiveness: The real-time data processing and data and administrative support through the system,
updates were noted as a significant improvement over teachers can manage their classroom duties more
traditional systems, which often suffer from latency and efficiently, leading to better time management and
data staleness. reduced workload.
● Student Engagement: By incorporating AI that analyzes
 AI Accuracy and Efficiency student performance to offer personalized learning
The AI components were critically assessed for their recommendations, the system fosters a more engaging
accuracy and efficiency: learning environment. Students receive tailored
educational content and resources, enhancing their
learning experience and motivation. Furthermore, the
system's interactive features can make learning and
administrative processes more accessible and enjoyable,
increasing student interaction and satisfaction.

IJISRT24APR2465 www.ijisrt.com 3045

Volume 9, Issue 4, April – 2024 International Journal of Innovative Science and Research Technology
ISSN No:-2456-2165 https://doi.org/10.38124/ijisrt/IJISRT24APR2465

 Scalability and Adaptability landscape for its innovative use of AI to automate routine
The system is designed with scalability and tasks and provide deep insights into student performance
adaptability in mind, which are critical for implementation through advanced analytics.
in various educational settings:
 Key Findings
● Scalability: The modular architecture of the system The deployment and testing of the system have
allows for easy scaling up to accommodate more users, demonstrated several critical outcomes:
from small schools to large districts, without a
significant increase in resource allocation. Cloud-based ● Increased Administrative Efficiency: Automation of
solutions and scalable database management systems routine administrative tasks has freed up staff time,
ensure that the system can handle increased loads allowing them to focus on more strategic educational
efficiently. goals.
● Adaptability: The system's flexible design enables ● Enhanced Teacher Workflow: Teachers have access to
customization to meet the specific needs of different immediate, insightful data on student performance,
educational institutions. Whether adapting to different enabling tailored instructional strategies and more
curricular requirements, languages, or educational effective classroom management.
regulations, the system can be tailored to integrate ● Improved Student Engagement: The personalized
seamlessly into existing infrastructures and workflows. learning recommendations and interactive features
facilitated by the system have led to greater student
 Future Enhancements involvement and satisfaction with the learning process.
Several potential improvements and features could be
integrated into the system to enhance its capabilities further: Furthermore, the system's AI capabilities, such as
navigation AI and performance analytics, have been tested
● Advanced Predictive Models: Incorporating more and shown high accuracy and efficiency, making the system
complex AI models could improve the accuracy of not only robust but also reliable.
predictions related to student performance and
institutional needs. This might include deep learning FUTURE SCOPE
techniques for more nuanced understanding and
forecasting. Looking forward, the potential of the AI-based school
● Enhanced User Customization: Allowing users to more management system extends beyond current
deeply customize the interface and functionality implementations. The system's design allows for scalability
according to their specific roles (student, teacher, and adaptability, which is crucial as educational institutions
administrator) could improve user experience and continue to evolve and diversify. Potential future
system usability. enhancements could include more sophisticated AI models,
● Integration with Virtual and Augmented Reality: increased customization options, integration of immersive
Implementing VR and AR tools for educational technologies like VR and AR, and expanded mobile access.
purposes, such as virtual labs or interactive history These enhancements would cater to a broader range of
lessons, could make the learning process more engaging educational needs and further solidify the system's position
and comprehensive. as a leader in educational technology.
● Real-time Language Translation: To support
increasingly diverse student populations, adding real- In conclusion, this AI-based school management
time translation features could help non-native speakers system offers compelling advantages for modern education
better understand and interact with the system. systems, driving improvements in efficiency,
● Mobile Platform Expansion: Developing a more robust personalization, and engagement. As educational technology
mobile application to accompany the desktop system progresses, this system serves as a model for future
could provide users with increased accessibility and developments, promising to adapt and expand in response to
flexibility, enabling students and teachers to engage the changing educational landscape and continuing to
with the system from anywhere. revolutionize how educational institutions leverage
technology to meet their diverse needs.
These enhancements would not only extend the
system’s functionality but also its impact, making it an even REFERENCES
more invaluable tool in the modern educational landscape.
[1]. Ijaz K., Abdul R. A., Nafaa J. & Mohammed N.M:
VIII. CONCLUSION An artificial intelligence approach to monitor
student performance and devise preventive
The AI-driven school management system represents measures. Springer Open
a significant advancement in educational technology, [2]. Nian K. from Salahaddin University: Student
integrating sophisticated artificial intelligence with a user- Academic Performance Using Artificial
friendly React-based interface to significantly enhance Intelligence. Research gate
administrative efficiency, teacher workflow, and student
engagement. This system stands out in the educational tech

IJISRT24APR2465 www.ijisrt.com 3046

Volume 9, Issue 4, April – 2024 International Journal of Innovative Science and Research Technology
ISSN No:-2456-2165 https://doi.org/10.38124/ijisrt/IJISRT24APR2465

[3]. Innocent C. I. PhD: Application of Artificial [5]. Tu Peng,1Yipin Luo,2and Yanjin Liu: AI-Based
Intelligence (AI) in Educational Management. Equipment Optimization of the Design on
Research gate Intelligent Education Curriculum System. Hindawi.
[4]. M. Somasundaram, K.A. Mohamed Junaid,
Srinivasan Mangadu: Artificial Intelligence (AI)
Enabled Intelligent Quality Management System
(IQMS) For Personalized Learning Path. Science
Direct

APPENDICES

The appendices section of this research paper provides additional materials that support and elaborate on the information
and discussions presented in the main text. These supplementary documents include detailed code snippets, visual screenshots,
comprehensive diagrams, and extended data tables. Each piece of supplementary material is intended to enhance the reader's
understanding of the AI-driven school management system's development, functionality, and testing processes. Below, you will
find several appendices, each designated to showcase specific aspects of the system, from the technical implementation to the user
interface designs and the system's architecture. These appendices serve as a practical reference and provide deeper insight into the
technical underpinnings and operational details of the system.

APPENDIX A: CODE SNIPPETS

The MongoDB database in our AI-driven school management system. The code examples demonstrate how MongoDB, in
conjunction with Node.js, is utilized to manage various data-intensive operations that are critical to the system's functionality.
These operations include storing and retrieving student data, handling fee transactions, and managing attendance records digitally.

Fig 1 MongoDB Database

The snippets illustrate the implementation of MongoDB schemas for student profiles, transaction models for fee payments,
and attendance logs. They also show how queries are executed to fetch and update data in real time, which is crucial for
maintaining the accuracy and timeliness of the information presented on the platform. Additionally, these examples highlight the
use of MongoDB's powerful querying capabilities, which enable complex searches and data aggregation essential for generating
performance analytics and insights.

Fig 2 MongoDB Database Elements

IJISRT24APR2465 www.ijisrt.com 3047

Volume 9, Issue 4, April – 2024 International Journal of Innovative Science and Research Technology
ISSN No:-2456-2165 https://doi.org/10.38124/ijisrt/IJISRT24APR2465

These code excerpts are chosen to provide clarity on how the backend supports the system's requirements for scalability,
performance, and real-time data processing, which are vital for a comprehensive digital school management system. Each snippet
is accompanied by comments that explain the purpose of the code and its function within the larger context of the system's
operations. This detailed view into the database interactions not only demonstrates the technical proficiency of the system but also
underscores the robust infrastructure designed to handle educational data efficiently and securely.

Fig 3 Django based AI Chatbot

The Django code examples provided here demonstrate how the AI models are interfaced and managed within a high-level
Python web framework. This includes how Django interacts with OpenAI's services to process and analyze student performance
data and generate predictions that inform educational strategies and interventions. Additionally, these snippets showcase the
implementation of RESTful APIs in Django, which are used to serve the AI-generated data to the front-end components built with
React.

Fig 4 Django Template Used

IJISRT24APR2465 www.ijisrt.com 3048

Volume 9, Issue 4, April – 2024 International Journal of Innovative Science and Research Technology
ISSN No:-2456-2165 https://doi.org/10.38124/ijisrt/IJISRT24APR2465

 Key Aspects Covered by the Django Code Snippets Include:

● Model Definition: Defining Django models to store and handle data related to student performance, which serves as the basis
for AI predictions.
● View Implementations: Creating Django views that utilize AI functionalities to process data and return insights, ensuring that
data handling is efficient and secure.
● URL Routing: Configuring URL patterns in Django to route requests related to AI functionalities to the appropriate views,
facilitating seamless data flow within the system.
● Integration with OpenAI API: Implementing function calls to OpenAI's API within Django views to utilize advanced machine
learning models for predictive analytics.

Fig 5 AI Chatbot Files

These snippets are annotated to explain their functionality and integration within the system, offering insights into how
Django is used to support AI-driven features that enhance the digital school management system. This detailed breakdown helps
illustrate the robust backend architecture and the sophisticated AI implementation that powers the platform.

IJISRT24APR2465 www.ijisrt.com 3049

Volume 9, Issue 4, April – 2024 International Journal of Innovative Science and Research Technology
ISSN No:-2456-2165 https://doi.org/10.38124/ijisrt/IJISRT24APR2465

APPENDIX B: SCREENSHOTS

The user interface (UI) screenshots from our AI-driven school management system. These images illustrate the system’s
front-end design, showcasing how various functionalities are presented to users, including students, teachers, and administrative
staff. Each screenshot is accompanied by a brief description to provide context and explain the interface's role within the overall
system architecture.

 Homepage Interface

● Description: This screenshot shows the homepage of the school management system, featuring a clean, user-friendly layout
with quick access buttons for common functions such as attendance, grades, and fee payments. The homepage serves as a
central hub for users to navigate to various parts of the system efficiently.

Fig 6 Landing Page

Fig 7 About Us Page

 Student Dashboard

● Description: The student dashboard screenshot displays personalized information, including current courses, upcoming
assignments, and recent grades. The dashboard also features predictive performance insights generated by the AI, offering
students proactive recommendations based on their academic history.

IJISRT24APR2465 www.ijisrt.com 3050

Volume 9, Issue 4, April – 2024 International Journal of Innovative Science and Research Technology
ISSN No:-2456-2165 https://doi.org/10.38124/ijisrt/IJISRT24APR2465

Fig 8 Student’s Console

 Teacher Portal

● Description: This screenshot highlights the teacher’s portal, which includes tools for course management, student
performance tracking, and class scheduling. The interface integrates smoothly with backend AI functionalities to provide
analytics that help teachers optimize their instructional strategies.

 Administrative Panel

● Description: The administrative panel screenshot showcases the system's capabilities for managing school-wide data,
including student enrollment numbers, financial reporting, and academic statistics. The panel is designed to offer
comprehensive analytics at a glance, enhancing decision-making processes for school administrators.

Fig 9 Admin/Teacher Console

IJISRT24APR2465 www.ijisrt.com 3051

Volume 9, Issue 4, April – 2024 International Journal of Innovative Science and Research Technology
ISSN No:-2456-2165 https://doi.org/10.38124/ijisrt/IJISRT24APR2465

 Fee Payment Interface

● Description: This screenshot of the fee payment interface shows the system’s capability to handle transactions securely and
efficiently. It provides a straightforward form for parents to complete payments online, with fields for payment details and
student identification, and integrates directly with the school’s financial database

 Attendance Tracking Interface

● Description: Featured in this screenshot is the attendance tracking interface used by teachers to record and monitor student
attendance. The interface includes functionalities for marking attendance in real-time and viewing historical attendance data,
facilitated by seamless backend integration for immediate updates and reporting.

Fig 10 Profile Page

Fig 11 AI Chatbot

IJISRT24APR2465 www.ijisrt.com 3052

Volume 9, Issue 4, April – 2024 International Journal of Innovative Science and Research Technology
ISSN No:-2456-2165 https://doi.org/10.38124/ijisrt/IJISRT24APR2465

APPENDIX C: DIAGRAMS

 Flow Chart Description:

● User Interaction Layer: This part of the flow chart depicts the various entry points for different user types (students, teachers,
administrators, and parents) into the system. It includes user actions such as logging in, navigating through different sections
of the website, and inputting or requesting data.
● Front-End Processing: Illustrated here are the processes handled by the front-end developed in React, CSS, and HTML,
which include rendering dynamic web pages based on user interactions and sending requests to the server via the API.

Fig 12 Admin Login Flow chart

● API Layer: The API layer serves as a conduit between the front-end and the back-end, routing requests and responses to and
from the database and the AI module. This section of the diagram outlines how API calls are managed and the flow of data
across the system.
● AI Processing (Django): This segment details the role of the Django-based AI bot in the system. It includes processes like
receiving data from the front end, utilizing machine learning models to predict students' performance based on historical data,
and aiding in navigation throughout the site.

Fig 13 Teacher Login Flow Chart

IJISRT24APR2465 www.ijisrt.com 3053

Volume 9, Issue 4, April – 2024 International Journal of Innovative Science and Research Technology
ISSN No:-2456-2165 https://doi.org/10.38124/ijisrt/IJISRT24APR2465

● Database Interaction (MongoDB/Node.js): Here, the flow chart shows how data is managed within MongoDB, detailing
operations such as data retrieval, updates, and storage. It highlights how Node.js is used to interact with MongoDB, executing
database operations based on requests received from the front end.
● Response Generation: The final part of the flow chart illustrates how processed data is sent back to the front end for display.
This includes the rendering of dynamic content such as student performance analytics, administrative reports, and
personalized user dashboards.

Fig 14 Student Login Flow Chart

IJISRT24APR2465 www.ijisrt.com 3054