Building My First Web App From Scratch
I was one of those people too — those who spend time learning multiple languages, frameworks, tools, and yet never really set sail to build a project of their own (any kind of project).
Personally my excuse was that I never had the full know-hows and skills to turn my ideas into reality. I understand OOP, functions and loops and can read the documentations. I have made websites using templates and themes before and have modified their existing code to suit my needs. They’ve all worked out surprisingly well. However, starting a solo project from nothing but a blank screen is a very different experience — one that I did not have until last week. And every single day since the last week has been its own exciting adventure. In this post, I will share how I did it and all the things I learnt along the way.
BNKS Urban Dictionary is my first ever web app which I was able to build from scratch. I did it over my Spring Break where it cost me over 5000 lines of code and a bunch of sleepless nights. The app is like Urban Dictionary but for BNKS (my alma mater) which allows people to define and share words that are specific to the school’s daily life. The idea came while I was working on my CS142’s final project right before the Spring Break. I was bored by how little the return on investment was. I must have written 2000 lines of code for the final project and yet after the finals was over, it was clear that there would be nothing left of it. Localhost is, after all, just local.
I had already decided to stay back at Stanford during the break so I thought maybe I could use some of my code from that project and build an entirely different thing that I can perhaps launch and have it up there on the internet (forever?). At that time it still seemed like an unreachable goal, considering that I tend to relax during breaks. But once I started working on it, I was hooked! I knew I had to complete it somehow. Looking backwards I think it was the idea that kept me going, not the code. If the project is still online, you can notice how simple the app is. However since it was my first time, there were many interesting challenges along the way. It was an adventure to piece things together.
The Beginning
Things started out as abstract representation of ideas. I think I was only able to turn 50% of those original ideas into real code. The others were either too hard to be spending time on (I tried), or just useless (I didn’t try). Here is a picture of my gibberish wire-frame I drew on my study table after the final was over and the Spring Break was 2 days away.
The app is built with MongoDB (persistent storage), Express (Session management), AngularJS (web framework), NodeJS (server). Doing it on my local computer (localhost) required me to install those frameworks and then I was able to test my code changes on the go.
Writing Those First Few Lines
As mentioned, I used some of my final project’s code to start off with. I think after 2–3 hours of work, I had a basic login-register page up. Users could sign up and login using their details which (at that point), I was storing as plain string in MongoDB.
Few days later I also removed first name, last name, description and occupation. No one needs to know your name and occupation when you are trying to contribute anonymously to a dictionary. The last one to go was the avatar feature which I so loved. But I preferred to keep things simple and move quickly than have a feature that people wouldn’t care for much.
The Work, Occasional Bugs, Stress and Fun
For the next 7 days I was in a state where even when I went to bed, the ideas would not go away. I would think of ways to solve the last bug when I was trying to fall asleep. At least on 2 occasions that I can remember, I woke up after having gone to bed because I found out where the bug could have come from. I fixed them and then went to bed again, although it might have already been morning by that time.
If not for the Spring Break, I wouldn’t have been able to afford doing that.
value(Side Projects) > value(PSets)
By this time the logo had changed. Making the logo look like UD was important to me because that’s what I initially had in mind. I discovered the font that UD uses and spent some minutes on Photoshop. The logo was all set. You could by this point add word and view all words on the homepage. All the added words would go through a moderation queue where the administrator account had to manually approve it to be saved in the database from where the app extracted all its data. I was still working on the profile page views.
There are some structures in the app that have been used in multiple places. It made life easier. For instance all the definitions show up in a md-card. I did not use angular’s material design that much. I wrote all the CSS by hand and by trial and error. Even the buttons: behind the hood they are simple HTML texts. Chrome’s inspect tool was very helpful in this regard. After I had the CSS for that 1 md-card down, it was all about using the same class everywhere those definitions had to be shown, with some ng-if conditions depending upon who the user was. For instance, administrator accounts can see more options than moderators, and mods can see more than contributors.
The Search Page
This is one of my favorites! Again it was all about simplicity, but also having the context appear in the results. After the user enters “day”, the server queries Mongo for all the parent word names that contain the sub-string “day” in it. The returned result is a JSON object with multiple words each with their respective multiple definitions. I truncated the sentences to 75 characters so they don’t occupy more space than what explains enough to the user.
If there are no results, an oops div shows up. Perhaps I should make the search feature only available to logged in users. But for now it is open to abuse.
The Profile Page
The profile page views and logic took relatively more work than the other pages. I have 3 different sections and depending upon the user’s authority, they will only be able to see what they are meant to.
All users can see the number of definitions they have defined thus far. Clicking on the number takes them to a page where all their contributions are. They can also see (and remove) all the definitions they have favorited.
Moderators can login and see if there are any proposed definitions that need moderation. They can either approve or deny them. Approving will add the definition to the DB where anyone using the app can see them.
The administrators can make changes to any other user’s authority — except the admin account. The permissions are both UI work and Server side work. If someone - say a user - makes POST request to delete some other user, it will result in a 401 unauthorized error.
Administrators can also delete users and mods, in case someone decides to go rouge — just saying.
PS: In the interest of finishing project in time, the CSS work on the mod and admin controls are lackluster :P
I will spare the other boring details but in total, it was about 9 days of motivated work (and intrinsic fun) to finally be able to launch my first web app online. After it was online, I posted about it on Facebook to spread the word. Here are some screenshots from those days (and nights).
My commit history on GitHub
The initial Facebook post that got the ball rolling, and real-time traffic
The Traffic Was Beyond What I Expected
Considering this was my first web app to get on the internet, I am humbled to learn how even a silly little idea can become really interesting. Looking back I am glad I chose to stay back on campus and focus on building this thing. It has opened my eyes to several things I was previously unaware of (although I did a similar project for class — I didn’t learn these lessons).
Lessons I Learnt From This Crazy Week
- Talking to people is very important. Even before I started working on it, I was already talking about this app with people around me. It was a motivating factor. Later when every time I finished a feature, I would screenshot it and send (spam) it to people I knew. Sometimes they gave me great feedback and I found a better direction.
- Class projects != side projects. Side projects are more fun and open and iterative. If there was an extra 5 pointer section in a class project I would have chosen extra sleep over extra credits. (5 points is not going to bump my letter grade anyway) I found out it doesn’t work that way with side projects. A bug in class project is bothersome; the same bug in personal project is a puzzling challenge. Even if the app was already working, I would debate if there was a better way of doing things.
- Finishing the project > missing out some features. If I were to keep working on all the features I wanted to add, I wouldn’t be able to launch this thing by the weekend. Come Monday and I would have class projects and papers to worry about. I deliberately chose to leave out some features. Now that the app is up, maybe when I have time, I will go back and add them later.
- Documentation and Stack Overflow. These were where I found all my answers. If we are stuck, chances are dozen other people were stuck with the same problem months before we did. The solutions that worked for them was merely a Google search away from me.
- While choosing first project, the idea has to resonate PERSONALLY. This is the most important realization among all. My goal was to build something from scratch — anything that is interesting — interesting enough to keep me hooked so that I would not get bored midway and hopefully lead the project to completion. It also had to be something feasible and not too intimidating. It had to be small and personal. I feel fortunate that such an interesting idea came to me right in time and I am glad that I persisted. There were numerous times when I was stuck for hours. I could have given up and walked away anytime. No one was stopping me. But this idea was so contagious; I just couldn’t see it vanish like the others that came before it. That made all the difference.
The project BNKS Urban Dictionary is up and running at this moment. I know I will get busy once classes start on Monday. But I am glad I crossed the barrier I was once so intimidated by — the mental barrier which told me that although I knew languages, frameworks and tools, I wasn’t yet ready to build and launch something. I was. If you’re in the same situation, know that you are, too!
Here’s the thing that worked for me and will for everyone else. Think of an idea. Then think of possible ways to implement the idea. Focus. Don’t think it is not possible. Because turns out it is.
At this time I’m already thinking about my next one…
Update January 6, 2018
I completed another fun project (fun to me at least) and it is online here: https://bnks-stories.herokuapp.com
