<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Farhana</title>
    <description>The latest articles on DEV Community by Farhana (@farhanaxmustafa).</description>
    <link>https://dev.to/farhanaxmustafa</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F146887%2Fff1ea7da-cf6f-49fe-bde8-0278b8cea7c8.jpg</url>
      <title>DEV Community: Farhana</title>
      <link>https://dev.to/farhanaxmustafa</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/farhanaxmustafa"/>
    <language>en</language>
    <item>
      <title>A Mental Health Journey as a Software Engineer</title>
      <dc:creator>Farhana</dc:creator>
      <pubDate>Mon, 17 Jan 2022 05:13:03 +0000</pubDate>
      <link>https://dev.to/farhanaxmustafa/a-mental-health-journey-as-a-software-engineer-g48</link>
      <guid>https://dev.to/farhanaxmustafa/a-mental-health-journey-as-a-software-engineer-g48</guid>
      <description>&lt;p&gt;This year, I turn 26. Believe it or not, this is actually a milestone year. At age 26, &lt;a href="https://www.hhs.gov/healthcare/about-the-aca/young-adult-coverage/index.html"&gt;a child is no longer eligible to be on their parents’ insurance&lt;/a&gt;. I'm privileged enough to have insurance options provided by my employer but this is not the case for everyone. In the U.S., medical costs can be a huge burden to people who don't get insurance benefits from their employer or are unemployed.&lt;/p&gt;

&lt;p&gt;I’m writing for the people who want to take their health seriously including physical: dental, vision, dermatology for example, and especially mental health.&lt;/p&gt;

&lt;p&gt;Software engineering requires a lot of mental heavy lifting. Work is constantly with me because my thoughts and logical reasonings live inside of my head. &lt;/p&gt;

&lt;p&gt;To become a better engineer, a better me and to live a better life, I needed to heal mentally. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--aloGJMfr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://res.cloudinary.com/farheezyx3/image/upload/v1636511659/Blog%2520Pictures/mental-health-post/Jira-joke.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--aloGJMfr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://res.cloudinary.com/farheezyx3/image/upload/v1636511659/Blog%2520Pictures/mental-health-post/Jira-joke.png" alt="Screenshot of a tweet that says everyone talks about how instagram is bad for mental health but what about jira by user ikasliwal" width="814" height="382"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Different methods I've tried to improve my mental health
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Therapy
&lt;/h3&gt;

&lt;p&gt;I always said to myself that it's time to get therapy. Enough is enough, stop putting it off for later.&lt;br&gt;
Through my insurance’s website, I looked up the in-network therapists. After reading some descriptions, I contacted one to express my interest.&lt;br&gt;
I scheduled a call and they informed me the first step is the &lt;a href="https://thecounselinghub.com/news/clearing-up-the-process-the-intake-session"&gt;intake session&lt;/a&gt; where the therapist can get to know me and my needs and see what is best fit. It started off with the necessities like my basic information and contacts. Then the doctor asked me what was my reason for seeking out therapy.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Me&lt;/strong&gt;: I’ve been having a lot of stress from work and I’ve had anxiety since I was maybe 13. I feel like they’re playing hand in hand now so I wanted to finally address it&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Her&lt;/strong&gt;: What event happened at age 13?&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Me&lt;/strong&gt;: ummm my parents got divorced&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Her&lt;/strong&gt;: Yeah. That most likely started the anxiety. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Me&lt;/strong&gt;: oh. ok&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Me inside my head&lt;/strong&gt;: asdfghjkl WHAT!&lt;/p&gt;

&lt;p&gt;From this seemingly nonchalant call, I already got a revelation. It’s been over 10 years. Surely I had gotten over the divorce, right? Right??? At this point, I knew I made the right call to seek out counseling services. &lt;/p&gt;
&lt;h4&gt;
  
  
  Outcomes
&lt;/h4&gt;

&lt;p&gt;At the end of every call with my counselor, without fail, I feel lighter. I feel energized and it feels like a load has been taken off my shoulders. I get to talk about my worries and what's been stressing me out. It feels nice to let things go without being judged. &lt;/p&gt;
&lt;h3&gt;
  
  
  Meditation
&lt;/h3&gt;

&lt;p&gt;There are a ton of benefits that meditation has to offer. It &lt;a href="https://www.healthline.com/nutrition/12-benefits-of-meditation"&gt;reduces stress, increases your attention span and helps with cultivating positive feelings towards yourself.&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;To help me meditate, I use the &lt;a href="https://www.calm.com/"&gt;Calm app&lt;/a&gt;. There's a lot of content to help me sleep and settle down any rising anxiety. &lt;/p&gt;

&lt;p&gt;When I feel particularly stressed or when my heart beats a little too fast, I do a breathing technique:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;1. Take a deep inhale for a 4 second count
2. Hold the breath for 4 seconds
3. Exhale 
4. Repeat as necessary
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  Outcomes
&lt;/h4&gt;

&lt;p&gt;My tense shoulders start to relax and my heart slows down to a steady beat after several breathes. My head clears up and I'm able to tackle the day with a better mindset. &lt;/p&gt;

&lt;h3&gt;
  
  
  Physical Health
&lt;/h3&gt;

&lt;p&gt;Taking care of your physical health compounds onto mental health. &lt;a href="https://www.betterhealth.vic.gov.au/health/healthyliving/exercise-and-mental-health"&gt;Increased energy levels&lt;/a&gt; lets you do the things you enjoy for longer and exercising is even better when you can do it with others.  &lt;/p&gt;

&lt;p&gt;I've been trying new activities that I haven't done before like snowboarding and rock scrambling. I aim to walk at least 10,000 steps daily and I try to squeeze in some vegetables into my meals.&lt;/p&gt;

&lt;h4&gt;
  
  
  Outcomes
&lt;/h4&gt;

&lt;p&gt;I remember playing volleyball with my friends. I realized in the middle of it that I wasn't out of breath. The realization was euphoric. I was able to enjoy playing without having to pause and I had a blast.&lt;/p&gt;

&lt;h2&gt;
  
  
  Final notes
&lt;/h2&gt;

&lt;p&gt;By no means does this blog post mean that I figured out the secret formula to mental health nor does it mean my mental health is now perfect. &lt;/p&gt;

&lt;p&gt;My mental health journey is far from complete. There's still a lot of things I need to work on and I admit I have some self sabotaging habits that impact myself and my relationships with others. However, practicing these small, positive actions into my daily routine has been very beneficial.&lt;/p&gt;

&lt;p&gt;But of course, sometimes all you need is to lay in bed all day and watch Netflix. And that's okay.&lt;/p&gt;

&lt;p&gt;Now more than ever, we need to standardize taking care of ourselves mentally. The pandemic is not in your control but how you treat yourself is.&lt;/p&gt;

&lt;h2&gt;
  
  
  Resources
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://www.healthline.com/health/mental-health-resources"&gt;Mental Health Resources by Healthline&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://pragprog.com/titles/jkthp/the-healthy-programmer/"&gt;The Healthy Programmer by Joe Kutner&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.raywenderlich.com/862-top-8-programmer-hobbies"&gt;Top 8 Programmer Hobbies&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://medium.com/in-fitness-and-in-health/if-you-work-a-desk-job-you-must-try-this-mobility-routine-4aad34462f57"&gt;Medium: If You Work a Desk Job, You Must Try This Mobility Routine!&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>mental</category>
      <category>health</category>
      <category>software</category>
      <category>engineer</category>
    </item>
    <item>
      <title>Mistakes I've seen as a Technical Interviewer</title>
      <dc:creator>Farhana</dc:creator>
      <pubDate>Fri, 17 Dec 2021 15:48:50 +0000</pubDate>
      <link>https://dev.to/farhanaxmustafa/mistakes-ive-seen-as-a-technical-interviewer-1gdm</link>
      <guid>https://dev.to/farhanaxmustafa/mistakes-ive-seen-as-a-technical-interviewer-1gdm</guid>
      <description>&lt;p&gt;I've interviewed new grads looking for their first software engineering role. It seems like yesterday that I was also on the job hunt, so being on the other side of the table was a surreal experience. It's given me a new perspective on what companies are looking for. During these interviews, I've noticed some patterns that candidates fall into. In this post, I'll be discussing some that could make or break the interviewer's final decision.&lt;/p&gt;

&lt;p&gt;Here are the mistakes I've seen new grads make during their technical interviews.&lt;/p&gt;

&lt;h2&gt;
  
  
  Mistake: Diving straight into coding
&lt;/h2&gt;

&lt;p&gt;Interviewers expect the candidate to have questions after reading the prompt. A common mistake is immediately jumping to code a solution. Not only will this lead to confusion later, but mistakes are more likely to happen and that will cost time. This also signals that the candidate has poor communication skills.&lt;/p&gt;

&lt;h3&gt;
  
  
  What to do instead:
&lt;/h3&gt;

&lt;p&gt;Spend a few minutes to ask clarifying questions. This may seem like a waste of the small amount of time you have to get a working solution. However, that's not the case. Asking questions can reduce potential mistakes. This can also impress your interviewers. This shows how you collaborate with others and you're able to understand business requirements. &lt;/p&gt;

&lt;h2&gt;
  
  
  Mistake: Staying silent
&lt;/h2&gt;

&lt;p&gt;It's awkward for the interviewer if you sit there in silence. If you don't communicate what is going through your head, then you can't prove that you deserve the software engineering role. It's better to say every thought out loud because that's the only way the interviewer can know your thought process.&lt;/p&gt;

&lt;h3&gt;
  
  
  What to do instead:
&lt;/h3&gt;

&lt;p&gt;To confirm that you understand the problem, repeat it in your own words. You can list out some examples of expected inputs and outputs, but if you can't think of any then that's okay. You can ask for examples from the interviewer! Ask all your clarifying questions. Be sure to confirm any assumptions you have. You can do this by double checking with the interviewer if it's safe to assume things or not. It may feel weird at first to talk out loud while coding but it'll feel natural after some practice. &lt;br&gt;
I recommend learning and using the &lt;a href="https://guides.codepath.com/compsci/UMPIRE-Interview-Strategy"&gt;UMPIRE method by CodePath&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Mistake: Not knowing the programming language well
&lt;/h2&gt;

&lt;p&gt;Usually, a candidate can pick what programming language they want to code in. I've seen candidates use a language and not understand why  compiler errors would appear. This causes frustration and confusion for the candidate, which can hurt their performance. I've also seen a candidate blame the compiler instead of debugging what went wrong. This shows the interviewer that you're not able to debug an issue or handle problems well.&lt;/p&gt;

&lt;h3&gt;
  
  
  What to do instead:
&lt;/h3&gt;

&lt;p&gt;Study up on your language and practice problem solving without autocomplete enabled in your IDE. Make sure you know how to explain why you chose this specific data structure versus others in order to solve the challenge.&lt;br&gt;
For more information on picking a language, read this amazing post in the &lt;a href="https://techinterviewhandbook.org/picking-a-language/"&gt;Tech Interview Handbook&lt;/a&gt; on the pros and cons of using Python vs Java during an interview.&lt;/p&gt;

&lt;h2&gt;
  
  
  Mistake: Not having questions at the end
&lt;/h2&gt;

&lt;p&gt;Not asking your interviewer(s) questions is a missed opportunity. You're depriving yourself of interviewing the company and seeing if this role is a right fit for you. Also some people may view this as a lack of interest in the position. &lt;/p&gt;

&lt;h3&gt;
  
  
  What to do instead:
&lt;/h3&gt;

&lt;p&gt;Prepare a list of back up questions if you have nothing to ask. This is something you may benefit from without you realizing it. You get to pick the brains of engineers who are in the place that you want to be. And your interviewers are more than happy to share their experiences with you.&lt;br&gt;
Here are some &lt;a href="https://techinterviewhandbook.org/questions-to-ask/"&gt;great examples on what questions you can ask for greatest impact&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Wrap up
&lt;/h2&gt;

&lt;p&gt;I must admit that I once made these mistakes when I was looking to start my career. It's taken me a lot of practice, and a lot of rejections, to improve my technical interviewing skills.&lt;/p&gt;

&lt;p&gt;I can confirm it's true when they say your interviewer(s) want you to succeed. We'll give hints and we'll debug the compiler error with you. I get excited when a candidate is on the right track and I'm happy to give a hint or two if I need to. Technical interviewing is a nerve wracking experience but it gets better with practice. There's no growth in comfort so let's use our mistakes to make ourselves better.&lt;/p&gt;

&lt;p&gt;Let me know in the comments if you've seen any other mistakes I haven't touched on!&lt;/p&gt;

</description>
    </item>
    <item>
      <title>What I learned from failing my technical interviews</title>
      <dc:creator>Farhana</dc:creator>
      <pubDate>Thu, 17 Dec 2020 22:53:02 +0000</pubDate>
      <link>https://dev.to/farhanaxmustafa/what-i-learned-from-failing-my-technical-interviews-276a</link>
      <guid>https://dev.to/farhanaxmustafa/what-i-learned-from-failing-my-technical-interviews-276a</guid>
      <description>&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fr7zjod4bb04m0691kbbj.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fr7zjod4bb04m0691kbbj.png" alt="undraw_interview_rmcf"&gt;&lt;/a&gt; &lt;/p&gt;

&lt;p&gt;Technical interviews are a nerve wracking experience that can demoralize a developer. In the past, these consisted of weird brain churning questions where you had to &lt;a href="https://www.businessinsider.com/answers-to-15-google-interview-questions-that-will-make-you-feel-stupid-2009-11" rel="noopener noreferrer"&gt;calculate how many golf balls can fit in a school bus&lt;/a&gt;. Thankfully, we don't have to answer these anymore. But to this day, the interview process has candidates solve unrealistic problems, with at least one other pair of eyes judging your every move, in at least 15 minutes.&lt;/p&gt;

&lt;p&gt;A little about me, I graduated with a bachelor's degree in computer science. It was the hardest experience ever and I even grew some gray hairs. However, I was fortunate enough to have found an amazing group of friends where we regularly studied together in the computer lab until dawn, with our minds blank, our eyes dry and our bellies full of fast food.&lt;/p&gt;

&lt;h2&gt;
  
  
  Some of the companies I interviewed with that made a long, lasting impact on me
&lt;/h2&gt;

&lt;h3&gt;
  
  
  IBM
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Year: 2017&lt;/li&gt;
&lt;li&gt;Position: Front-end Developer&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;My first blunder. I haven't done a coding assessment before. I attempted my first one through an online platform that recorded you through your webcam. I received two questions, one was similar to FizzBuzz. FIZZBUZZ! I didn't know how to solve it. I swear. I was a mess on that keyboard. I had no idea how to solve that question fully. I gave up, submitted whatever I had and went to my next class.&lt;/p&gt;

&lt;p&gt;What I learned:&lt;br&gt;
Although I was humiliated to fail &lt;a href="https://leetcode.com/problems/fizz-buzz/" rel="noopener noreferrer"&gt;FizzBuzz&lt;/a&gt;, I realized this was only my first coding assessment and definitely not my last. I was going to take Leetcode more seriously and keep applying to more companies in order to gain more exposure to the interview process.&lt;/p&gt;

&lt;h3&gt;
  
  
  ESPN
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Year: 2017 &lt;/li&gt;
&lt;li&gt;Position: Front-end Engineer&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I was asked some front end questions like: Explain AJAX and what does Asynchronous mean. There were also a couple of Leetcode easy questions. I didn't have any prior front end experience so I didn't know how to answer the specific front end questions, nor did I expect them.&lt;/p&gt;

&lt;p&gt;What I learned:&lt;br&gt;
In addition to Leetcode, I needed to study for the specific role I wanted to go for. I started searching up typical front-end interview questions as well as practicing my skills by creating side projects.&lt;/p&gt;

&lt;h3&gt;
  
  
  Google
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Year: 2017&lt;/li&gt;
&lt;li&gt;Position: &lt;a href="https://www.google.com/about/careers/students/engres.html" rel="noopener noreferrer"&gt;Engineering Residency program&lt;/a&gt; &lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The first round included two technical phone interviews. The interviewer called me on my phone and sent me a google doc link. He also pastes the coding question on the doc and I dove right into trying to solve the problem. Then I became confused. I asked him questions about what's a valid input and what isn't. Then I got more confused and he spent a lot of time trying to explain. Then I told him, I didn't want to continue the interview further. There was sympathy in his voice as he tried one more time to get me to understand the problem but I was firm and we hung up.&lt;/p&gt;

&lt;p&gt;I cried. &lt;/p&gt;

&lt;p&gt;I cried until it was time for the next interview. The person was calling my phone and I refused to answer. They left a couple of missed calls and then my recruiter immediately tries to contact me and asked if I was still joining. I didn't answer her either. &lt;/p&gt;

&lt;p&gt;I ghosted Google. &lt;/p&gt;

&lt;p&gt;Google, if you're reading this I'm sorry. I've grown since then. &lt;/p&gt;

&lt;p&gt;What I learned:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;I had a friend pick a random problem off Leetcode and I had to solve it on a video call while sharing my screen.&lt;/li&gt;
&lt;li&gt;I had recruited classmates to join me in white boarding the coding problems we encountered during our interviews in the library.&lt;/li&gt;
&lt;li&gt;I had organized a study group every weekend where we tackled data structures and algorithms together and solved Leetcode problems together.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I put in the effort to practice more and more, no matter how grueling it was. I forced myself to be put on the spot more, to get used to this uncomfortable feeling and become more confident.&lt;/p&gt;

&lt;h3&gt;
  
  
  Microsoft
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Year: 2019&lt;/li&gt;
&lt;li&gt;Position: Software development engineer&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I passed the first round interview, which was a mix of behavioral and technical, and then proceeded to the final round. This was at a conference where I had two in-person interviews. The first one, I believe I did great for the behavioral questions where I talked about my past projects that were listed on my resume. Then he hit me with a system design question. W H A T. I didn't know how to solve it but I tried anyway. Didn't solve it correctly and the interviewer showed me the correct flow at the end. When it was time for me to ask questions, I asked him for something that stuck out to him that I should improve on. He said that I need to learn how to say I don't know if I didn't know how to solve a question... Point taken.&lt;/p&gt;

&lt;p&gt;What I learned:&lt;br&gt;
I accepted the fact that I needed to say "I don't know" in the interview. But I couldn't just leave it like that. I honed my answer to be something like "Honestly, I don't know, but if I were to guess, I think ..." I like to believe this answer instead has a better impact.&lt;/p&gt;

&lt;h3&gt;
  
  
  Facebook
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Year: 2020&lt;/li&gt;
&lt;li&gt;Position: Full stack engineer&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I was getting ghosted a lot this year, it was tough to get any company interested due to the pandemic. I was pretty happy to get someone to invite me for a first round coding interview.&lt;/p&gt;

&lt;p&gt;This was conducted over BlueJeans and I was sent a Coderpad link. I've done a good amount of studying at this point but was still nervous because of the competitive reputation of this company. I was asked a question regarding calculating taxes. The majority of the time, the interviewer had to explain to me the MATH behind taxes. I DON'T KNOW WHY I COULDN'T MATH. It just wasn't sticking. Because I couldn't math, I couldn't come up with a working solution and then time ran out. &lt;/p&gt;

&lt;p&gt;What I learned&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Taxes.&lt;/li&gt;
&lt;li&gt;The &lt;a href="https://guides.codepath.com/compsci/UMPIRE-Interview-Strategy" rel="noopener noreferrer"&gt;UMPIRE Interview strategy&lt;/a&gt;. I needed to know exactly how to approach a technical interview. After learning and practicing this strategy, I felt more confident on understanding the problem and solving it and pretty sure this impressed my future interviewers as well. &lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Wrap up
&lt;/h2&gt;

&lt;p&gt;When I received the email that started out saying  "Congratulations! We're pleased to offer you the position of Software engineer", I felt this burden drop from my shoulders. The constant Leetcoding, the burnouts, the vast amount of time on submitting applications, networking and still contributing to my side projects were finally done. (Maybe more like put on pause) &lt;/p&gt;

&lt;p&gt;I promise it gets better. Utilize your community, uplift one another, and remember the reason(s) why you're striving for success.&lt;/p&gt;

&lt;h2&gt;
  
  
  Tips
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Interview constantly. Interview with companies you don't care about. &lt;/li&gt;
&lt;li&gt;Immediately after the interview, write down everything you've been asked. Redo the coding problems given to you. Go over what you've done and figure out what you could have done better. &lt;/li&gt;
&lt;li&gt;Practice solving the questions under pressure e.g. timed, having someone watch you, think of ways to optimize the algorithm right then and there, etc.&lt;/li&gt;
&lt;li&gt;Utilize the &lt;a href="https://en.wikipedia.org/wiki/Pomodoro_Technique" rel="noopener noreferrer"&gt;Pomodoro technique&lt;/a&gt;. Learning this technique helped me take my Data structure and algorithm studying seriously. I stayed alert and focused and was able to increase my completed questions on Leetcode from 50 to 100. &lt;/li&gt;
&lt;li&gt;If you're financially able to, invest in Leetcode Premium. It helped to see the solution when I was stuck on a problem.&lt;/li&gt;
&lt;li&gt;Depending on what software engineering role you're going for, you'd need to study for the position as well. For example, front end roles will ask you about AJAX, the DOM tree, etc and iOS roles would ask you questions about Swift and Objective C.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Resources
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="http://www.crackingthecodinginterview.com/" rel="noopener noreferrer"&gt;Cracking the Coding Interview&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://leetcode.com/" rel="noopener noreferrer"&gt;Leetcode&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.goodreads.com/book/show/18482790-the-pomodoro-technique" rel="noopener noreferrer"&gt;The Pomodoro Technique by Francesco Cirillo&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.thestandoutdeveloper.com/job-hunting#pricing" rel="noopener noreferrer"&gt;The Standout Developer&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://www.freecodecamp.org/news/how-to-prepare-for-a-software-developer-interview/" rel="noopener noreferrer"&gt;How to Prepare for a Software Developer Interview&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://dev.to/arslan_ah/the-ultimate-strategy-to-preparing-for-the-coding-interview-3ace"&gt;The Ultimate Strategy to Preparing for the Coding Interview&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://techdevguide.withgoogle.com/" rel="noopener noreferrer"&gt;Tech Dev Guide With Google&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://guides.codepath.com/compsci/" rel="noopener noreferrer"&gt;CodePath's Computer Science Guides&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://yangshun.github.io/tech-interview-handbook/" rel="noopener noreferrer"&gt;Tech Interview Handbook&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  For more content like this, be sure to follow me on &lt;a href="https://twitter.com/farhanaxmustafa" rel="noopener noreferrer"&gt;Twitter&lt;/a&gt;!
&lt;/h2&gt;

</description>
      <category>career</category>
      <category>beginners</category>
      <category>interview</category>
    </item>
    <item>
      <title>How to build a book recommender in React.js</title>
      <dc:creator>Farhana</dc:creator>
      <pubDate>Tue, 07 Apr 2020 05:50:22 +0000</pubDate>
      <link>https://dev.to/farhanaxmustafa/how-to-build-a-book-recommender-in-react-js-278k</link>
      <guid>https://dev.to/farhanaxmustafa/how-to-build-a-book-recommender-in-react-js-278k</guid>
      <description>&lt;p&gt;If you were looking to learn a new skill, you’re in luck because I’m looking to give technical blogging a try.&lt;/p&gt;

&lt;p&gt;This will be a tutorial on how to build a Book Recommender with React.js and the NYTimes API. Of course, you don’t have to use the NYTimes API. There are plenty of others for bibliophiles to use like &lt;a href="https://developers.google.com/books"&gt;Google Books API&lt;/a&gt; and &lt;a href="https://www.goodreads.com/api"&gt;Good Reads API&lt;/a&gt;. I will also be using &lt;a href="https://code.visualstudio.com/"&gt;Visual Studio Code&lt;/a&gt; as my text editor but feel free to use anything else if this one is not your cup of tea.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Step 1&lt;/strong&gt;: Starting with React.js&lt;/p&gt;

&lt;p&gt;&lt;a href="https://reactjs.org/"&gt;React&lt;/a&gt; is a JavaScript framework created by Facebook. It’s widely used in many different companies so it’s great to get some practice with the framework for your own growth and learning. &lt;/p&gt;

&lt;p&gt;I’m assuming you already have a package manager installed and know how to use the command line. I’m on a handy dandy pc computer running Windows 10 so I use Windows Powershell as my terminal. &lt;/p&gt;

&lt;p&gt;At the time of this post, I'm using npm version 6.14.2. Go ahead and run the command &lt;em&gt;npm install -g npm&lt;/em&gt; to update npm if this is your chosen package manager.&lt;/p&gt;

&lt;p&gt;After changing to the directory where you want your source code to be in,&lt;br&gt;
type the following on your terminal&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;npx&lt;/span&gt; &lt;span class="nx"&gt;create&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nx"&gt;react&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nx"&gt;app&lt;/span&gt; &lt;span class="nx"&gt;my&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nx"&gt;app&lt;/span&gt;
&lt;span class="nx"&gt;cd&lt;/span&gt; &lt;span class="nx"&gt;my&lt;/span&gt;&lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nx"&gt;app&lt;/span&gt;
&lt;span class="nx"&gt;npm&lt;/span&gt; &lt;span class="nx"&gt;start&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This is building a new single page application in React. Your app name doesn’t have to be “my-app”; it can be whatever you want to call it. I named my app book recommender. The npm start command should open your default web browser and display the default code in localhost:3000&lt;/p&gt;

&lt;p&gt;In your src folder, you’ll see the file App.js. Go ahead and open your favorite code editor to start editing this file. You’ll see the template code that React has provided. Delete this code and paste the following:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./App.css&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;Header&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./Components/Header&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;Book&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./Components/Book&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;Footer&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./Components/Footer&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nx"&gt;App&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;Component&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;render&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;
            &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt; &lt;span class="nx"&gt;className&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;App&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
                &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Header&lt;/span&gt;&lt;span class="o"&gt;/&amp;gt;&lt;/span&gt;
                &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Book&lt;/span&gt;&lt;span class="o"&gt;/&amp;gt;&lt;/span&gt;
                &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Footer&lt;/span&gt;&lt;span class="o"&gt;/&amp;gt;&lt;/span&gt;
            &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/div&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;        &lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="nx"&gt;App&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Save this file and look at your localhost. You’ll see an error &lt;br&gt;
Failed to compile&lt;br&gt;
./src/App.js&lt;br&gt;
Module not found: Can't resolve './Components/Book&lt;/p&gt;

&lt;p&gt;Right now, we’re trying to import files that don’t exist yet. To keep our code organized, I have a few files that display different portions of the web app.&lt;/p&gt;

&lt;p&gt;Next, create a folder within your src folder called Components. Then, create two files within the Components folder called Header.js and Footer.js&lt;/p&gt;

&lt;p&gt;Within Header.js:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;

&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nx"&gt;Header&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;Component&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;render&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;title&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Book Recommender&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
        &lt;span class="k"&gt;return&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
            &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
                &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;h1&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;title&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/h1&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;                &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;h2&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Which&lt;/span&gt; &lt;span class="nx"&gt;book&lt;/span&gt; &lt;span class="nx"&gt;should&lt;/span&gt; &lt;span class="nx"&gt;you&lt;/span&gt; &lt;span class="nx"&gt;read&lt;/span&gt; &lt;span class="nx"&gt;next&lt;/span&gt;&lt;span class="p"&gt;?&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/h2&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;            &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/div&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;        &lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="nx"&gt;Header&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Within Footer.js:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;

&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nx"&gt;Footer&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;Component&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;render&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;return&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
            &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;footer&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Made&lt;/span&gt; &lt;span class="kd"&gt;with&lt;/span&gt; &lt;span class="nx"&gt;love&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/footer&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;        &lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;    
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="nx"&gt;Footer&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Feel free to alter the text to whatever you want. And always remember to save your files.&lt;/p&gt;

&lt;p&gt;Next, within the Components folder, create a new file called Book.js. This file will be doing the most heavy lifting in our application.&lt;/p&gt;

&lt;p&gt;Let’s start compiling this file in parts.&lt;/p&gt;

&lt;p&gt;Copy and paste this skeleton code into Book.js:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;config&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;../config&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nx"&gt;Book&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;Component&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;

&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="nx"&gt;Book&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Right now, the config file doesn’t exist yet. We’ll get to that later.&lt;/p&gt;

&lt;p&gt;Here, we declared the Book class as a React component and exporting it on the last line so we can then successfully call this component back in the App.js file.&lt;/p&gt;

&lt;p&gt;Next, under the class Book declaration, create the constructor method&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;    &lt;span class="kd"&gt;constructor&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="k"&gt;super&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
      &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;state&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="na"&gt;error&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;null&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="na"&gt;isLoaded&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="na"&gt;items&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[],&lt;/span&gt;
        &lt;span class="na"&gt;rank&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="na"&gt;title&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;""&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="na"&gt;author&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;""&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="na"&gt;book_image&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;""&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="na"&gt;amazon_product_url&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;""&lt;/span&gt;
      &lt;span class="p"&gt;};&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This is telling your program which data to expect by initializing the state and lets us use that data.&lt;/p&gt;

&lt;p&gt;Under the closing curly bracket of your constructor method, hardcode your API URL&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;    &lt;span class="nx"&gt;URL&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;https://api.nytimes.com/svc/books/v3/lists/current/hardcover-fiction.json?api-key=&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nx"&gt;mykey&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;config&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;MY_KEY&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now, we’re going to create one final file. This file will be outside of your Components folder but still within the src folder. Name this file config.js and paste the following code into the file:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;config&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;MY_KEY&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;InsertYourKeyHere&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="nx"&gt;config&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Alright! Hope everything was smooth so far. We’re going to take a little break from our text editor and create the API key that we need.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Step 2&lt;/strong&gt;: NYTimes Book API&lt;/p&gt;

&lt;p&gt;Next, head on over to the New York Times Dev Portal&lt;br&gt;
Create a developers account&lt;br&gt;
After you successfully follow their steps to create an account, click your username/email in the upper right to see the drop down menu.&lt;br&gt;
Click Apps in this drop down menu.&lt;br&gt;
On the far right, click the +NEW APP button.&lt;br&gt;
Give a name and scroll down until you see the Books API card. Toggle this API to be enabled.&lt;br&gt;
Scroll back up and click Create on the top right.&lt;br&gt;
When your app is created, you will see your API key. Hover over the generated code under Key and click the Copy to clipboard button that appears. Your key is now copied.&lt;/p&gt;

&lt;p&gt;Back to VSCode! Within your config.js file, delete the InsertYourKeyHere text within the single quotes and paste your key. Save your file. &lt;/p&gt;

&lt;p&gt;Now we have the config.js file that is imported at the top of our Book.js file. Generally, you want all of your top secret data in a config file. It’s good practice to not hardcode endpoints/API URLS within files but to call your config file to use this sensitive data. You should also always add your config files to gitignore because you don’t want to have your API secrets exposed when you’re using version control. If you have no idea what I’m talking about, no worries! This can be a different blogpost for another day.&lt;/p&gt;

&lt;p&gt;Add the rest of this code under your mykey variable:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;componentDidMount&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nx"&gt;fetch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;URL&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;mykey&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
        &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;res&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;res&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;json&lt;/span&gt;&lt;span class="p"&gt;())&lt;/span&gt;
        &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
          &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;result&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;setState&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
              &lt;span class="na"&gt;isLoaded&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
              &lt;span class="na"&gt;items&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;results&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;books&lt;/span&gt;
            &lt;span class="p"&gt;});&lt;/span&gt;
          &lt;span class="p"&gt;},&lt;/span&gt;
          &lt;span class="c1"&gt;// Note: it's important to handle errors here&lt;/span&gt;
          &lt;span class="c1"&gt;// instead of a catch() block so that we don't swallow&lt;/span&gt;
          &lt;span class="c1"&gt;// exceptions from actual bugs in components.&lt;/span&gt;
          &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;setState&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
              &lt;span class="na"&gt;isLoaded&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
              &lt;span class="nx"&gt;error&lt;/span&gt;
            &lt;span class="p"&gt;});&lt;/span&gt;
          &lt;span class="p"&gt;}&lt;/span&gt;
        &lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;

    &lt;span class="nx"&gt;handleGetRandomRank&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;setState&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
        &lt;span class="na"&gt;rank&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nb"&gt;Math&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;floor&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nb"&gt;Math&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;random&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="mi"&gt;15&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;
      &lt;span class="p"&gt;})&lt;/span&gt;
    &lt;span class="p"&gt;};&lt;/span&gt;

    &lt;span class="nx"&gt;render&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;isLoaded&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;items&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;rank&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;state&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
      &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt; &lt;span class="o"&gt;||&lt;/span&gt; &lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="nx"&gt;items&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;rank&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt; &lt;span class="nx"&gt;className&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;""&lt;/span&gt; &lt;span class="nx"&gt;onClick&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;handleGetRandomRank&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Give&lt;/span&gt; &lt;span class="nx"&gt;me&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="nx"&gt;Best&lt;/span&gt; &lt;span class="nx"&gt;Seller&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/button&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;
      &lt;span class="p"&gt;}&lt;/span&gt; 
      &lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="nx"&gt;isLoaded&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Loading&lt;/span&gt;&lt;span class="p"&gt;...&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/div&amp;gt;&lt;/span&gt;&lt;span class="err"&gt;;
&lt;/span&gt;      &lt;span class="p"&gt;}&lt;/span&gt;
      &lt;span class="c1"&gt;//if user is first landing on the page, only display button &lt;/span&gt;
      &lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="nx"&gt;rank&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt; &lt;span class="nx"&gt;className&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;""&lt;/span&gt; &lt;span class="nx"&gt;onClick&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;handleGetRandomRank&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Give&lt;/span&gt; &lt;span class="nx"&gt;me&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="nx"&gt;Best&lt;/span&gt; &lt;span class="nx"&gt;Seller&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/button&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;      &lt;span class="p"&gt;}&lt;/span&gt;
      &lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;
          &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt; &lt;span class="nx"&gt;className&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;content&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
            &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
              &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt; &lt;span class="nx"&gt;className&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;""&lt;/span&gt; &lt;span class="nx"&gt;onClick&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;handleGetRandomRank&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Give&lt;/span&gt; &lt;span class="nx"&gt;me&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="nx"&gt;Best&lt;/span&gt; &lt;span class="nx"&gt;Seller&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/button&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;            &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/div&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;            &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt; &lt;span class="nx"&gt;className&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;bookCoverStyling&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
              &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;img&lt;/span&gt; &lt;span class="nx"&gt;src&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;items&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;rank&lt;/span&gt;&lt;span class="p"&gt;].&lt;/span&gt;&lt;span class="nx"&gt;book_image&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="nx"&gt;alt&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Book cover&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;/&amp;gt;&lt;/span&gt;
            &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/div&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;            &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt; &lt;span class="nx"&gt;className&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;titleStyling&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
              &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;items&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;rank&lt;/span&gt;&lt;span class="p"&gt;].&lt;/span&gt;&lt;span class="nx"&gt;title&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
            &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/div&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;            &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt; &lt;span class="nx"&gt;className&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;authorStyling&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
              &lt;span class="na"&gt;by&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;items&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;rank&lt;/span&gt;&lt;span class="p"&gt;].&lt;/span&gt;&lt;span class="nx"&gt;author&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
            &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/div&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;            &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt; &lt;span class="nx"&gt;className&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;descriptionStyling&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
              &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;items&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;rank&lt;/span&gt;&lt;span class="p"&gt;].&lt;/span&gt;&lt;span class="nx"&gt;description&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
            &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/div&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;            &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="nx"&gt;href&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;items&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;rank&lt;/span&gt;&lt;span class="p"&gt;].&lt;/span&gt;&lt;span class="nx"&gt;amazon_product_url&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Amazon&lt;/span&gt; &lt;span class="nx"&gt;URL&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/a&amp;gt;&lt;/span&gt;&lt;span class="err"&gt; 
&lt;/span&gt;          &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/div&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;        &lt;span class="p"&gt;);&lt;/span&gt;
      &lt;span class="p"&gt;}&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;That’s a lot of code, I know! &lt;/p&gt;

&lt;p&gt;Here’s the breakdown of the code:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The &lt;a href="https://reactjs.org/docs/react-component.html#componentdidmount"&gt;componentDidMount&lt;/a&gt; method is calling our NYTimes API and turning the response data into readable json data that we can use. Then for each book object given to us from NYTimes, we store the data into an items array.&lt;/li&gt;
&lt;li&gt;The handleGetRandomRank method is a custom method. The “recommend” portion of my book recommender is simply a random number, which is used to get a random book from our items array.&lt;/li&gt;
&lt;li&gt;The &lt;a href="https://reactjs.org/docs/react-component.html#render"&gt;render&lt;/a&gt; method is a required method whenever you make a subclass of React.Component. It displays your XML-like code. Inside this render method, I have various if statements. If there’s an error, we’re just displaying a button that says Give me a Best Seller. When this button is clicked, it executes the handleGetRandomRank method to generate a random number. If the page is still loading, we’re just going to display some text that says Loading. Next, if the user is entering the website for the first time, we just want to display the Give me button. And finally, we’re displaying the data we received from the API and displaying it on our page. I’ve included the book cover image, the title, author, description and purchase URL. There’s a lot of data being given from NYTimes so feel free to pick different things to display or even use a different endpoint!&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If everything went well, you should save all of your files and refresh your localhost, assuming you still have npm start running in your terminal/command line, and see that the error is no longer there but you should see the app you just created.&lt;/p&gt;

&lt;p&gt;I’m not great at CSS so feel free to add your own styling and personality to the design of this web app.&lt;/p&gt;

&lt;p&gt;Here’s my &lt;a href="https://book-recommender-1595b.firebaseapp.com/"&gt;live version&lt;/a&gt; and &lt;a href="https://github.com/fmustafa17/book-recommender"&gt;GitHub repo&lt;/a&gt; of this project!&lt;/p&gt;

&lt;p&gt;I hope you gained something valuable from my tutorial, whether it’s adding a new tool under your belt or having another project on your resume!&lt;br&gt;
Let me know what you think or have any suggestions or corrections in the comments. I’m always looking to improve.&lt;/p&gt;

&lt;p&gt;Happy learning.&lt;/p&gt;

</description>
    </item>
  </channel>
</rss>
