## Inspiration

We wanted to make an app that helped people to be more environmentally conscious. After we thought about it, we realised that most people are not because they are too lazy to worry about recycling, turning off unused lights, or turning off a faucet when it's not in use. We figured that if people saw how much money they lose by being lazy, they might start to change their habits. We took this idea and added a full visualisation aspect of the app to make a complete budgeting app.

## What it does

Our app allows users to log in, and it then retrieves user data to visually represent the most interesting data from that user's financial history, as well as their utilities spending.

## How we built it

We used HTML, CSS, and JavaScript as our front-end, and then used Arduino to get light sensor data, and Nessie to retrieve user financial data.

## Challenges we ran into

To seamlessly integrate our multiple technologies, and to format our graphs in a way that is both informational and visually attractive.

## Accomplishments that we're proud of

We are proud that we have a finished product that does exactly what we wanted it to do and are proud to demo.

## What we learned

We learned about making graphs using JavaScript, as well as using Bootstrap in websites to create pleasing and mobile-friendly interfaces. We also learned about integrating hardware and software into one app.

## What's next for Budge

We want to continue to add more graphs and tables to provide more information about your bank account data, and use AI to make our app give personal recommendations catered to an individual's personal spending.
## Inspiration

This project was a response to the events that occurred during Hurricane Harvey in Houston last year, wildfires in California, and the events that occurred during the monsoon in India this past year. 911 call centers are extremely inefficient in providing actual aid to people due to the unreliability of tracking cell phones. We are also informing people of the risk factors in certain areas so that they will be more knowledgeable when making decisions for travel, their futures, and taking preventative measures.

## What it does

Supermaritan provides a platform for people who are in danger and affected by disasters to send out "distress signals" specifying how severe their damage is and the specific type of issue they have. We store their location in a database and present it live on react-native-map API. This allows local authorities to easily locate people, evaluate how badly they need help, and decide what type of help they need. Dispatchers will thus be able to quickly and efficiently aid victims. More importantly, the live map feature allows local users to see live incidents on their map and gives them the ability to help out if possible, allowing for greater interaction within a community. Once a victim has been successfully aided, they will have the option to resolve their issue and store it in our database to aid our analytics.

Using information from previous disaster incidents, we can also provide information about the safety of certain areas. Taking the previous incidents within a certain range of latitudinal and longitudinal coordinates, we can calculate what type of incident (whether it be floods, earthquakes, fire, injuries, etc.) is most common in the area. Additionally, by taking a weighted average based on the severity of previous resolved incidents of all types, we can generate a risk factor that provides a way to gauge how safe the range a user is in based off the most dangerous range within our database.

## How we built it

We used react-native, MongoDB, Javascript, NodeJS, and the Google Cloud Platform, and various open source libraries to help build our hack.

## Challenges we ran into

Ejecting react-native from Expo took a very long time and prevented one of the members in our group who was working on the client-side of our app from working. This led to us having a lot more work for us to divide amongst ourselves once it finally ejected.
Getting acquainted with react-native in general was difficult. It was fairly new to all of us and some of the libraries we used did not have documentation, which required us to learn from their source code.

## Accomplishments that we're proud of

Implementing the Heat Map analytics feature was something we are happy we were able to do because it is a nice way of presenting the information regarding disaster incidents and alerting samaritans and authorities. We were also proud that we were able to navigate and interpret new APIs to fit the purposes of our app. Generating successful scripts to test our app and debug any issues was also something we were proud of and that helped us get past many challenges.

## What we learned

We learned that while some frameworks have their advantages (for example, React can create projects at a fast pace using built-in components), many times, they have glaring drawbacks and limitations which may make another, more 'complicated' framework, a better choice in the long run.

## What's next for Supermaritan

In the future, we hope to provide more metrics and analytics regarding safety and disaster issues for certain areas. Showing disaster trends overtime and displaying risk factors for each individual incident type is something we definitely are going to do in the future.
## Inspiration

Many individuals lack financial freedom, and this stems from poor spending skills. As a result, our group wanted to create something to help prevent that. We realized how difficult it can be to track the expenses of each individual person in a family. As humans, we tend to lose track of what we purchase and spend money on. Inspired, we wanted to create an app that stops all that by allowing individuals to strengthen their organization and budgeting skills.

## What It Does

Track is an expense tracker website targeting households and individuals with the aim of easing people’s lives while also allowing them to gain essential skills. Imagine not having to worry about tracking your expenses all while learning how to budget and be well organized.

The website has two key components:

* Family Expense Tracker:

The family expense tracker is the `main dashboard` for all users. It showcases each individual family member’s total expenses while also displaying the expenses through categories. Both members and owners of the family can access this screen. Members can be added to the owner’s family via a household key which is only given access to the owner of the family. Permissions vary between both members and owners. Owners gain access to each individual’s personal expense tracker, while members have only access to their own personal expense tracker.

* Personal Expense Tracker:

The personal expense tracker is assigned to each user, displaying their own expenses. Users are allowed to look at past expenses from the start of the account to the present time. They are also allowed to add expenses with a click of a button.

## How We Built It

* Utilized the MERN (MongoDB, Express, React, Node) stack
* Restful APIs were built using Node and Express which were integrated with a MongoDB database
* The Frontend was built with the use of vanilla React and Tailwind CSS

## Challenges We Ran Into

* Frontend:
Connecting EmailJS to the help form
Retrieving specific data from the backend and displaying pop-ups accordingly
Keeping the theme consistent while also ensuring that the layout and dimensions didn’t overlap or wrap
Creating hover animations for buttons and messages
* Backend:
Embedded objects were not being correctly updated - needed to learn about storing references to objects and populating the references
Designing the backend based on frontend requirements and the overall goal of the website

## Accomplishments We’re Proud Of

As this was all of our’s first or second hackathons we are proud to have created a functioning website with a fully integrated front and back-end.
We are glad to have successfully implemented pop-ups for each individual expense category that displays past expenses.
Overall, we are proud of ourselves for being able to create a product that can be used in our day-to-day lives in a short period of time.

## What We Learned

* How to properly use embedded objects so that any changes to the object are reflected wherever the object is embedded
* Using the state hook in ReactJS
* Successfully and effectively using React Routers
* How to work together virtually. It allowed us to not only gain hard skills but also enhance our soft skills such as teamwork and communication.

## What’s Next For Track

* Implement an income tracker section allowing the user to get a bigger picture of their overall net income
* Be able to edit and delete both expenses and users
* Store historical data to allow the use of data analysis graphs to provide predictions and recommendations.
* Allow users to create their own categories rather than the assigned ones
* Setting up different levels of permission to allow people to view other family member’s usage