CrashDragon

Introduction

In the summer of 2024, I was accepted into the Google Summer of Code 2024 program by the VideoLAN organization. The organization is known for developing the popular VLC media player. I was thrilled to be accepted into the program, as it was a great opportunity to work on an open-source project and gain valuable experience in software development.

VLC is well-known for its ability to play a wide variety of media formats and its support for streaming protocols. I worked on a different project called CrashDragon, which is a crash managing tool for VLC.

Project Overview

CrashDragon is a crash managing tool for VLC. Initially it was made using Golang using the Gin framework. It used to serve HTML pages directly from the server. I mostly worked on rebuilding the frontend using Vue.js.

Vue.js is a popular JavaScript framework for building user interfaces. It is known for its simplicity and ease of use. I used Vue.js to create a modern and responsive user interface for CrashDragon. The new frontend is more user-friendly and provides a better user experience. I also added a GitLab authentication feature to the frontend, which allows users to log in using their GitLab account.

What I Worked On

During the program, I mostly worked on building the frontend for CrashDragon using Vue.js. I created several components for the user interface, such as the graphs for displaying crash data, crash and report details, login and logout, comments, etc. I also worked on adding new APIs and endpoints to the backend to support the new frontend features.

The main issue with the old frontend was that it was not user-friendly and lacked modern design reactivity. As it was serving HTML pages directly from the server, it was not easy to maintain and update. The new frontend is more modular and easier to maintain.

As per the project requirements, I was supposed to use Vue.js to build the frontend. I incorporated the following frameworks and libraries in the project:

Pinia: For state management
Vue Router: For routing
Axios: For making HTTP requests
Bootstrap: For components and styling
Chart.js: For creating graphs

The GitLab Authentication part was something I started before the GSoC program. I already had made a working prototype of it. My mentor suggested me to start with the Frontend part first so I can build the authentication part on top of it.

These are some of the images of the new frontend:

What Is Done

The new frontend for CrashDragon is almost complete. I have created all the necessary components and pages for the user interface. The new frontend is more user-friendly and provides a better user experience. I have also added the GitLab authentication feature, which allows users to log in using their GitLab account.

What Else Should Be Done

Some more optimizations and improvements can be done to the backend. The most basic optimization was already achieved by bumping the Go version to the latest (1.22 as of writing). The frontend can be further improved by adding more features.

What I Learned

Working on the CrashDragon project was a great learning experience for me. I learned a lot about Vue.js and frontend development. I also gained experience in thinking and making design decisions for a Full Stack project.

Future Plans

I plan to continue contributing to the VLC project and CrashDragon. I will keep an eye on the issues and try to solve them. I also plan to add more features to the frontend and improve the user experience or as per the requirements of the project.

All my contributions can be found here

GSoC 2024 with VLC