A Beginner's Plan in Developing the First Web Application

tangweejieleslie profile image Leslie Tang ・5 min read

Having made the decision to launch my first web app this summer vacation in my previous post, what follows naturally is a bunch of questions.

Questions such as:

  1. What am I going to make?
  2. How am I going to approach this?

For the first question, an obvious solution is to start brainstorming.


Photo by Patrick Perkins on Unsplash

1. Personal Website

It makes sense to start a website that serves as a base of all my online presence. Housing the content I will be creating and projects that I will start. I would also think that a personal website would be an easy first project.

2. Code + Notes-taking App

Throughout the semester, one of the inconveniences that I've encountered is the organization of my code and notes. While I can get by with storing the code in the same folder as my notes, revision of material is often a cumbersome process. That's where I had an idea of building something that organizes code in a manner similar to Evernote. Even better if I can compile and run them in the notes.

3. Game Utility App

I spend a large chunk of my downtime on games throughout the semester. Summoners War is one of the mobile games that I've recently gotten really interested in. The core mechanics of the game is the optimization of your available Rune Sets and Monsters Team. While doing it on paper or a spreadsheet is manageable for a few combinations, things quickly get out of hand when you start breaking into hundreds of combinations to consider.

After having some choices, the next step is to make a decision.

Evaluation of Choices

Photo by Oliver Roos on Unsplash

1. Personal Website

While this seems like an easy first project that would be useful, I feel like I could achieve the same result by simply setting up a Wordpress website. If I were to build a personal website, I got a feeling that I would be reinventing wheels even if it would be a good learning experience.

2. Code + Notes-taking App

This feels like a nice idea that would solve one of my inconvenience for the next semester, but it's not really an exciting project to work on. While procrastinating on this post, I've come across some articles that either embed or link to CodePen. Which would be an easy solution to my inconvenience.

3. Game Utility App

This idea would probably be the most interesting out of all three to work on. For one, it is something that I am highly interested in. However, quick research shows that there is already an application out there that does something similar. If I were to start on this idea, the main motivation would be to bypass the paywall behind the existing application. Rather than to solve my inconvenience.

Out of the three ideas, idea number 3 would be most exciting for me to work on with the downside being that the functionality is already available.

While I can choose to spend another day or two to think of more ideas, I feel that if I were to do that, I would only be setting myself up for more opportunities to procrastinate. Mainly because it is unlikely for me to come up with an idea that doesn't already exist out there.

In short, I've decided to work on the Game Utility App because:

  1. It is most interesting to me
  2. I am building something so that I do not have to pay for it
  3. I know there are people who would use this application

After deciding what to make, what comes next is how am I going to approach this. I've started by listing the functionalities followed by a timeline with the expected deliverables. At this point, the timeline and deliverables are there to serve as a rough guide.

Key Functionalities

1. Getting data from the game

This step is crucial because the application would not be usable if the user has to manually input hundreds and even thousands of data points manually, updating them every so often.

At this stage, I estimate the difficulty of implementing this function to be 21. Mainly because I have absolutely no idea how to even start implementing this.

2. Passing of data into the application

This part is about storing the game data in suitable structures for processing. I would imagine this to be some backend component.

I would probably need some sort of parser for the game data and a function that sets the parsed data into a database.

I estimate the difficulty of this to be 8. I have some ideas on how to implement this but no experience in dealing with backend technologies. I would need to do some research with regards to that.

3. Optimization of data for decision making

This part is the key feature of the application. I would probably need some backend function that does optimization of the data.

Thereafter, I would need a frontend page that would make it easy for the user to make use of those data. I am imagining filters and options that allow users to manipulate the data as desired. Perhaps there would be a need for some query system.

I estimate the difficulty of this to be 13. I have some ideas on how to implement this, but the frontend portion might quickly get sticky. I foresee myself getting too bogged down on the frontend side because of the lack of clarity. For now, I should just set a simple frontend system. Or maybe even limit what the user can do to make it simpler to develop.

Deliverables and Timeline

I have about 8 weeks to launch this idea. That's about 2 weeks less than the time we have in each semester to work on a project. On top of that, I am working alone this time. The upside though, is that I have nothing else to worry about.

Function 1: Getting data from the game, est. difficulty [21]
Function 2: Passing of data into the application, est. difficulty [8]
Function 3: Optimization of data for decision making, est. difficulty [13]

Splitting those 8 weeks evenly based on the estimated difficulty, I would have 4 weeks for function 1, 1.5 weeks for function 2 and 2.5 weeks for function 3.

I would imagine that working on function 1 immediately would be overwhelming and likely kill all momentum, as such I would schedule the iteration to be as follows:

Iteration 1: Passing of data into the application: 19 May - 29 May 19. (10 days)
Iteration 2: Optimization of data for decision making: 30 May - 16 Jun 19. (18 days)
Iteration 3: Getting data from the game: Jun - 21 Jul 19 + 2 Aug - 8 Aug 19. (28 days)
Iteration 4: Finalization and launch: 9 Aug - 11 Aug 19 (2 days)

Iteration 3 have some disruptions in the timeline due to other plans that I have.

At the end of each iteration, I would be planning to do a trial launch to ensure that the final launch in iteration 4 would go smoothly.

Organizing the iterations and the functionalities, I would imagine the structure of the project to follow the diagram below.

Phew, this post took a while to write but the benefit of writing it is that it doubles as an initial plan of action.


Posted on May 19 '19 by:

tangweejieleslie profile

Leslie Tang


I'm a Computer Science Undergrad, expected to graduate Dec 2020. I'm learning about JavaScript,Vue.js and Human Computer Interaction (HCI) in hopes of positioning myself for a Frontend/UX role.


markdown guide

Hi, I think I have a solution to problem one. Have you considered taking the data from an online wiki instead of the game itself? I googled it and Summoners War does have a wikia/fandom wiki. Also, Wikia has an api that even has an inbuilt function for harvesting specific data. Hope this helps!


That's a really good solution! I didn't initially think about looking for existing resources built by others. Thanks for your suggestion!


Good to see a fellow Singaporean sharing his thoughts here. Looking forward to your progress! All the best Lester!


Hi Edmund, thanks for the encouraging comment! I think autocorrect might have kicked in when you typed my name, I'm actually Leslie, not Lester 😅


Oops My mistake! All the best Leslie!!