How to build an app fast

CraigIt app

This week I launched a new web app called CraigIt (http://davidrs.github.io/craigit/client/) CraigIt is a simple idea: hyper-local notifications for items you want on CraigsList. This blog post will explain how I built the entire app, front-end, back-end, design, and mild marketing in just a week.

Tech Stack Used

  • JavaScript with jQuery and Twitter Bootstrap 3 for front-end.
  • PHP and MySQL for backend.
  • Bootswatch for free Bootstrap themes.

My Environment

  • Sublime 3: Lightweight text editor, with lots of web friendly plugins.
  • GitHub: For version control, and client side hosting.
  • Chrome: My preferred browser for development. Dev Tools are brilliant, especially with %o object printing.
  • HostPapa: Apache shared hosting for cheap server side.

Quick Advice

  • Use Initializr to get an app boilerplate instantly: http://www.initializr.com/
  • Use tools you know. If you want to build something fast, stick to tools you know. ex. PHP is getting old, but I know it well and can work with it.
  • Plan on paper. Sketch out your database and actions you will need to perform on paper, changing a sketch is much faster than changing code.
  • You are not a designer. Use Twitter Bootstrap or a similar UI library. If you are reading this you are not a designer. A lot of talented people have put time into making Bootstrap look good, so use it. If you are worried about all Bootstrap sites looking the same checkout Bootswatch for lots of free themes. Bootstrap is also responsive, so you get a mobile working app at no extra effort.
  • Keep it simple. You don’t need an MVC and framework for every prototype app. Keep your code clean and well commented so that you can evolve it later, but don’t do more than you have to.
  • Focus on Minimum Viable Product, and spread the work across the app. Do the minimum viable amount of work for all components: design, code, marketing, etc. If you only have one week, I’d suggest spending 4 days coding, 1 day on UI, and 1 day on analytics and marketing.

Process

  1. Separate server side and client side. Create two folders, one for ‘client’ side and the other for ‘server’ side, this helps to keep a clear logical separation between what belongs where. When you publish your web app you may end up hosting them in the same place, or host them in seperate places, but this decoupling provides flexibility. Anything with UI should be in the client side folder.
  2. Sketch out what database fields I will need. For CraigIt I need the users email, their search query, some filters, and array of which listings we’ve sent them, and one or two other fields.
  3. Create server side for all of the actions I will need. For CraigIt I need to support actions like: ‘getSearches’ that returns all searches for a given email address and ‘runSearches’ that checks all database entries and checks craigslist and sends the necessary notifications.
  4. You should be able to ‘use’ your app by just interacting with the server via curl.  The curl requests you create will be what your AJAX actions client side look like.
  5. Create the client side boilerplate page.
  6. Create forms and divs for all of the inputs / outputs your app will need.
  7. Structure and cleanup the ui on client side.
  8. Test.
  9. Add Google Analytics and Facebook header tags.
  10. Share!

If you need to make a mobile app quickly, checkout PhoneGap. You can follow almost all the same steps as above, but you get a working mobile app at the end of it.