My first web application: From concept to product

Recently I finished some coding courses at Udacity (Full-Stack Web Developer, React Developer and Mobile Web specialist as part of the Google Scholarship program), quit my job and decided to focus on coding full-time. Having quit my job I felt some pressure to get a job as soon as possible to have some income again, so I started my job search.

But I knew that I didn’t want to go for just any job, I worked as a web designer about 10 years ago, the paycheck was ok, but looking back and I didn’t feel any fulfilling connection with my colleagues or the stuff we were making. There wasn’t much encouragement for self-development and it felt like it was just a stop to make a decent living until I found something better. (After that I ended with a bit of a resentment for office work and worked as a snowboard instructor for 4 years). So being excited about coding again after all those years I definitely didn’t want that to go to waste!

I didn’t want to be this guy again in a few months (gif source)

I managed to get some interviews with companies which I thought would be exciting to work for but unfortunately most had a similar answer: “We like what you’re doing, keep it up! But unfortunately at the moment we need someone with some more real world experience. Get in touch in about 4-6 months and we can see if we have a position for you”

Having had this same reply 5 times it was not very encouraging to continue applying, but I was also was not discouraged enough to start aiming lower. So I decided to take this time as an opportunity to build some applications of ideas that have been on my mind. Who knows, some people might find them useful and I could develop them into products, if not, I’ll still have something to show to land a junior position at a company I’d like to work for.

So excited I started my journey (gif source)

This is the first article in a series in which in which I will write about the process of building my first web application: fear-setting.today (Early work in progress!) . I hope it helps inspire others to get their own projects going. (and it helps me reflect back on the process)

I started with outlining the idea of what the application should do. This was quite clear to me already as I was inspired by the TED Talk of Tim Ferris “Why you should define your fears instead of your goals” and wanted to turn this thought exercise into a application. A essential feature would be that users could save their previous sessions, to be able to reflect on them in the future. It was important for me that this was something that I would like to use myself, so I would stay motivated to make it into a finished project.

Modeling the application

Outline of the process the application should guide. (made using draw.io)

I already had a rough end-goal in mind: I wanted to make the basic functionality for free so anyone could use it but also have paid plan with extended features, so I could hopefully turn it into a sustainable project that I could maintain and improve on in the future.

I put the idea of building this application to the test using the fear-setting thinking frame-work the application is going to offer. My worst fears I had were:

• It’s going to take forever to finish it
• I will get stuck on a technical hurdle

So to prevent these from happening I decided I needed to:

• Focus on making a MVP (Minimum Viable Product) to be able to see the response on it before deciding to invest more time in it.
• Outsource technical parts to third-party services when possible to be able to focus on making a presentable product and not the technical setup around it.

Deciding on the tools

Having decided the above I wanted to look at the tools I could use to so I would not get stuck in trying to reinvent another wheel everyday. I wanted to keep the initial cost to zero but at the same time time have reliable services which I could expand on if the project did take off. These are the tools / services I decided to use:

• Front-end: React+Redux — Easy choice, I had experience with both of them from the Udacity course I completed and I wanted to expand my knowledge on them. This also gives me the option to re-use much of the code when I want to turn this into a mobile application using React-Native.
• Client-storage: redux-persist — Much user input is involved and I hate it when you lose the input data when your browser crashes so I want to use this package to keep the data saved in the clients browser.
• Localisation: react-localize-redux — I wanted to make it easy to translate the application in the near future so I used this package to separate all textual content and have a easy built in feature to switch languages. (I’m half-Dutch half-Japanese so planing translate to both of these languages when I’m done with the core functionality)
• CSS-Framework: Semantic-UI React — Using a css framework was a no-brainer, because of time I can save by having a set of default styles to build upon. Semantic-UI has a React specific library which I had a good experience with when using it for one of my Udacity course assignments.
• Hosting: Netlify — This is a amazing time saver, whenever I push changes to my github repo this service automatically applies it to the live site (this is called Continuous Deployment)
• Back-end: GraphCool — I needed some back-end to store data and send timed email notifications to users. I picked this service to not have to spend any time on setup and maintenance of infrastructure and they us GraphQL and with a serverless architecture, which seem to be the new hot thing so I thought it would be great to get some experiences in both. (I learned some Graphql basics through this free course)
• User Authentication: Auth0 — With the free option I could get 2 OAuth social services connected (like Google/Facebook) and up to 7000 users.
• Payment System: Stripe or Mollie — I’ve put my final decision in this off until implementation, they both seemed to have a good plans.

With this stack the initial cost was only the domain registry of fear-setting.today which I registered at Google Domains for €19.

Designing the application

Having a idea on the basic concept and the tools I was excited to finally start coding! …which was a very bad idea, after 1 day of going back and forth between making stuff and deciding it needed to look/work differently, I knew I had to decide on two things before building:

• Rough design (Which I would stick to until I had the technical essentials ready and think about making it pretty later)
• The requirements of the MVP (So I could stick to working on working down this list and not get lost in details which might change in time)

I made a rough design of the pages using draw.io

I decided to use Trello to keep track of the MVP requirements and which one I would be working on:

This is a screenshot of the Trello at the time of writing

Start Coding!

Finally it was time to start coding! I’ve built the foundation of the front-end using React and Redux in about 10 days (about 4 hours a day) of coding. I won’t go in to the details of the code, but if you’re interested you can view the source code in the github repository. I have published a preview online at fear-setting.today. (It doesn’t look too pretty yet, I wanted to do the styling at the end)

That’s it for this post, I’d love to hear some feedback!