How I Built My First Web App With Only HTML, CSS and JavaScript
Project Context
Eatthefrog is a task planning web app. It was my graduation project in the Web Developer Bootcamp that I got accepted in June 2020.
I released the MVP version, which has four main functions Create Task, Edit Task, Delete Task, Filter (by Status, Due Date); and it has not been responsive to Mobile yet.
Play with my app here: https://eatthefrog.netlify.app
You can check my codebase here: https://github.com/TotoroSyd/Eatthefrog
The Process
Coding from scratch and technology choices
I believe a resourceful programmer should be able to solve problems with or without powerful tools because they understood the nature of the problem.
I used Bootstrap to build the Create/Edit and Delete confirmation modals, toggle cards; other than that, Eatthefrog was completed mainly by HTML, CSS (Flexbox for web layout) and JavaScript.
Even though updating filter sidebar badges and summary cards were good cases for React as they needed to refresh frequently whenever a task was manipulated (create/edit/delete/filter), I got used to with JavaScript classes.
To work with Date and Time, I used date-fns library because it was way too time-consuming if I tried to use pure JavaScript.
Regarding storage and data-structure, they were not my main focus for this MVP version, so I stored each task in an object format in localStorage.
{ 1599970396164: “{“id”:”1599970396164",”name”:”Create your task”,”description”:”Hello”,”assignee”:”Phoebe”,”dateNum”:1600128000000,”date”:”15–09–2020",”status”:”To Do”}”, id_arr: “[“1599970396164”]”}
During the refactoring, I realized a single script.js is a nightmare for me to manage and run unit tests because my codebase was large. I decided to break my code into multiple individual functions, grouped them into classes and separated .js files. Then, the challenge was “How to bundle them back to serve in the browser?”. After researching different options, I chose Parceljs as it is “straightforward, zero configuration web application bundler”.
Lastly, the challenging but satisfying part was to run unit tests with Jest. I wrote unit tests to test storage behaviours and DOM changes.
UX/UI
At first, I got a “developer/designer block”, so I didn’t know where to start drafting my wireframe while I knew that my main focus was to keep the UX/UI clean and engaging. I sought inspiration from Todoist, Trello, Asana and Google Calendar.
So, I drafted my first wireframe and found my palette from ColorHunt. The process of “seeking inspiration — adjusting design” was repeated until I liked my MVP version (explain why the original wireframe is different from my actual product :)
With only four main functions, I can follow the one-page design trend, but it wasn’t engaging enough. However, I also had to consider the time constraint and my coding experience, so I can’t make my design too complicated to deliver. I opted for a two-views design which satisfies these criteria:
1. Deliver four essential functions, and they run on one view.
2. Thus, users don’t have to switch context whenever they make a change in their task list.
3. The other view (Welcome view) makes the page engaging and interactive.
4. Each view is a value-added to a user’s needs.
Takeaways
I learnt so much from finishing this project. It is not only technical knowledge, but it is also about defining my learning/problem-solving approach. Here are the top 3 suggestions from a beginner (me) to another beginner.
Don’t take frameworks/ modules as your first resources. Try to solve the same problem without them.
When I started exploring Web Development, I got overwhelmed with the available resources. When I got stuck, I opted for Stackoverflow and documentations, and I got even more overwhelmed because people suggested many solutions which I didn’t know how to choose.
I was drowning in the pool of answers and the fear of being behind others. That was when I reflected myself and figured out the root cause of my issue. I was scared because, at the back of my mind, I didnt understand the problem I was solving. Thus, I can’t tell what made each solution different in the context of my problem.
I decided to solve problems without help from frameworks/ modules first. Thus, I can understand the nature of the problem, what challenges I would face without external help. And, that is when a framework/library/module comes in.
For instance, I was advised to use React for my graduation project because it would help me with the components’ changes. But I chose to use JavaScript only, which took me longer, but I finally knew where React could help.
Always leave comments.
I didn’t have many experiences working in a team so when it came to teamwork, I got a bit lost and frustrated. The style, the variables were different. Everything was different. Our team was slowing down even we had a good starting point.
Luckily, I developed a personal coding habit that I write comments to almost every line of code. It helped my teammate understand my code so he can refactor his code to merge with mine easily.
Also, thanks to this habit, I was able to take over the project and deliver it on my own when my teammate dropped out of the project due to unavoidable circumstances two weeks before the submission date.
I left comments as breadcrumbs; I can distinguish my code and my teammate’s code. It took a quite for me to go through the code base and refactor, but it went smoothly.
Build a habit of saving your code via Version Control.
I use Git as my Version Control.
As a beginner, you might not develop (yet) your muscle memory to commit changes constantly. Also, you might not spend enough time to understand and get used to with Git commands. You have to fix these two things fast!
Why?
Not committing changes systematically and constantly (means: you made multiple changes and make one big commit) will drive you crazy when your work got conflicted with your teammates and you have to manually merge branches. Commit log can’t show clearly what you changed.
Find a technical tutor/ mentor
As much as I pride myself as a fast, persistent and resourceful learner, I have to admit that I couldn’t finish my project without the support from my Pod instructor and my partner. They were my lifesavers.
I was proactive to think on my own and got friendly with Google, MDN, CSS-tricks, but having a technical mentor saved me so much time. They guided me with my problem, gave me hints on how to think and choose a solution. They also helped me fix my bad habit and challenged my answers so I can improve my code better.
Having so much fun exploring Web Development! I felt so much confident that I completed this app covering from back-end to front-end.
My next side-project is to experience with Chatbot, AI and API, preferably working with Slack.
Thanks for reading!
Phoebe
