E-ISSN : 2807-9035
Volume 4, Number 2, November 2024
https://doi.org/10.47709/brilliance.v4i2.5409
Designing a Modern Web Interface with Vue.js and Tailwind for University
Information System
Fhadiel Putra Perdana1*, Edi Supratman2, Dhimas Rosanto Saputra3
1,2,3
Universitas Bina Darma, Indonesia
1
[email protected], [email protected], [email protected]
ABSTRACT
The development of responsive, efficient, and maintainable web applications is
*Corresponding Author a critical challenge in modern web development. This study presents the design
Article History: and development of a tracer study information system for Bina Darma
Submitted: 04-12-2024 University using Vue.js and Tailwind CSS. The system focuses on three key
Accepted: 14-12-2024 components: responsive web design, pagination for managing large datasets, and
Published: 30-12-2024 reusable components implemented with Vue.js slots. By integrating Tailwind
Keywords: CSS, the system achieves a highly adaptive interface optimized for various
Django, Responsive Web, devices, ensuring a seamless user experience. The implementation of Vue.js-
Tailwind CSS, Tracer Study, based pagination significantly improves the management of alumni
Vue.js questionnaire histories in the admin interface, enhancing navigation and
Brilliance: Research of performance. Additionally, the use of Django pagination complements this by
Artificial Intelligence is licensed efficiently handling server-side data management, allowing for smooth
under a Creative Commons transitions between pages and reducing load times for large datasets. This dual
Attribution-NonCommercial 4.0 approach to pagination ensures that both client-side and server-side data
International (CC BY-NC 4.0). handling are optimized for performance. Furthermore, the use of Vue.js slots for
component reuse allows for tailored functionalities across different interfaces,
reducing redundancy and improving code maintainability. The results
demonstrate that adopting modern frameworks like Vue.js and Tailwind CSS,
alongside robust backend solutions like Django, can streamline development,
reduce effort, and enhance application efficiency. This study provides a scalable
solution that can be adapted for similar academic systems, offering insights into
best practices for contemporary web application development.
INTRODUCTION
In the digital era, educational institutions require robust and efficient systems to manage vast amounts of data
while offering seamless experiences to students, faculty, and alumni (Maulany & Agatha, 2016). University tracer
information systems play a pivotal role in connecting academic institutions with their stakeholders by tracking student
and alumni data, facilitating alumni engagement, and supporting institutional decision-making (Kusmanto, 2024).
However, as user expectations evolve, universities must ensure that these systems are not only functional but also
intuitive and responsive across various devices (Alsadi & McPhee, 2021).
This article presents the design and development of a modern university web information system, specifically
tailored for a tracer information system, utilizing Vue.js and Tailwind, a utility-first Cascading Style Sheets (CSS)
library. The primary goal of this system is to enhance user experience through a highly responsive interface that adapts
effortlessly to a range of devices, from desktops to mobile phones (Parlakkiliç, 2022). In addition to delivering an
engaging user experience, the system also emphasizes efficient development by promoting reusable components and
rapid styling with Tailwind (Taleb, Stutsman, Antoniu, & Cortes, 2018). This approach significantly accelerates the
development process, reduces redundancy, and improves long-term maintainability. Given the importance of fast and
efficient data retrieval, the system uses Vue.js for handling dynamic content, such as student records, alumni data, and
questionnaires, while ensuring smooth navigation through large datasets with pagination.
Moreover, the choice of the MVVM (Model-View-ViewModel) architecture over traditional web development
methods enhances the system's flexibility and responsiveness. MVVM allows for a clear separation of concerns,
enabling developers to independently manage the user interface and business logic (Ramachandrappa, 2024).
In addition to performance considerations, the design approach emphasizes modularity and reusability. The use
of Vue.js components allows for the creation of reusable UI elements, which reduces redundancy and simplifies future
maintenance and scalability (Tikhonova, 2021). Tailwind CSS further facilitates rapid development and customization,
offering developers a utility-first approach to styling that results in consistent, maintainable, and responsive design
structures.
This is an Creative Commons License This work is licensed under a Creative
Commons Attribution-NonCommercial 4.0 International License. 956
E-ISSN : 2807-9035
Volume 4, Number 2, November 2024
https://doi.org/10.47709/brilliance.v4i2.5409
LITERATURE REVIEW
In the rapidly evolving landscape of web development, the integration of modern frameworks and design
methodologies is crucial for creating efficient, user-friendly applications (Andersson, 2021). This literature overview
explores the foundational concepts and technologies that underpin the design and development of a modern interface for
a University Tracer Information System, focusing on three main components: Responsive web design, pagination and
reusable components with Vue.js.
Extreme Programming
Extreme Programming (XP) is an agile software development methodology that prioritize customer satisfaction,
flexibility, and rapid iterations. In the context of developing the University Tracer Information System, XP principles
can significantly enhance the development process. By promoting practices such as continuous feedback, pair
programming, and frequent releases, XP allows teams to respond quickly to changing requirements and user needs. This
adaptability is particularly beneficial in educational environments, where stakeholder expectations may evolve over
time (Akhtar, Bakhtawar, & Akhtar, 2022). Additionally, XP encourages the use of automated testing and refactoring,
which can lead to higher code quality and maintainability. By integrating XP practices into the development of the
tracer information system, the team can ensure that the application not only meets current user requirements but is also
prepared for future enhancements and scalability.
Responsive Web Design
In the realm of web development, the integration of modern frameworks and design methodologies is essential
for creating efficient, user-friendly applications. Responsive web design (RWD) is a critical approach that ensures web
applications function effectively across various devices and screen sizes (Parlakkiliç, 2022). Key technologies in this
area include Tailwind CSS, a utility-first CSS framework that promotes a mobile-first design philosophy, allowing
developers to create responsive layouts using pre-defined classes (Al Salmi, 2023). This approach enhances user
experience by ensuring consistency across devices. Additionally, Vue.js, a progressive JavaScript framework, supports
component-based architecture, enabling developers to build responsive interfaces that adapt to different screen sizes
(Tikhonova, 2021). Research indicates that RWD significantly improves user engagement and satisfaction.
Pagination
Pagination is another vital feature for managing large datasets, such as an alumni questionnaire history table in an
admin interface. Effective pagination enhances usability by breaking down information into manageable chunks. Vue.js
facilitates the creation of dynamic pagination components that fetch and display data asynchronously, which is crucial
for real-time data updates in administrative interfaces (Orlivskyi, Deomin, & Averianova, 2021). Furthermore,
integrating Django REST framework (DRF) for backend data management provides built-in pagination classes, such as
PageNumberPagination and LimitOffsetPagination, which streamline server-side pagination (Vainikka, 2018). This
integration reduces data transfer, improving performance and user experience.
Reusable Components
The use of reusable components in Vue.js is essential for building efficient and maintainable applications.
Reusable components encapsulate functionality, making code easier to manage and ensuring a consistent user interface
across different parts of the application. Vue.js allows for customization through props and scoped slots, enabling
components to adapt their behavior based on context. This flexibility enhances the user experience by providing tailored
functionalities for different user roles (Tikhonova, 2021).
METHOD
The design and development of the Tracer Alumni Reporting System were guided by a user-centered approach,
focusing on creating an intuitive and engaging interface for both alumni and university administrators. The application
was built using the Model-View-ViewModel (MVVM) architecture, which facilitates a clear separation of concerns and
enhances maintainability (Fajri, 2022). This approach allows for a responsive and dynamic user experience, ensuring
that the application can adapt to various devices and screen sizes (Parlakkiliç, 2022).
Web Layout Design
The design of the web layout is a critical component of the tracer study information system, as it directly impacts
user experience and functionality. The layout is designed to be intuitive, responsive, and visually appealing, ensuring
that users can navigate the system efficiently. This section outlines the design process for the admin dashboard,
particularly focusing on the desktop layout.
This is an Creative Commons License This work is licensed under a Creative
Commons Attribution-NonCommercial 4.0 International License. 957
E-ISSN : 2807-9035
Volume 4, Number 2, November 2024
https://doi.org/10.47709/brilliance.v4i2.5409
Figure 1. Wireframe of Admin Dashboard in a desktop layout
In the desktop layout of the admin dashboard, the navigation bar is designed to be horizontal, providing a
streamlined and efficient user experience. This layout allows for easy access to various sections of the dashboard, with
navigation options displayed side by side at the top of the screen. The horizontal arrangement facilitates quick scanning
and selection, enabling admins to navigate seamlessly between different functionalities without excessive scrolling. The
design prioritizes usability, ensuring that all key features are readily accessible, thereby enhancing the overall efficiency
of the dashboard for desktop users.
Pagination with Vue.js
To manage the alumni questionnaire history effectively, a pagination system was implemented within the admin
interface. This feature allows administrators to navigate through large datasets efficiently, improving the overall user
experience (Farhan et al., 2024). Vue.js components were utilized to create a smooth and responsive pagination
experience, ensuring that data is presented in a user-friendly manner (Tikhonova, 2021).
Figure 2. Flowchart of Pagination with Vue.js
This integrated approach using Django REST Framework and Vue.js not only enhances the efficiency of data
management but also significantly improves the overall user experience. By leveraging AJAX for asynchronous data
retrieval and Vue.js for dynamic interface updates, the application ensures that users can navigate through large datasets
effortlessly, making the tracer study information system both responsive and user-friendly.
Reusable Components with Vue.js Slots
The application leverages Vue.js slots to create reusable components for the questionnaire interface. This
approach allows for customization of the questionnaire display based on the user type (alumni or admin), ensuring that
each user has a tailored experience. By utilizing slots, the development process is streamlined, reducing redundancy and
enhancing maintainability (Tikhonova, 2021).
This is an Creative Commons License This work is licensed under a Creative
Commons Attribution-NonCommercial 4.0 International License. 958
E-ISSN : 2807-9035
Volume 4, Number 2, November 2024
https://doi.org/10.47709/brilliance.v4i2.5409
Figure 3. Vue.js Slots Diagram
RESULT
This section presents the findings from the implementation of the University Tracer Web Information System,
focusing on three key areas: the responsive dashboard page for admins, the table pagination for the Alumni
Questionnaire History, and the use of Vue slots in the Questionnaire form. Each area is discussed in detail, highlighting
the differences in user experience and functionality.
Responsive Dashboard Page for Admin
The application was designed to be fully responsive, utilizing Tailwind CSS to create a fluid layout that adapts to
various screen sizes (Al Salmi, 2023). This ensures that both alumni and administrators can access the application
seamlessly on desktops, tablets, and mobile devices. Vue.js was employed to enhance interactivity, allowing for
dynamic content updates without requiring full page reloads (Jonathan & others, 2023).
In the desktop view, the layout is optimized for larger screens, featuring three distinct cards displayed in a single
row. This horizontal arrangement allows admins to quickly scan through the information and take necessary actions
without excessive scrolling.
Figure 4. Admin dashboard in a desktop layout
Additionally, a table is implemented below the cards to display extensive data related to the history of
questionnaires from alumni. This table features a horizontal scrollbar, enabling users to navigate through large datasets
without compromising the overall layout. The design ensures that the dashboard remains clean and organized, allowing
admins to focus on critical information.
In contrast, the mobile view is tailored for smaller screens, ensuring that users can interact with the dashboard
effectively without the need for horizontal scrolling. The layout adapts by stacking the three cards vertically, allowing
for easy access to each card's content.
This is an Creative Commons License This work is licensed under a Creative
Commons Attribution-NonCommercial 4.0 International License. 959
E-ISSN : 2807-9035
Volume 4, Number 2, November 2024
https://doi.org/10.47709/brilliance.v4i2.5409
Figure 5. Admin dashboard in a mobile layout
To further improve navigation on mobile, a toggleable navigation bar menu is introduced. This menu can be
accessed via a hamburger icon located at the top of the screen. When tapped, the menu expands to reveal a stacked list
of navigation options.
The stacked menu design ensures that all navigation options are easily accessible without overwhelming the user.
The toggle functionality allows users to open and close the menu as needed, maintaining a clean interface while
providing quick access to essential features (Khadka, 2021).
Table Pagination for Alumni Questionnaire History in Admin Dashboard
The alumni questionnaire history table in the admin dashboard incorporates pagination and item selection
features, enhancing the management of questionnaire data. Pagination divides large datasets into smaller, manageable
pages, which offers significant benefits for both server and client performance (Farhan et al., 2024).
From the server's perspective, pagination reduces the amount of data transmitted in a single request, thereby
decreasing server load and optimizing resource utilization. By sending only a subset of the data at a time, the server can
handle more requests simultaneously, ensuring better scalability and responsiveness.
Figure 6. History table in a mobile layout
For the client, pagination improves user experience by reducing the time required to load and display data.
Loading smaller chunks of data minimizes memory usage on the client-side, preventing slowdowns or crashes when
dealing with extensive datasets (Orlivskyi et al., 2021). This approach also ensures that users can navigate through data
seamlessly without overwhelming the browser or device.
Furthermore, Vue's efficient data reactivity reduces unnecessary computations and re-renders, ensuring smooth
navigation between pages (Gopalakrishna, 2024). Combined with its event-driven architecture, Vue can handle user
interactions, such as page selection or filtering, with minimal overhead. This makes managing large datasets intuitive
and efficient for developers while maintaining an optimal user experience.
Additionally, the item selection functionality enables admins to select multiple entries for further actions. This
feature is integrated with the Django REST framework, allowing for seamless data requests and updates. Admins can
export selected items to Excel format, facilitating data analysis and reporting.
By combining server-side pagination, Vue's reactive data management, and Django REST framework integration,
This is an Creative Commons License This work is licensed under a Creative
Commons Attribution-NonCommercial 4.0 International License. 960
E-ISSN : 2807-9035
Volume 4, Number 2, November 2024
https://doi.org/10.47709/brilliance.v4i2.5409
the system improves the efficiency of data management while providing admins with powerful tools to handle large
volumes of information effectively.
Vue Slots in Form Questionnaire
The implementation of Vue slots in the questionnaire form demonstrates the ability to create reusable
components while allowing for customization based on user roles. The admin version of the form includes additional
content and functionalities exclusive to administrators, while the alumni version displays a simplified version of the
form. Below, we show how Vue slots allow for dynamic content injection based on the user role.
Figure 7. Questionnaire Form component viewed as Alumni
The FormKuisioner.vue component defines a slot where dynamic content can be injected from its parent
component. In the alumni view, the slot is used to display a simple message to guide the user to fill out the
questionnaire.
Figure 8. Questionnaire Form component in admin view
The Admin View uses the FormKuisioner.vue component and overrides the slot content to display more
information relevant to the admin, such as the form's creation and modification times, as well as the source of the data.
In this view, the slot content is customized to include more detailed information and buttons for admin actions (edit,
accept, reject).
DISCUSSION
The implementation of the Tracer Alumni Reporting System benefited significantly from adopting the MVVM
(Model-View-ViewModel) architecture over the traditional MVC (Model-View-Controller) approach. MVVM
facilitated enhanced data binding, allowing for seamless two-way communication between the user interface and the
underlying data model. This feature proved invaluable in managing form inputs and questionnaire responses, ensuring
data consistency without additional synchronization code. Furthermore, the clear separation of concerns in MVVM
enabled developers to work independently on the UI and business logic, leading to a more modular and maintainable
codebase. The architecture also improved testability, as the ViewModel could be tested in isolation, ensuring the
accuracy of data processing. Additionally, MVVM simplified state management, allowing for intuitive handling of
different user roles, and its reactive nature provided real-time feedback to users (Ramachandrappa, 2024). Overall, the
synergy between MVVM and modern frameworks like Vue.js streamlined the development workflow, resulting in a
This is an Creative Commons License This work is licensed under a Creative
Commons Attribution-NonCommercial 4.0 International License. 961
E-ISSN : 2807-9035
Volume 4, Number 2, November 2024
https://doi.org/10.47709/brilliance.v4i2.5409
robust and user-friendly application that effectively meets the needs of both alumni and university administrators.
Limitation
However, while MVVM offers numerous advantages, it may not be the most suitable architecture for every
aspect of the Tracer Alumni Reporting System. One potential limitation is that MVVM can introduce complexity when
managing large-scale applications with numerous components and intricate state management requirements. As the
application grows, the ViewModel can become cumbersome, making it challenging to maintain and scale effectively. In
such cases, a framework like Nuxt.js could be a more appropriate choice. Nuxt.js is built on top of Vue.js and provides a
powerful structure for developing server-side rendered applications (Huynh, 2024). It simplifies routing, state
management, and API integration, allowing developers to focus on building features rather than managing the
underlying architecture. By leveraging Nuxt.js, the Tracer Alumni Reporting System could benefit from improved
performance, better SEO capabilities, and a more organized project structure, ultimately enhancing the overall user
experience and maintainability of the application.
CONCLUSION
The Tracer Alumni Reporting System effectively enhances user experience and functionality through its
responsive design, efficient data management, and customizable components. The responsive dashboard page for
admins is optimized for both desktop and mobile devices. On desktop, three cards are displayed in a single row for
quick access to critical information, while the mobile layout stacks these cards vertically, ensuring easy navigation
without horizontal scrolling. A toggleable navigation bar further improves mobile usability.
The table pagination for the Alumni Questionnaire History streamlines data management by allowing admins to
navigate large datasets and perform bulk actions. Integrated with the Django REST framework, it facilitates seamless
data requests and updates, along with the ability to export selected items to Excel for enhanced analysis.
Lastly, the use of Vue slots in the questionnaire form allows for reusable components tailored to user roles.
Admins have access to an "Actions" button, while alumni do not, ensuring a streamlined experience for both user types.
REFERENCES
Akhtar, A., Bakhtawar, B., & Akhtar, S. (2022). EXTREME PROGRAMMING VS SCRUM: A COMPARISON OF
AGILE MODELS. International Journal of Technology, Innovation and Management (IJTIM), 2(2).
https://doi.org/10.54489/ijtim.v2i2.77
Al Salmi, H. (2023). Comparative CSS frameworks. Multi-Knowledge Electronic Comprehensive Journal for Education
and Science Publications (MECSJ), 66.
Alsadi, A., & McPhee, C. (2021, August). User-Centred Design in Educational Applications: A systematic literature
review. 105–111. https://doi.org/10.1109/EnT52731.2021.00025
Andersson, A. (2021). How to design a user-friendly mobile user interface with the power of visual usability.
Fajri, A. R. (2022). Penerapan Design Pattern Mvvm Dan Clean Architecture Pada Pengembangan Aplikasi Android
(Studi Kasus: Aplikasi Agree).
Farhan, A., Wahab, A., Ri’fai, F., Faluti, H. A., Oktarina, M., & others. (2024). Optimisasi Pagination dan Error
Handling pada Portal Minat untuk Meningkatkan Performa Aplikasi Menggunakan Whitebox Testing. Jurnal
Pendidikan Dan Teknologi Indonesia, 4(12), 603–611.
Gopalakrishna, A. (2024). FRAMEWORK SELECTION IN MODERN FRONTEND DEVELOPMENT: A
COMPREHENSIVE ANALYSIS OF KEY CONSIDERATIONS AND EMERGING TRENDS.
INTERNATIONAL JOURNAL OF ENGINEERING AND TECHNOLOGY RESEARCH (IJETR), 9(2), 300–308.
Huynh, T. (2024). WEB TECHNOLOGIES COMPARISON BETWEEN NUXT. JS AND ASP .NET.
Jonathan, R. & others. (2023). Development of Front-End Web Applications Utilizing Single Page Application
Framework and React. Js Library. International Journal Software Engineering and Computer Science (IJSECS),
3(3), 529–536.
Khadka, N. (2021). An usability and universal design investigation into hamburger menus (Master’s Thesis). OsloMet-
storbyuniversitetet.
Kusmanto, H. (2024). Evaluating Alumni Communication and Curriculum Relevance: A Tracer Study of Tadris
Mathematics Department at IAIN Syekh Nurjati Cirebon. International Journal of Education and Humanities,
4(1), 75–83.
Maulany, R., & Agatha, C. L. (2016). Analysis And Design Of Alumni Information System For UNAI. Journal of
International Scholars Conference-SCIENCE & ENGINEERING, 1(4).
Orlivskyi, S., Deomin, B., & Averianova, O. (2021). Pagination And Its Efficient Methods For RESTful Web Services.
2021 IEEE 3rd Ukraine Conference on Electrical and Computer Engineering (UKRCON), 567–571. IEEE.
Parlakkiliç, A. (2022). Evaluating the effects of responsive design on the usability of academic websites in the
pandemic. Education and Information Technologies, 27(1), 1307–1322.
Ramachandrappa, N. C. (2024). MVVM Design Pattern in Software Development. International Journal of Computer
This is an Creative Commons License This work is licensed under a Creative
Commons Attribution-NonCommercial 4.0 International License. 962
E-ISSN : 2807-9035
Volume 4, Number 2, November 2024
https://doi.org/10.47709/brilliance.v4i2.5409
Trends and Technology, 72(9), 114–119. https://doi.org/10.14445/22312803/IJCTT-V72I9P117
Taleb, Y., Stutsman, R., Antoniu, G., & Cortes, T. (2018). Tailwind: Fast and Atomic {RDMA-based} Replication. 2018
USENIX Annual Technical Conference (USENIX ATC 18), 851–863.
Tikhonova, A. (2021). Design and Implementation of Reusable Component for Vue. Js.
Vainikka, J. (2018). Full-stack web development using Django REST framework and React.
This is an Creative Commons License This work is licensed under a Creative
Commons Attribution-NonCommercial 4.0 International License. 963
