Hubbity

Dashboard, listing all campaigns
Creating a new campaign
Login/Register page
About page

Inspiration

Our inspiration was the Amplify application by ProgramEquity, which is the project we're assigned to work on. The projects share a similar goal – helping campaigners gather funds.

What it does

It helps campaigners gather funds by sharing information about their campaigns and gathering support in the form of votes by users and other campaigners.

How we built it

We build it using Vue 3 for the front-end and Express for the back-end.
The database we used was PostgreSQL, with Knex as the ORM.
We also used Vuex, first discovered inside Amplify, a state-management library for Vue 3.
For authentication, we used JSON Web Tokens.
Finally, after building the project, we deployed it to Heroku.

Challenges we ran into

The libraries and frameworks in Amplify's stack quite new to us and we had to learn them on-spot to develop the application.
We couldn't use Vuetify as the UI library because Vue 3 didn't support it. We ended up using our own custom CSS along with Bootstrap for the UI.
We had some TLS certificate errors within the Heroku deployment, which took us a couple of Stack Overflow searches to fix.

Accomplishments that we're proud of

We managed to develop a full-stack application using Vue 3 and Express, something we had never done before.
We followed Amplify's strategy to combine development and production into the same package.json i.e. Adding different scripts for development and deployment.
We used ESM for all the imports in the back-end application and figured out a way to still run them in Node.js using a hack that uses the 'esm' package.