How to Create an App in 42 hours

with ionicframework, mongoDB


Last weekend, we created an app. It is cross-platform and it works perfectly!☺ We use ionic framework for the sake of speed.


Find a buddy who is better than you

(you have to find a person who has a lot of knowledge)

I am very lucky to found my fellow friend Sercan. We met in the dormitory. He is a genius coder and very intellectual person. I am proud to say he is better than me. I love the feeling when I am with him. It is like every moment he teaches something to me.


Find a hackathon

(hackathons are the best)

Sercan and I love the hackathons. We attend all of the hackathons whether we know the topic or not. Thanks to this, we learn a lot! Hackathon means to us free meals, warm atmosphere, a chance to learn new techs. In every hackathon, we aim to win. Sometimes we won, sometimes not but everytime we learn new things. For creativity, please attend hackathons. It is better than office or home.


Find an idea

Icon made by Freepik from www.flaticon.com

(you haven’t got too much time for it but you must think first)

Talking from experience, don’t work before idea. Allow (at least) 1 hour time to find an idea. The Idea is important. It will be what you do. It will be your final project.


Find the similar apps, look how it works

(or you can look out some apps to inspire their design)

After you decide an idea, you must know that you are not the first person you think that. Someone thought maybe the same, maybe the similar idea before and did it. For example, if you think an app for call a cab instantly, you should look at UBER and Local Taxi Companies apps. The UI and UX can be the same. You can steal some good features and improve your idea. I don’t love this quote, but “no need to discover America again”. Look at the America and add some new features on it. It will be better. And it is not stealing.


Create a board on Trello

(don’t skip this step, give 1 hour for this. Really important!)

Trello is a tool which allows teams organize their project collaboratively. We used Asana before, but Trello is better, faster and fits agile manifesto. We create 3 lists (frontend, backend, server) for project management, 3 lists for tracking(doing, done, trash). Thanks to this organization, everyone in the team knows what we do at that time. In this step, we decide our features and requirements. Give at least 2 hours to planning on trello. It is important. If you don’t know what will you do, how will you do? Because of we are a small team and we have little time, we don’t use point system(agile has it). If you want to plan it deeply with points you can use Taiga.Io (the best free tool for it).


Create fast mockups, use this

(use the back-side of paper for pixel calculation)

I love pen and paper. I can’t use mockup tools on iPad or laptop. Pen and Paper are faster and feels that you are an artist. Because of that, I said to you use this. It is free PSD file for mockup printing. If you want to create an app for iPad, you can google it. Mockups can change. Don’t waste too much time to create solid mockups. Get the idea and test it on the users. User tests are much more important. Use the similar apps for mockups too.


Choose a framework for speed

(we chose ionicframework)

You have limited time and resources. You have to find a way to create more time. The best way is frameworks. You don’t need to write basics again and again. For example, use bootstrap on frontend, use node.js and socket.io to create a chat application. It will be at least x2 times faster than writing every single CSS with media tag and writing a socket app for your chat app. We used ionic framework for rapid prototyping, used node.js for packages. If these are too unfamiliar to you, maybe it is the time to learn something new.


Create private Git Repository from Bitbucket

(clone the repo on every single team devices)

GitHub is the most known one, but BitBucket is better when it comes private repo. Git is the best tool for small or middle size teams (I haven’t been in 50+ project. Maybe it is the best for it too.). Thanks to bitbucket, you can manage your project and source codes easily. The best tool to use bitbucket is SourceTree.

Retrieved from http://giphy.com/gifs/animation-illustration-isometric-QLN2bkvBzt0LS

Create the pages according to your mockups, trello

(download your framework files and create pages which you need)

After you create repo and build your framework, look at your mockup and plan on trello and create basics. You have to know how many pages, js file, node package, frameworks will you need. Install them! And push them. If you didn’t give time to plan, you couldn’t know which technologies you will use. Plan is important. If you plan wisely, half of your jobs done.


After this part, i took front-end.


But first let me code HTML!

(once you done with html go to do css)

I like to code basics first. I create divs according to grid style of our framework. I begin from the landing page and do until basics. (the basics doesn't include every single sub-page, it includes landing, login/register and 3 main page.)


Don’t forget to create controllers

(controller files are important to connect with backend)

We use MVC technique. I can’t say one of MV* better than other. I know MVC right now. I am very comfortable with that. I use MVC frameworks. After angular 2.0, maybe I will change my idea but for hackathons you need to use technologies which you have knowledge. You need to create controllers for connecting with backend. Sometimes you have to help backend, sometimes the backend guy will help your controllers. It is a team job, not a 9–5 job.


Work a lot!

(You will not die, if you don’t sleep 42 hours)
Actually, we don’t sleep at least 30 hours. In 55 hours, we sleep only 3 hours.

Retrieved from http://graphicdesignblg.com/

Let’s polish

(polish your app with ionic effects, it will be cool)

Retrieved from http://justcreative.com/wp-content/uploads/2014/10/css-loaders.gif

Effects are important. If there are jury, you need to pull the wool over eyes. The same principle rules the customer too. You need to show cool animations and effects (but not exaggerate), users love fancy things; juries too. Add some fancy loading screen (we did it when no need to show, just give 3000ms after loading) or page transition (they will fell in love ❤️).


Test the basics

(create stories, try to find bugs)

Create user stories, and test them. For example, call a cab from your taxi app, is it work? Fine. Be a driver and accept the requests, cancel the request, first accept but crash somewhere; can’t go. Try every single option. You will realize you didn’t something. Do it!


If it works, you can release!

(not obsessed to create awesome app)

You don’t need to create an awesome, bugless(if it exists) app. If your basic features work, release it! You can get feedbacks from it and improve your app. Airbnb released 3 times before attracting attention.

Release it! Don’t worry.

Icon made by Freepik from www.flaticon.com

Bonus Quote: “You miss 100% of the shots you don’t take.”

Thank you for reading my article about creating an app. If you find interesting please share on twitter or any social media.

Have a nice week.