Building CastleWatch: My Journey into Web Development
As someone who’s recently ventured into the world of web development, I’m excited to share my latest project: CastleWatch. This project has been a rewarding learning experience in HTML, JavaScript, PHP, MySQL, and understanding how web hosting works. I’ve also had the chance to play around with the Google Maps API, creating an app that empowers people in my local community to report issues like littering, illegal parking, and much more—all while enhancing my coding skills.
The Idea Behind CastleWatch
CastleWatch is a community-driven tracker where users can easily report local issues on a map. Think of it as a digital neighborhood watch. Whether it’s litter, construction, or even internet outages, people can now report these with a simple click on the map.
The inspiration came from wanting to improve my neighborhood by creating something that everyone could use to raise awareness about local problems. I saw an opportunity to practice coding while creating something meaningful.
Technologies I Used
For this project, I worked with several technologies:
HTML: I built the foundation of the site using HTML for structure and Bootstrap for the design.
JavaScript: I learned how to integrate Google Maps, allowing users to place markers with emojis corresponding to different categories. It was challenging but fun to see it come to life.
PHP & MySQL: To store user submissions, I created a backend using PHP and MySQL. Each report is saved in a database and can be loaded onto the map based on how recent it is. The backend work involved writing scripts like save_marker.php, which saves reports to the database.
Integrating Google Maps API
One of the coolest aspects of CastleWatch is the interactive map that allows users to report issues with just a tap. This feature was made possible through the Google Maps API, which I integrated into my app. Using this API, I was able to create a dynamic map, automatically detecting the user’s location and allowing them to place markers for reports.
Initializing the Map
To start, I used Google’s initMap function to create the map and set a default location in case the user’s location couldn’t be fetched. Once the map loads, it attempts to get the user’s current location using the Geolocation API
Adding Custom Markers with Emojis
To make the reporting process more user-friendly, I added markers with custom emojis for different issue categories. When a user clicks on the map, a modal pops up asking them to select an issue type (like litter or illegal parking). Based on their choice, an emoji marker is added to the map.
Displaying Reports Based on Time
Another cool feature is the ability to filter reports based on how recent they are. I added a range slider that allows users to view reports from the past few days or weeks.
The Google Maps API allowed me to create a highly interactive experience, making it easy for users to pinpoint the exact location of the issue they’re reporting. This has been a great learning experience in combining real-world map data with JavaScript functionality.
Learning Hosting and SFTP
Getting my project live involved learning how to use cPanel for hosting, understanding SSL certificates, and working with the SFTP extension in VS Code to deploy my files. This part of the journey was equally important, as it gave me a better grasp of how websites function in the real world.
Challenges I Overcame
One of the main challenges was ensuring that users’ locations were accurately placed on the map. I integrated geolocation features to detect users’ locations but made sure the map still works even if the geolocation fails.
Another tricky part was getting the user feedback system to work smoothly. With a few tweaks in the report_issue.php file, I now have it set up to give instant success or error messages when someone reports an issue. This was a significant win for me, as it taught me about handling asynchronous tasks using AJAX.
What’s Next?
CastleWatch is still evolving. I’m planning to add more features, such as a leaderboard for the most active reporters and a feature to suggest nearby services. My goal is to refine both the user experience and my backend code, making the app more robust and reliable.