← About Jeff

4th & Mayor: the ultimate foursquare app for your Windows Phone

March 20, 2011

I’m pleased to announce that my app is called 4th & Mayor. It is a foursquare client for Windows Phone 7 and it is now available for free on the Windows Phone Marketplace. I previously hinted at the app with this other post.

This app brings all of the great new foursquare features that your iPhone and Android friends have been using: adding and experiencing photos at places, photos with tips, commenting on check-ins, and an early look at the cool new “explore” features that recommendations places and things to do. (fsq3 info on the foursquare blog)

It’s been a lot of fun building the client over the past few months, and I am excited to share a lot of my development experiences on this blog. Expect great things. Foursquare has a very solid and open API for developers to use (REST + JSON), and it’s a great, fun way to explore any city and stay in touch with your friends. Also, given all the recent news about Twitter, I’m super happy that I didn’t decide to make a Twitter client :-)

On top of being a fully functional, free foursquare app, I’ve also made sure to address key complaints that I heard from people regarding the official foursquare app for WP7: general touch responsiveness, feature completeness, and the ability to check-in to international locations (with accents and other special characters in their name).

Follow the product

You can find out more about 4th & Mayor on the web at http://www.4thandmayor.com/ – as well as on Twitter @4thandmayor and on Facebook. If you are interested in the app, its features and updates, please subscribe to the app’s blog at http://blog.4thandmayor.com/.  I don’t want to inundate my technical subscribers with news about app updates and new features, so I want to keep that separate for the most part.

Do expect a great series of blog posts to come out of this learning experience, all the development-related information will be posted here. From the Windows Phone design system to development tips and tricks, this is the place to find that.

“4th & Mayor”

So my app is called 4th & Mayor. Instead of focusing on just raw performance from a development standpoint, I wanted to show how I would envision a great Windows Phone app. I believe that for a v1.0 release, I have delivered a great initial app experience. I decided to try and demonstrate a happy compromise, hoping to yield a wonderful experience that doesn’t take short-cuts.

  • An emphasis on design
  • Aiming for complete client functionality
  • Keeping the app responsive to user input no matter what
  • A beautiful experience, yet differentiated enough

This all started because one of the things I use my smart phone the most is foursquare, followed by email and Twitter. I just really wanted a better foursquare experience on the Windows Phone, and figured this would be the best way to gain excellent app development experience.

(The name? It's a little odd yet creative, is clearly not an official client, and it's all about working to become the mayor while having fun, right? The intersection of foursquare (4th) and the fun of the game – working to establish a mayorship (Mayor).

An emphasis on design and rich visuals

The design system for Windows Phone, code-named “Metro”, really is cool. Others have written about the experience before, but it really is a very developer-friendly design system that is crisp, clean, and once you understand the core principles and rules, it’s easy to build jaw-dropping apps. I’m just a geek, but feel I’ve come away with a pretty good first release when it comes to visual consistency and trying to adhere to the basics of “Metro”.

This comes through in a few ways. If you look to the screenshots below, on the left, you see the nice visuals in the “places” listing: no rounded corners, crisp and clean, etc. On the right, the “photos” pivot item for a page shows a few large, rich photos from the venue – and clicking them brings up the full-screen photo experience.

Both are very easy scenarios to polish thanks to XAML, but it takes an understanding of how to translate “Metro” ideas into XAML. A lot of off-by-12-pixel polishing goes into shipping a solid Windows Phone app.

A fun experience

There’s great incentive in the new foursquare 3 features to check-in and have fun doing it: a completely revamped points system. Get points for being a VIP (checking in with the mayor), being the first of your friends to check out a new place, and so on. This, combined with the new leaderboards and an ever-growing catalog of badges is just modern-day fun.

The rush to the marketplace

When I heard about the problems that people were having with the foursquare app for Windows Phone, I decided to try and move into “ship mode” immediately instead of completing all of the features I had planned. I forked my source and started polishing and fixing bugs last weekend. As a result, I apologize if there’s something missing or a few bugs in the first release.

My app does 2 things that people have been having issues with the foursquare WP7 app:

  • Sign in works
  • You’re able to check into a place that has special characters or accents in the name (international friends, enjoy!)

An update with specials is coming soon

Now that the app is out there, an update coming soon will add specials support, and I’ll also work to address any large buckets of customer-reported bugs. Thanks to getting the build out earlier in the week for people with developer unlocked phones, I’ve been able to start identifying a few small bugs and issues that I hope to correct soon (thanks everyone).

From a blank Visual Studio project to shipping… < 120 days

I created a new Visual Studio project a few weeks after purchasing my first Windows Phone (a Samsung Focus, I’m pretty happy with it), and registered for the domain name 4thandmayor.com in early December 2010. Hoping to learn about the process of building a large, feature-complete Windows Phone app from the ground up, I had no idea how much time it would take, but it’s been a fun use of many a night and weekend over the past few months.

Most development happened in spurts as I found a free Sunday afternoon or a clear night or two. I’m really glad that I was able to the have the opportunity to build a feature-complete WP7 app and that Microsoft is open to this kind of project as appropriate.

A brief, approximate timeline of my development process:

  • Early Dec. 2010: App concept, goals, and new Visual Studio project created. Targeting v1 of the foursquare API.
  • Mid-December: Domain name registration, setup a source control system at home, etc. Oh no! Foursquare v2 API launched, v1 to be deprecated.
  • Christmas vacation Dec. 2010: Lots of coding and completing the application, foursquare launched photos & comments support for iPhone and Android. I was able to add these features in a few days over the break.
  • Late January: spent a few weekends polishing, fixing bugs, and focusing on the “Metro” design
  • February: moved to a much more rich data loading system
  • 3/8/2011: foursquare announced fsq3, with even more new features, at SXSW. Around this time, there were login issues with the official foursquare app for WP7, and I decided it was time to launch the app.
  • 3/16/2011: submitted to the Windows Phone Marketplace

Not knowing that fsq3 was coming out at SXSW, it’s a testament to the Windows Phone app platform that it only took a few hours to add these new views, models, and features into my app (exploring, enhanced leaderboards, etc.), allowing me to deliver a little more than a week and a half later a feature-complete implementation.

I will be covering a lot of the experiences and sharing a decent amount of code and samples over the next many blog posts, covering:

  • Application architecture
  • Data loading strategies
  • Designing for Windows Phone… for developers.
  • Building out controls and components for a strong and polished “Metro” experience
  • Establishing a web experience for your WP7 app
  • Compromising between raw performance and beautiful design
  • Analytics and apps
  • Keeping the user interface responsive
  • OAuth2 and the Windows Phone
  • Pivot loading techniques and user interface virtualization tips
  • Debugging, collecting feedback and beta testing
  • Gold plating: making a fun out-of-box, first-time-run experience
  • Polishing a Windows Phone app
  • Marketplace ingestion and the last mile

Please let me know if there are any things I’ve missed, or you’d like to know about, and I will add them to the list! I’ve learned a wealth of information along the way but I think this will be a long-term blogging project, there’s just so many different things here.

Technical building blocks

The app was a pretty big technical undertaking, the goal of building a feature-complete app for such a large service is a big challenge. Along the way I had to build out a number of components, and of course make use of many great things others have shared as well.

And I also built out a ton of specialized components, talk about fun:

  • Watermarked text box
  • Visual components resembling the OS’s text messaging experience
  • An awesome scroll viewer that can do delayed image loading in an efficient and smart manner
  • Smart image controls for fading, replacing “Metro”-style blocks of color, and efficiently downloading bits.
  • A grouping items control with an emphasis on smooth scrolling
  • A text visualizer for showing licensing information in the About screen
  • A Static Bing Map control for high-performant, beautiful maps
  • A WebXamlBlock for displaying updatable information
  • Orientation-aware layout containers
  • An analytics component
  • “Live tiles” for use inside an app
  • A fun Ken Burns-style effect
  • Enhanced message box and dialog overlays
  • A very lightweight app settings provider
  • Tombstoning stream and text functionality

Initial reception

“My Saturday night was great, thx to 4th & Mayor” – toowicked

“Been using 4th & Mayor foursquare app, gotta say it’s the best one I’ve used on any OS. Get it when it’s available in WP7 marketplace!” - Jonnie

“4th & Mayor you are beautiful and fill my heart with hope for #WP7 future.” - Sergey

“Wow, 4th & Mayor is incredible. Infinitely better than the official foursquare app for Windows Phone.” - Brian

“Inspired by the @4thandmayor application. I guess I will be doing some #wp7 coding this weekend.” - Laci

“Wish we could get you to make a Twitter app that looks as good as 4th & Mayor :-)” - Josh

Special thanks

This project could not have happened without the help and support of many good friends and engineers.

A big shout out to Naveen and all the folks at foursquare: thanks for building a beautiful product, great service, and having a solid, open API for developers to take advantage of!

As called out in the “About” page of my app, thanks:

  • Shawn Burke
  • David Anson
  • Gilles Khouzam
  • David Poll
  • Peter Torr
  • Andy Pennell

Also, thanks to my excellent beta testers who have been checking in all over the world. Notably, Shawn, Eric, Gilles, Nimesh, Shoko, Sam, Johan, David, and Nic. You all rock!

There is a list of known issues up on the site. The app is designed to offer a rich, compelling and fun experience for people with up to 50 foursquare active friends, with slight performance degradation for people with more friends.

So, check out the site and download the app if you’re into foursquare.

Hope you enjoy the app!

Foursquare™ is a trademark of Foursquare Labs, Inc.
This application uses the foursquare™ application programming interface but is not endorsed or certified by Foursquare Labs, Inc.