Indie Release Notes #4
MudQuest: Party locations, Show party details, Select a party, List party cards.
This is a very exciting internal release for me since the beginning of the project. The reason is that it is truly starting to look more and more like a real product that can help my community find each other and enjoy off-roading and overlanding together!
Here is the release notes:
✅ Party meet-up locations: Now, when a party is created, it is clearly shown on the map. Geolocation is the main anchor for positioning and is very precise. The address is also displayed to help people find the place by address;
✅ Select party location: Users can now select a party and view details in the info card. The card includes pagination and lists all available parties in the area. (Currently, the area covers the entire USA but will be limited to the search area in future releases.);
✅ Refactored show party page: This page has been updated to display all the important information. Participants and comments are not included in this release;
✅ New map effects: Fly to the party location when the info card changes, select a party, and display static geolocation on the show page;
✅ Component library: Development tool for component-driven development that allows better component reusability and documentation. Visible to developers only.
The release took me less time (lesson learned :)) because I organized it better this time. It still took me 3 weeks to complete. I made 24 commits, adding 1,668 lines of code and removing 341. As always, the hardest part was working with annotations. Adding the on-click listener was the main task, but it went better this time as I continue to improve my understanding of the Mapbox library.
Party meetup locations
The party locations are now displayed on the map after users create them. These meetup locations are the initial form of parties in MudQuest. The idea is to start at a specific location, which can later turn into a moving party (not included in this release). Party locations are based on geolocation (latitude and longitude) for precise positioning. The annotation markers have been updated to a simple pin with the letter "P," as other marker designs were clashing and appeared too complicated. See the last two pins below.
Locations can be selected, and additional information about the party will be presented in the info party card at the bottom of the screen. When clicked the user will be redirected to the party show page.
Select party location
Select party location allows users to choose and explore party information in two steps: first, view a short description on the party info card at the bottom of the screen. Abd second when more details are needed, clicking on the card will redirect users to the full party show page. The cards are linked to the party meetup location, so selecting a party or swiping through cards will move the map camera to the selected party on the map. This is useful when there are multiple parties in close proximity. In future releases, I will ensure that only parties relevant to the camera location are shown on the map, and I will implement clustering for better app performance.
I have decided to display the address on the map, but I might change it to show the description with a transition and coordinates instead. I will see how users respond to this and am open to improving the user experience if needed.
As usual, annotations were the most complex part of this. I had to learn about annotation click listeners and their limitations in the Flutter MapBox SDK. I added an annotation provider and service to manage it from various places since it requires some cleanup afterward. I also added a redrawing debouncer to ignore clicks on the red marker. I am using PointAnnotationManager for both markers and party locations, so I had to be very precise to ensure both work as expected. I also encountered issues where one click could select multiple parties at once, which is not something I plan to implement (at least for now).
Swiping party info cards will cause Mapbox to fly to the selected location, and the same happens when a party is selected with a regular tap.
Party show page
I had to completely refactor the existing party show page because it was very different from the current party model, so it was easier to rewrite it entirely. I experimented with several components to make the hero image look appealing and ended up using Flutter Sliver, which worked very well (I wish I had known that before I fully implemented it with the sliding-up panel, lol :D).
Back to my lessons learned, I started with Figma designs first, which worked very well, and the final result looks almost exactly as I designed it.
Main sections: Description, Metrics with information like difficulty, duration, start date, and others, Location, Participants, and Comments. Participants and Comments are out of scope and are included here as placeholders and visual representations of future components. The Location is fully functional and uses MaboxSearch API to retrieve the static location of the meetup location.
Component library(Storybook)
I strongly believe in component-driven development(CDD), and tools like Storybook have been helpful in organizing, reusing, and documenting my components. So, I needed something similar in Flutter and found the storybook_flutter package, which is free and easy to implement. Now, I have a proper place for all my components. I have also changed my approach to developing components - it always starts with Storybook, including development and test automation. Eventually, this collection will become documentation for users.
Some other storybook fluter examples:
Instagram as lead builder
I keep updating my Instagram page to make it part of my MudQuest campaign. If anyone wants to follow me, you can find me at ongx460 - https://www.instagram.com/ongx460. In the past, I was also a photographer, so creating nice pictures and videos is not unfamiliar to me. I just need more time to take my GX out and create some good content.
I am planning to have the following topics on my Instagram:
Lexus GX460 Offroad videos: I'll be filming my vehicle, documenting all the upgrades, and going off-road, camping, or doing anything else that satisfies the Instagram algorithm.
Reaction videos of me watching others going offroad;
MudQuest mobile app updates where I also going to ask for community feedback;
Meme short videos;
I have 1372 subscribers will see how far I can take it.
What Next?
Actual functional RSVP system so other users can join parties;
Edit party;
What is MudQuest?
MudQuest is a mobile app designed to connect off-road enthusiasts and simplify the process of planning and joining off-road adventures. It brings the off-road community closer together by offering tools for real-time coordination and exploration. Whether you’re a beginner or an experienced overlander, MudQuest helps you find like-minded adventurers and make the most of your trips.
Features Currently Available:
Real-Time Party Finder:
Create and join off-road parties in real-time.
Visualize parties on an interactive map using Mapbox integration.
Party Management:
Create detailed party profiles, including meetup locations, difficulty levels, and descriptions.
Add participants and update party status dynamically.
Custom Rigs:
- Showcase your off-road vehicles (rigs) by adding make, model, year, and custom titles to your profile.
User Profiles:
- Set up personalized profiles with information about your experience, hosted parties, and joined parties.
Geolocation Services:
- Access real-time location updates and navigate to meetup points easily.
MudQuest is in active development, with plans to expand its features in the coming months. Join the journey now and be part of the growing off-road community.