Spark

In Home Page you can participate and create events, you can also track our activity and your current experience as a Sparkles.
Upcoming Event where you can access the information of each event and participate, you can also search for events by name and location.
In LeaderBoard you can track all the Sparkles experience and level giving out a sense of healthy competition through helping others.
In Redeem Page you can redeem your coins you gained from volunteering for donating to people in need.
In Profile page you can view of your current coins, experience, level and experience needed for the next level
Your past participated events can also be recalled in profile page.
User can also create event. Create Event will ask for event details. The creation must be confirmed by admin to show up in website.
Create Event page (2)
Login Page for user credentials
Register Page for user joining as sparkles

Inspiration

The inspiration for Spark came from a fusion of technology, community service, and gamification to create an application that motivates people to volunteer. Nowadays, many websites exist that ask for volunteers, particularly those who want to make a good difference in society. Sadly, not many people are interested in volunteering since they don't believe they are getting anything from it. Then, our team thinks gamification is the answer to the problem. By utilizing gamification to provide a more rewarding and fascinating experience, gamification encourages people to volunteer. Gaining experience points, coins and rewards gives a real sense of accomplishment. Volunteers may be highly motivated to continue the work if they feel that their achievements are being recognized.

Spark offers benefits in the form of donations to those in need rather than providing financial incentives to volunteers. We think that rewarding volunteers monetarily would be damaging to the image and the meaning of volunteering itself. Conversely, by converting their coins into donations to charities, volunteers can witness and see the tangible results of their work, resulting in a stronger feeling of satisfaction and purpose in helping others.

What it does

With a gamification twist, Spark is an online volunteer website. Each time you take part in an event, you get experience points and coins. Although these coins cannot be exchanged for cash or other financial incentives, they can be used to donate charitable organizations that help the underprivileged on the redeem page. On the other hand, users of this website can create their volunteer events. The event host may offer a bounty of experience points and coins, rewarding all participants who join. Last but not least, as a participant, users can also compete in experience points with other users, this can be seen on the leaderboard page. Every events that participated by user will be marked in an activity heatmap at home page.

How we built it

We use React Typescript technology as a library in frontend development. Then, we also use the Tailwind CSS and Ant Design library to style the Spark website. For database, we use Firebase. And last but not least, we use Github for collaboration within our team. In the process, our group divided the tasks per group member. With the following task details: Two people (Gavind and Carney) work on design and frontend, one person works on backend and database setup (Nenlitio), and one person (Davis) integrates and connects the frontend with the backend.

Challenges we ran into

There were several challenges and difficulties that our group experienced when taking part in this competition:

Having trouble coming up with ideas. Our group took a while to come up with appropriate ideas for the hackathon's topic before it began. The problem arises because we also consider the consequences of selecting any topic, including features, development time, and other factors.
Limited time. The very short time of 36 hours was enough to make us overwhelmed in working on this competition project. This very short time requires us to select features that can be applied to our website, and also leaves time to create demo videos and documentation. ## Accomplishments that we're proud of Achievements we are proud of:
Our group succeeded in working on the features as planned in the initial planning stage.
Our group can work together well even though we have never worked together on the same project.
From all the members in our group, we have given our best to work on the project at this hackathon. ## What we learned Of course, we have learned many things while participating in this hackathon. Both in technical matters or not. What we learn:
Planning at the initial stage must have been thought through well in advance. So, during implementation, we will carry out our tasks according to the plan that has been set.
We learned how to use the Ant Design library to style our website for the first time.
We learn how to work together properly and correctly using GitHub when working on a project
We learn how to manage time as best as possible ## What's next for Spark Looking ahead, we plan to add several interesting features to the Spark application. For example:
Quests, when a user completes a task in a daily/weekly quest, the user will get a bounty that can be redeemed for donations. This will help users feel interested and continue to volunteer to help others in social life
GPS Map, when determining the location when creating an event, it is easy for users to choose the location where the event occurs by using the map on our website
Feedback/ Review, implement a review system where volunteers can review the events they participated. And, event organizers can also leave feedback for volunteers. This is important so that volunteers may give organizers insightful feedback to raise the standard of events in the future. In addition, volunteers might enhance their performance in upcoming activities by using the organizers' feedback.