FCC Challenge — Phone Recommender
FCC stands for FreeCodeCamp
This article was inspired by Chingu Cohorts
Intro
I need a new smartphone, but don’t know which to buy given all the options one has in the phone market.
An iPhone is a great brand, however I can’t afford it and was looking for a cheap but good phone to purchase.
Usually, I’d just ask my friends what they are using and would probably end up buying a phone they already have.
I thought I’d build my own personal phone recommender; one that was a bit smarter than my friends :) just for the fun of it.
The Phone Recommender is an application that recommends phones based on the user’s budget.
This is a personal project and isn’t part of the FCC track, so it was a bit challenging as there was less structure.
I had to come up with the user requirements and decide when the project was satisfactory, this was a bit more difficult than I assumed.
Approach
How does one build a personal app from scratch?
Just build it. The app doesn’t have to be perfectly designed, it just has to work.
In building my app, I sketched what I wanted the app to look like and filled in design loopholes while writing the code.
The algorithm for recommending phones was based on my personal research, surfing online stores and using my intuition.
There were several decisions I had to make, in which I wasn’t sure of the right thing to do, so I went with my gut.
For instance, in designing the code for this project, I considered two options in handling information about the phone (e.g. images and text):
(A) Insert information as text in a JavaScript file.
(B) Store information in a database and retrieve the information when needed to display on the web page.
I know little about the backend, which is what approach (B) required. So I stuck with approach (A).
As usual; Google, StackOverflow and W3schools were very useful in solving the numerous problems I encountered.
Also chatting with friends about the app was a great help.
Requirements/ToDo List
1. User Story: I can select a budget
2. User Story: I can view 3 phone suggestions based on my budget
3. User Story: I can buy the phone
My ToDo List was very haphazard as I had different options in tackling the project. Lacking a strong sense of direction, I kept changing my task list.
The final app was a product of this ToDo list:
* Design HTML Layout
* Algorithm for Phone Recommendation // the main task for the app
* Iterate, Iterate, Iterate…
* Refactor Code // Using principles like: “do not repeat yourself” & “keep it simple stupid”
* Colors & Fonts
* Host Code on Github
* Create a Github page for the site
* Write
Results
The app was built with HTML, CSS & Vanilla JS. I consider the app lightweight and fast.
You can view the source code on Github
The live version of the app is available here
Lessons Learned
This project took about 10 days and a lot of work. It is quite satisfying to see it “shipped”.
In the future, I hope to work a lot faster on projects. The trick is to build a lot of projects so that one gets familiar with the various processes and technologies.
The reason I took on this project was because I wasn’t ready to tackle FCC’s “Simon Game”. I had tried building the “Simon Game” because it was the only thing between me and FCC’s Frontend Certificate. I had no clue how to build it, and ended up copying someone’s work. This was very dissatisfying and I felt bad, not good enough. So I had to reassess why I was learning to code? Was it because of the certificate or because I wanted to build great products.
The answer was simple but hard to accept, I really want to build great products and that is what this journey is about.
It matters a lot to me that I use my initiative while building something and that I truly learn how to build great stuff. The only way I can think of doing that is: “Building what I am capable of and learning along the way”.
Build stuff I care about.
The Phone Recommender app might seem simple, but I learnt a lot and it’s just the beginning of wonderful things to come.
These 3 questions from Ray Dalio’s Principles helped me in making decisions:
What do you want?
What is true?
What are you going to do about it?
I will be building my portfolio website in the next project. I intend to clone a cool website and then build my own website from scratch.
Till then,
Cheers :)
