I recently applied for a job at a company and am still in the process of interviewing with them. I had an initial interview after which I was sent a link to a GitHub repository with a code challenge to complete over the weekend.
Project
The repo contained the following instructions:
“Use Create React App to write a small single-page web application with Redux or the Context API. We know there is not a lot of state in this application, but rigging up a state management library gives us a good sense of your style.
If you are not a fan of React and/or prefer an alternative web framework. No problem! We use React and enjoy it, but you don’t have to be right now. Feel free to use Vue, Angular, etc, or even plain JS as long as you accomplish the requirements below. However, if you do use React, use Create React App with some state management library.”
Requirements
“- Has a single button in the center called ‘Current Weather’
- Upon click, it uses the built-in browser Geolocation API to get the user’s location
- The application then grabs the current weather for that location from OpenWeatherMap and displays it on the page.
- Deploy your project somewhere (Surge.sh_ is a good easy solution)_
We’re primarily looking at your ability to write clean organized code, interact with external APIs, and handle asynchronous JavaScript. So while the project isn’t large, we want you to send us what you think is high-quality code. Your commit history should clearly show your progression through the application.”
It was a fun exercise and a good React/Redux review. As someone who’s been working on their Angular skills for the past month or so, I had to admit I was a little rusty.
I’m here to tell you about my process as well as to share the code. I found out today that the engineering team has seen my submission and would like to go over it tomorrow via Zoom. I am very much looking forward to it! I am writing this article to calm my nerves in the meantime.
As the title suggests, this will be a two-part post. Here is what to expect.
Let’s Get Started!
I like to start with a to-do list. I am old school and like my to-do list written down on a piece of paper because there is nothing more satisfying than crossing an item off that list and getting rewarded with a tiny surge of dopamine. I’ve also recently learned from one of my favorite YouTube channels that simply having a plan of how and when to accomplish a task can help get rid of the anxiety accompanying having unfinished tasks.
I then gathered all my tools. By this, I mean I read enough about the Geolocation API and how to use it to get started. I knew I would not need the weather API until later, but I went ahead and created an account and requested an API key. It only took a few hours to get it activated, but that’s not always been the case with other APIs (it can sometimes take up to a few days) and I wanted to be sure it would be ready for when I wanted it. I skimmed the documentation and felt confident I had all I needed to start the app.
I created a new directory, gave my app a catchy name (how is “Weatherly” not a weather app somewhere out there yet?)_, _typed create-react-app in my terminal, and let it do its magic.
I like to start small and build from there. So the first thing I did was make sure to have a button that works and that I was using the Geolocation API correctly.
Let me tell you, this was the easiest thing I’ve ever done. Their documentation is very straightforward and you are not required to install, require, or import anything additional in your components. The only thing I’d pay extra attention to is making sure all your API calls are made to an HTTPS endpoint rather than the default HTTP. And I mean all your API calls. I had to make sure all my Open Weather Map API calls were made in a secure context and that my deployed app link was secure as well. Just to be safe, make sure all your links are HTTPSs… or else (more on that in part 2).
Before I discuss my button component any further, I’d like to give you a quick look at my file setup. It is a preference and not a requirement, and it was certainly not necessary in an app of this size, but I like to stick to the Separation of Concerns Principle and organize my Redux into separate folders. If you would like a good guide on how to configure a Redux store in your app, I highly recommend the official Redux docs.
#coding-interviews #javascript #react #api #programming
