My project this week at Moringa School was to build a Single Page Application using HTML and CSS for the frontend and JavaScript to communicate with a public API of our choice. The learning goals of this assignment were;
- Design and architect features across a frontend
- communicate and collaborate in a technical environment
- Integrate JavaScript and an external API
- build and iterate on a project MVP
The Development Process
Research
Since we had to come up with our own project ideas, I had to brainstorm for an existing problem in the society that could be solved. During this stage I also have to to consider a couple of factors like the kind of API I was going to use for the project.
Eventually I came up with a problem statement and settled on a Crypto-News website.
I decided I was going to use the Crypto-news API for my project, only to find out I needed to give my credit card information for me to use the API, so a few days to my presentation I had to change that to The Rapid API for the news data and CoinRanking API for the real-time Crypto prices of the top coins.
UI Design and Building
I outlined the features of my MVP , so I could design around it and the user Journey. The MVP included;
- A landing page
- Display of the top currencies section
- Display of the top and general stories
- A feature for the users to star their favorite coin
- A contact section
Now normally, I would do a hi-fi design before I start the actual coding, but this time, the low fidelity design was enough to get me started.
I wanted to get the logic right first, then focus on the UI details. Honestly, looking back, I don't think that's the best approach. At least for me its not. I drew some of my UI inspirations from Cointelegraph seeing as it is a crypto-news website, and Dribble - a very useful site to share and also get design inspiration.
So I start coding and interacting with the APIs, and I can confidently say it was not a walk in the park. Although some of the blockers could have been avoided if i did some more research on the APIs, this was definitely a challenging yet interesting task.
I learnt so much from this assignment, I feel like I grew ad a developer and generally as person.
The most important all-round lessons I learnt were;
- Do a lot of research on a product you intend to use.
- Be patient with yourself especially when learning.
Testing and Deployment
This stage was not very difficult, as I was using GitHub's gh-pages to host my site.
Conclusion
I really enjoyed working on this project, and I learnt a lot of things I wouldn't have by just reading.
Practice is always the best way to understand a new concept and what better way to grow as a developer than take up new project often.
You can interact more with this project on GitHub
Top comments (0)