Sonar
A location-based voice sharing web app that lets users drop voice messages in real-world locations, discoverable by nearby listeners.
Project Details
Completion Date
March 2024
Duration
3 weeks
Primary Language
TypeScript
Project Type
web
Key Features
- Record and share voice messages tied to your current location
- Explore voice notes left by users nearby
- Custom map styles: High Contrast, Normal, and Watercolor
- Dark and Light mode support for all maps except Watercolor
- Interactive map interface with pinned voice locations
- Anonymous or signed-in posting
- Mobile responsive design
- Geofencing to control how far messages can be heard
Project Overview
Sonar is a unique geo-social platform that allows users to record and share voice messages that are pinned to their real-world locations. Built with modern web technologies, Sonar creates an immersive auditory map where users can leave audio notes, poems, memories, or shout-outs—each anchored in space. Listeners nearby can tune in and discover what's been said in their current area. The platform includes custom-designed map styles like High Contrast, Normal, and Watercolor, with support for dark and light modes, enhancing the experience for different moods and environments.
The application features a modern, responsive interface that adapts to various screen sizes and devices. It incorporates the latest design trends and best practices to ensure an engaging user experience.
The Challenge
The main challenge was to create a web application that could handle complex data operations while maintaining a smooth and responsive user interface. Additionally, ensuring cross-platform compatibility and optimizing performance were key considerations throughout the development process.
The Solution
By leveraging Next.js, OpenStreetMap, Tailwind CSS, Firebase, GeoLocation, Web, Shadcn, I was able to build a robust solution that meets all the requirements. The application's architecture is designed to be modular and scalable, allowing for easy maintenance and future enhancements.
Development Process
Planning & Design
The project began with extensive research and planning to define the scope, requirements, and technical specifications. Wireframes and mockups were created to visualize the user interface and experience.
Development
Using an agile approach, the development process was broken down into sprints, with regular reviews and iterations. This allowed for flexibility and adaptability throughout the project lifecycle.
Testing & QA
Rigorous testing was conducted at each stage of development to ensure functionality, performance, and security. User feedback was incorporated to refine and improve the application.
Deployment
The application was deployed using a CI/CD pipeline to ensure smooth and reliable releases. Monitoring and analytics were set up to track performance and user behavior.
Related Projects
On My Way (OMW) - Driver App
A driver-facing delivery app built with Flutter, Firebase, and Node.js, designed for real-time delivery management and order handling.
Sonar
A location-based voice sharing web app that lets users drop voice messages in real-world locations, discoverable by nearby listeners.