Live Demo of Planning a Real World Web Application from Scratch

Nick Janetakis - May 20 '19 - - Dev Community

*This article was originally posted on May 7th, 2019 at: https://nickjanetakis.com/blog/live-demo-of-planning-a-real-world-web-application-from-scratch


Something that I've wanted to do for a while now is build my own custom course hosting platform. Right now I'm using a white label (no branding) third party platform, but that's going to change once my MVP is ready.

On a whim, I thought it might be beneficial to record the process of how I go from a vague idea of "build a course hosting platform" to having a plan that I can execute to start coding the project without feeling overwhelmed.

This video is about 90 minutes and it covers exactly what I do before writing the first line of code in just about every project I develop. It covers breaking down the project into components, uncovering features by exploring how users will use the application, how you can approach building your MVP when you're ready and more.

This video is pretty much uncut and it's the "real" process, so you won't just see a tidy finished plan at the end. You'll get to hear my thought process for everything along way and even get to see me struggle on certain decisions in real time.

After watching the video you'll be able to apply these same tactics to your own projects.

Live Demo Video

Timestamped Table of Contents

  • 0:27 -- Importance of being able to start and finish a project
  • 0:53 -- Getting stuck in a research loop due to vague ideas
  • 1:36 -- Explaining my entire thought process to build a course hosting platform
  • 1:54 -- Figuring out the motive for developing your application
  • 2:52 -- What type of project are you building?
  • 3:06 -- An example of scratching your own itch to build an app for yourself
  • 3:52 -- Other types of motives
  • 4:54 -- The reason I'm creating a course hosting platform (finding my motive)
  • 11:35 -- Knowing your limits and not letting work consume you as an entrepreneur
  • 12:22 -- Finding a temporary solution by maybe using third party solutions
  • 14:41 -- Identifying when the timing is right to make your project
  • 17:27 -- Will your project be open or closed source?
  • 18:05 -- If it's open source, you should look at which license to use
  • 19:33 -- Fleshing out the features of your application
  • 19:46 -- Typing out the user workflow in a markdown document
  • 20:58 -- Seeing the existing course page on the third party course platform
  • 23:44 -- Writing out the user workflow
  • 25:29 -- Discovering UI possibilities by explaining the workflow
  • 29:21 -- Balancing conversion rates and potential fraud by limiting form fields
  • 31:17 -- On-boarding users but only asking for the absolute essentials
  • 36:42 -- Identifying what your users want to do after they sign up
  • 38:02 -- Taking inspiration from similar apps that you enjoy using
  • 41:05 -- Thinking of ways you can delegate out some of the work
  • 43:18 -- If you ask for information, make it obvious why you're asking for it
  • 45:10 -- Fleshing out the main features or components of the application
  • 51:12 -- Thinking about the future but not coding your app for it initially
  • 53:47 -- Further breaking down some of the main features
  • 1:00:33 -- How will you inform your users of changes or product updates?
  • 1:03:20 -- Being aware of third party services you may need to pay for
  • 1:04:17 -- Doing the bare minimum for your private admin back-end
  • 1:06:26 -- Sticking to your guns on MVP admin features, even if they sound cool
  • 1:07:22 -- Using plain text to help you plan your app out with the least resistance
  • 1:08:04 -- Another strategy for helping figure out and flesh out features
  • 1:11:08 -- Being honest with yourself on developing features based on user demand
  • 1:14:18 -- Recapping licensing and motives
  • 1:15:30 -- Go for the easy wins when it comes times to start coding
  • 1:16:09 -- Get your development environment all set up
  • 1:16:44 -- Start thinking about your tech stack for the project
  • 1:17:25 -- Maybe learn and use a new technology if it makes you happy
  • 1:20:35 -- But you should stick with technologies that make sense for your app
  • 1:21:27 -- Your plan won't be perfect, let it simmer and refine it as needed
  • 1:21:57 -- Ways to start developing your app once you're ready to write code

Reference Links

What are some of your strategies for starting a new project? Let me know below.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .