CrimeStopper 3000: A Journey in Mobile Development
Inspiration:
The inspiration for CrimeStopper 3000 stemmed from a desire to create a tool that empowers communities to take an active role in their safety. I was particularly moved by the idea of leveraging mobile technology to provide real-time information and facilitate quick reporting of incidents. The concept of a community-driven safety platform resonated deeply, and I wanted to contribute to building a solution that could make a tangible difference.
What I Learned:
Building the frontend of CrimeStopper 3000 was a valuable learning experience. I gained a deeper understanding of:
- React Native and Expo: I learned how to set up an Expo project, manage dependencies, and build cross-platform mobile applications. I became familiar with React Native components, state management, and lifecycle methods.
- Git and GitHub: I reinforced my skills in version control, using Git to track changes and collaborate. I learned how to initialize a Git repository, create commits, and push changes to GitHub.
- Asynchronous Programming: Working with location services and API requests required me to understand and implement asynchronous code using
async/await. - Mobile UI/UX: I learned the importance of designing user-friendly interfaces for mobile devices, considering factors like screen size, touch interactions, and performance.
- Working with Maps and Location Services: Integrating maps and location services presented unique challenges and required me to learn how to use
react-native-mapsandexpo-location. - API Integration: Integrating with an API using axios, and understanding how to deal with API request and responses.
How I Built the Project:
- Project Setup: I started by creating a new Expo project using
npx create-expo-app. I then initialized a Git repository and pushed the initial setup to GitHub. - Core Functionality: I focused on implementing the core functionalities: reporting incidents, displaying a map, and showing alerts. I began by creating a simplified version in
App.jsto ensure the basic logic was working. - Componentization: I refactored the code into reusable components, such as
ReportForm,AlertList, andMapComponent. - Navigation: I implemented navigation using React Navigation to create separate screens for reporting, maps, and alerts.
- API Integration: I used Axios to integrate with a backend API for reporting incidents and fetching alerts.
- Location Services: I integrated location services using
expo-locationto get the user's current location and display it on the map. - Map Integration: I used
react-native-mapsto display a map and markers for reported incidents. - Error Handling and User Feedback: I added error handling and user feedback mechanisms, such as alert messages and loading indicators.
- Git Backup: I made sure to commit and push changes regularly to GitHub, ensuring that my work was backed up.
Challenges Faced:
- Location Permissions: Handling location permissions across different platforms and device settings proved challenging. I had to implement platform-specific logic and provide clear instructions to users.
- Map Performance: Optimizing map performance, especially when displaying a large number of markers, required careful consideration of rendering and data management.
- API Integration Issues: Dealing with API errors, network connectivity issues, and data format inconsistencies required robust error handling and debugging.
- Keeping the Code Clean: As the project grew, maintaining clean and organized code required careful planning and refactoring.
- Cross Platform issues: Testing on both android and ios devices showed the small differences that had to be accounted for in the code.
Future Improvements:
- Implement real-time updates for alerts using WebSockets or long polling.
- Add image upload functionality to the reporting form.
- Implement user authentication and authorization.
- Enhance the map with clustering and advanced filtering options.
- Improve the UI/UX with a UI library and animations.
- Implement push notifications for new alerts.
- Add more detailed alert view.
- Add settings and profile.