Project Ropa

Login Page

What it does

The app allows users to create an account, log in, and generate a QR code representing a donation. Each QR code links to a unique donation entry stored in the database. When scanned, the code updates the donation’s status with the location and time of the scan. This helps track the movement and delivery of donated items.

How we built it

We used React Native for the mobile frontend and Express.js with MongoDB for the backend. Axios handles communication between the app and server, while Mongoose manages our database models. We used JWT for secure authentication and QR code libraries to generate scannable donation tags. The app was tested using Expo Go on mobile devices and run locally using IP-based network configuration.

Challenges we ran into

We faced challenges getting the mobile app to connect to our backend, especially with Expo Go and local IP setup. We also ran into issues with missing routes and data not being sent correctly between the frontend and backend.

Accomplishments that we're proud of

We successfully built a full-stack mobile app that lets users register, log in, and generate QR codes for donations. We connected the frontend and backend, stored data in MongoDB, and displayed the generated QR codes in the app. We also implemented secure authentication using JWT and handled real-time updates like scanning and tracking donations. Along the way, we learned how to debug network issues, structure API routes, and manage state effectively in React Native.

What we learned

Through this project, we learned how to integrate a mobile frontend with a Node.js/Express backend using React Native and Axios. We gained experience working with authentication flows, protected routes, and secure data storage in MongoDB. We also became more comfortable debugging issues related to mobile networking, such as IP mismatches and request timeouts. Overall, we developed a deeper understanding of full-stack development in a mobile context.

What's next for Project Ropa

Next, we plan to improve the UI and make the donation flow more user-friendly. We also want to add features like viewing admin-level tracking and notifications. Long-term, we’re considering deploying the backend to a cloud service so it’s accessible without a local network. This would make the app usable in real-world settings and ready for testing with actual users.