What I learned in 7 years while developing a Web App

The story

I had an idea for some time to build a software product by myself to earn extra income besides freelancing, build something great that I would use myself, and learn a modern Web App framework. I was taking notes on paper and used a calendar regularly. In 2016 I saw news that the Angular 2 framework was released as a newer version of Angular 1. I immediately liked that the JavaScript, HTML, and CSS code were separated into different files and had a lot of features. It seemed like a great idea to build a task management Web App with Angular 2. I would learn a new technology and I would have my own Web App. So in quarter 4 of 2016, I started taking notes for the application and began learning the framework

1. The downsides of choosing a new technology like Angular in late 2016, a few weeks after it was launched, were that the documentation was in an early stage, very few people knew the good practices and there was low activity on StackOverflow. Same things with the AngularFire package

2. The tech stack that I choose was: Angular as the FrontEnd famework, Bootstrap for the User Interface, Font Awesome for the icons and Firebase for the Database, Authentication, Hosting and File Storage. For the connection between Angular and Firebase I used AngularFire

3. First I've drawn the main UI, and the tasks of the app on paper and described the features. I also printed the Angular documentation to study it from paper because I liked it better this way. The initial name for the app was "Time Manager". I decided to write clean code as possible in order to make it easier for me when I come back to work on it

4. Because there was no Angular package for Bootstrap at that time, I had to add the original Bootstrap code. And for those who know how Angular works, it's not like a regular HTML page. Implementing external packages that work with the Document Object Model(DOM) is a challenge due to the way of Angular's auto refresh on data change

5. After the Bootstrap 4 integration with it's dependencies it was time to connect with the Firebase Database. I decided how to arrange the data for the Database and managed to store data based on input from the UI and then read it on the FrontEnd. Some time has passed and I noticed that a course on Udemy has appeared for Angular and Firebase and I noticed that I stored data in the wrong way. I was adding a manual value for each table instead of pushing it to Firebase and letting it create the table id

6. Some time has passed and I went back to work on it. At this time I think Angular 6 was the latest version and I had trouble updating through npm to it so I started it from scratch but I was able to reuse most of the code. I don't think that "ng update" was available at that point. The login was implemented around that point and I chose to deploy on Firebase. It's highly important to have well-organised code so you can make changes easier when an update requires you to

7. I updated RxJS from v5 to v6 and some changes in the code were required. It was helpful that there was a lot of information on how to proceed. I also started watching multiple courses about Angular on Pluralsight and Udemy

8. I wanted to see how people interact with the app and I deployed the most basic version. I got a domain and started paid marketing. I offered free membership forever for early users and got lots of registrations.

9. After about 1 month I added payment for the newest users but with a free 3 days trial. I used PayPal as the payment service and Firebase Cloud Functions for the BackEnd. Firebase Cloud Functions are a great feature and you can do a lot with them and they are available in JavaScript. PayPal's API and UI are also nice to work with and that's why I chose it

10. Time to add new features! Notes, entire table edit, mark text, re-arrange row order, blur rows, and image upload were recently added. It was relatively simple to add them because at this point interacting with the Database was simple because it is NoSQL and I've gotten better with Angular. Studying and practicing have paid off

11. I also recently updated the UI on the login and made some changes on the app homepage

12. Points to take away:

13. Choose technologies with bright futures and vibrant community

14. Learn from the best in the industry and practice

15. Architect good enough code which will be easy to work with in the future