AvoCard

Login Page Of The Webapp
Previous Transactions
Account Details and Balance
Market Place
Treasure Chest
board

Inspiration

-From the University of Cambridge during 2016/17, 19,849 tonnes of waste products were produced, which increased from 2015/16 by 131 %.

-There are many opportunities afforded by managing the University’s waste effectively. Waste disposal (excluding construction waste) costs the University over £1.4M per year, and there are much broader financial and environmental costs associated with purchasing, transport, storage and disposal of resources and waste.

-A 2018 survey found that 92% of staff consider waste disposal as the top environmentally-conscious choice they make in the workplace, far above other issues such as purchasing (71%) or travel (63%). The number of students at the Royal Holloway, only 598 people, registered for the volunteering.

What it does

AvoCard rewards your performance in class and activity in extracurriculars with ‘AVO points’ which can be exchanged for campus gear, coupon benefits, and other free perks.

To drive home in the importance of ‘AVO points’, the webapp also features a marketplace where students can buy/sell used items in hopes of decreasing waste in-campus

This platform strives to provide an environment-friendly incentive for one to excel in their academics whilst greatly assisting staff in obtaining a high attendance rate.

(More will be explained in our prepared presentation)

How we built it

Backend:

Python: Python, powered the core logic of our project. Its elegant syntax and vast libraries made development efficient and enjoyable.
Flask: We leveraged Flask's lightweight nature and flexibility to build a robust API that served data to our frontend efficiently. Frontend:
Typescript & React.js: Typescript and React.js formed the backbone of our user interface. Typescript's static typing added a layer of confidence, while React.js's component-based architecture facilitated rapid development and clean code.
Javascript & CSS/HTML:Javascript, CSS, and HTML provided the building blocks for interactive elements and stunning visuals.

Styling & Design:

SASS/SCSS & Tailwind CSS: SASS/SCSS's nesting and mixing functionalities helped us maintain organized and reusable styles, while Tailwind CSS's utility-first approach expedited UI development.
- VIT: We experimented with VIT, a new and exciting CSS-in-JS framework, exploring its potential for improved maintainability and component isolation.

Deployment & Management:

VERCEL: Vercel proved a fantastic platform for deploying and hosting our application with ease. Its built-in serverless functions and seamless CI/CD integration streamlined the process.
Firebase: We tapped into the power of Firebase's backend as a service (BaaS) platform, utilizing Firestore for our database and Firebase Auth for user authentication.

Tools & Productivity:

Figma: Figma served as our collaborative design tool, enabling real-time brainstorming and iteration on UI mockups.
Notion: Notion kept us organized, with shared docs, wikis, and task lists keeping the team on track.
Vscode: My trusty code editor, Vscode, provided a comfortable and customizable development environment with invaluable extensions.
Canva & Yarn: Canva helped with quick visual assets, while Yarn ensured efficient package management for our frontend dependen

Challenges we ran into

Security concerns Scaling Issues

Accomplishments that we're proud of

Everything basically. The main thing that we want you to see is that the quality and potential of our website impacts not only the environment but also the lively school life.