WaterTester was one of my first big web development projects. I built it a few years ago, but I thought it was good to look back at it for fun. The web application helps to crowdsource user feedback for project ideas, which can be useful for hackathons or personal projects. You can try it out here (Heroku will load the application after 30 seconds because I’m not a paying customer). WaterTester has a tutorial included after you log in, so I’ll skip the explanations here.
Anyway, as I was working alone, I had the valuable opportunity to work on the entire stack - frontend, server, database. Unlike most of my recent projects, I didn’t use any frontend framework for this project - I thought it would be good to get more practice with vanilla javascript.
If you looked at the UI as a user, you probably wouldn’t notice that it uses vanilla javascript (the UI looks pretty decent after all). But, if you scrutinize the codebase or the loading behavior, it is easy to see the advantages of using a front-end framework like React.
- Modularity - Frameworks help to separate concerns. For example, React separates the frontend code into components, and these can be reused.
- Readability - Frameworks help to make the code more readable.
- Speed - Frameworks help to optimize rendering speed. For example, React uses conditional rendering so that only the updated part of the page needs to be re-rendered, as opposed to rendering the whole page all the time.
On the backend, I implemented the logic for authentication and storing user information in the database. I used NodeJS and Express for the server, MongoDB for the database management system (DBMS). MongoDB is a noSQL database that is easy to learn. Another big takeaway was learning how REST APIs work.
Overall, it was a nice project for learning web development from end-to-end.
