Stardust Squad

In the galaxy of life, your good deeds are the stars!

Comment

Introduction

Our system is designed to encourage users and communities to support one another through completing user-defined requests. We want to focus on the positives technology can bring—connecting people and making life easier. Stardust Squad fosters community engagement and giving back in whatever way you can through the exchange of skills and services. Requests can range from users needing a hand with odd jobs to community volunteering opportunities or rehoming items locally. Our minimalist UI encourages users to focus on the part of the technology that really matters: the people who benefit from it. Whether a public garden needs maintenance or a lightbulb needs replacing, we hope Stardust Squad can bring people together to resolve problems in everyday life.

Pages

Our system uses a space-themed UI, where 'stars' are rewarded for each task completed. In the galaxy of life, your good deeds are the stars!

Login Page

We used Firebase for user authentication to ensure access to our system is restricted to registered users. Router guards are also in place to prevent unauthenticated users from bypassing this. User information on Firebase is restricted so users cannot access other users' information.

Profile Page

Keeping with our theming, we created constellation badges to reward users for reaching certain star milestones. We were inspired by GitHub's commit heatmap and developed our version to track good deeds done over the last 100 days. We believe this will help to motivate users to repeatedly come back to make and complete requests, which is vital to the health and usefulness of our system.

Requests Page

The main use case for our system is for users to be able to submit and accept requests. These can be tagged when created to then be searched by a user looking to help out. Other information (title, description, and basic contact information) is also available to facilitate finding volunteers to complete the request.

Random Acts Page

We also included a page with a scratchcard-like interface, where an on-the-go ChatGPT-generated suggestion is revealed for a wholesome act the user could do easily nearby. We hope this will encourage users to be more active in their communities and try something new, even if there are currently no suitable listings.

Main Technologies

Vue

The main technology we used was Vue (using JavaScript, HTML, and CSS). This allowed us to quickly create an initial design for the app and implement all the ideas we planned for the hackathon. As we had some experience using it before, we were able to get started relatively quickly while still learning about new features and techniques.

Firebase

We also used Firebase for the database operations, allowing us to quickly set up a basic backend to demonstrate our system. For further development, we would explore alternatives that are more suitable for scaling (such as AWS).

Other Technologies

I18n

We used vue-i18n for the internationalisation of our system, allowing it to be easily translated into other languages if needed. This is important for systems that could be used across language borders, as only a single file needs to be translated, rather than looking for hard-coded values throughout the code. This shows how we have thought about potential future expansion despite the limited time of a hackathon.

Vercel

We used Vercel for continuous deployment of our system, meaning we were able to test it on a remote production environment. This experience prepares us for taking the step into full production when we are ready to expand. We encourage you to use the Vercel link below to give our system a go! (Use email=[email protected] and password=helloworld, or create an account).

Development Process

We used GitHub to develop the project, allowing us to effectively collaborate on code while also discussing in person to resolve issues. We used Docker and Vite for consistent and quick building across operating systems and to match the systems used for our continuous deployment tool.

While developing, we used ESLint and Prettier to lint and format our code, respectively. These tools allowed us to write more consistent code between developers and ensure a standard style for commits to GitHub. ESLint pointed out potential bugs as we were writing code, allowing us to easily spot silly mistakes.

Next Steps

The next step would be to have more user interaction on the platform apart from submitting/accepting requests. Such an arrangement would encourage more continuous use of the app and may motivate users to persevere with streaks on their heatmaps or to achieve rarer badges. Such behaviour could also lead to more word-of-mouth about the system, potentially expanding the user base (and thus also the number of people able to complete requests).

Built With

Share this project:

Updates