Responsive React Native Mobile App/Website Road Condition Tracker/Reporter with AI Face Detection (React Native, Firebase, Python)
Mia Vrhovnik / May 2023 (270 Words, 2 Minutes)
FULL SOURCE CODE:
CURRENTLY PRIVATE GITHUB REPOSITORY DUE TO PERSONAL INFORMATION, AI FACE DETECTION MODEL CAN BE FOUND HERE
- The project is a mobile app and a website with the purpose of tracking/reporting road conditions and providing real-time updates to the users.
- The front-end is modern and user-friendly, made with React Native Material UI. It is responsive and has great UX (Button animations, feedback, etc.)
- The app and website are built with React Native and Firebase, adjusted differently for each platform (Android, IOS, Web).
- The app also includes AI face detection for user verification, trained with my face and my friend’s face, using Python and Flask.
- Both are displayed using Expo and React Native.
Mobile App
Register
The user has to register with a valid email, password and has to provide a name.
Login
The user can login with their email and password or use the Face ID feature.
Map
The user can see their current location on the main page of the app.
Track Road Condition
Clicking ‘Start’ will start sending location and gyroscope data to the database. Using our algorithm the app will then output the readings on the website and color them according to the road condition.
Website
Register
Web registration is similar to the mobile registration, but adjusted for the web by size and layout (removing the Face ID feature)
Login
Similar changes were made to the login page.
Home Page
The home page displays the map with the user’s current location and the road condition readings. It also shows the map that’s marked with the road condition readings.
Map Information
The map is marked with road condition readings. Green means the road is in good condition, yellow means the road is in worse condition, and red means the road is in a really bad condition. In the bottom left corner the user can see their current location.
Graph (Chart.js)
The graph displays all the readings and the vehicle that was used to collect them.