12 - CiviMeter

CiviMeter allows communities to report parking violations for safer streets and earning rewards. Snap a photo, submit details, earn points for gift cards. Make a positive impact one report at a time!

Comment

Inspiration

The inspiration for CiviMeter came from the need to promote safer and more organized streets by empowering community members to report parking violations. By involving citizens in urban management, we aim to enhance compliance with parking regulations and improve traffic flow.

What it does

CiviMeter allows users to report improperly parked cars by snapping a photo and submitting details of the violation. Users earn points for each report, which can be redeemed for gift cards and other rewards; such as Coca Cola product vouchers. The app also provides a history of submitted incidents and shows nearby locations with parking violations that need to be reported.

How we built it

CiviMeter is built using a combination of modern web and mobile technologies to provide a seamless user experience. The frontend is developed with React Native and Expo, allowing for cross-platform compatibility on both iOS and Android devices. The app leverages various Expo modules for functionalities such as camera access, location tracking, and file system operations. For instance, the expo-camera module is used to capture photos of parking violations, while expo-location is utilized to obtain the user's current location. The captured images are then encoded in base64 format using expo-file-system before being uploaded to the backend server. The app's navigation is managed using react-navigation, providing a smooth and intuitive user interface.

The backend of CiviMeter is powered by Flask, a lightweight Python web framework, and MongoDB Atlas, a cloud-based NoSQL database. The backend handles API requests for submitting reports, fetching user history, managing user profiles, and retrieving available rewards. Image uploads are processed using Flask's file handling capabilities, and the data is stored in MongoDB Atlas. Terraform is used to manage and provision the infrastructure on MongoDB Atlas, ensuring a scalable and reliable backend environment. Axios is employed for making HTTP requests from the frontend to the backend, facilitating seamless communication between the two. The app also includes a reward system where users earn points for each report submitted, which can be redeemed for gift cards and other prizes, enhancing user engagement and motivation.

Technologies Used

Expo

Expo provided an excellent framework for building our React Native application. Its extensive library of modules, such as expo-camera and expo-location, made it easy to implement complex features like photo capture and location tracking. The Expo Go app was particularly useful for quickly testing our app on multiple devices without the need for a full build process.

MongoDB Atlas with Terraform

Using MongoDB Atlas for our backend database was a game-changer. The cloud-based NoSQL database offered scalability and ease of use, allowing us to focus on developing our application rather than managing database infrastructure. The integration with Terraform for infrastructure management was seamless, enabling us to provision and manage our database resources efficiently.

ChatGPT

4o is used to recognize user-submitted illegally parked cars, leveraging the model's powerful computer vision capabilities to identify both license plates and what specific law is being broken, as well as a confidence rating for the report. Chat also generates a summary of the parking infraction from this, which is stored on our backend for future retrieval.

Flask

Flask served as our backend framework, providing a lightweight and flexible environment for developing our API endpoints. Its simplicity and ease of use allowed us to quickly set up routes for handling image uploads, fetching user data, and managing user profiles. Flask's extensive documentation and community support were invaluable throughout the development process.

Axios

Axios was our go-to library for making HTTP requests from the frontend to the backend. Its promise-based API made it easy to handle asynchronous operations, and its built-in support for interceptors allowed us to manage request and response transformations efficiently. Axios played a crucial role in ensuring smooth communication between our React Native frontend and Flask backend.

GitHub

GitHub was instrumental in managing our codebase and facilitating collaboration among team members. The platform's robust version control system allowed us to track changes, manage branches, and resolve conflicts efficiently. GitHub Actions also provided a seamless way to automate our CI/CD pipeline, ensuring that our code was always tested and deployed smoothly.

Overall, the combination of these technologies enabled us to build a robust and feature-rich application within a short timeframe. Each tool brought unique strengths to the table, contributing to the success of our project.

Challenges we ran into

One of the main challenges was ensuring accurate location tracking and handling image uploads efficiently. We also faced difficulties in integrating the backend with the frontend and ensuring smooth communication between the two.

Accomplishments that we're proud of

We are proud of creating a user-friendly app that empowers community members to contribute to safer streets. Successfully integrating the location tracking and image upload features was a significant accomplishment. Additionally, implementing a reward system to incentivize users was a key achievement.

What we learned

We learned the importance of seamless integration between the frontend and backend, as well as the challenges of handling multimedia data in mobile applications. We also gained insights into user engagement strategies through the implementation of a reward system.

What's next for CiviMeter

Next, we plan to expand the reward system to include more diverse incentives and partner with local authorities to streamline the reporting process. We also aim to enhance the app's features by incorporating real-time notifications and improving the user interface for a better user experience.

Share this project:

Updates