DEV Community: Reem

How React.js helped me build a fun Pokédex web app

Reem — Fri, 14 Feb 2020 18:16:17 +0000

Anybody close to me knows that I've been a Pokémon fan for as long as I could remember (Black and White made everything go downhill, though 💔).

I've literally been playing the games since I was about five years old, so it's a huge part of my adult life as well, since I'm actually an extremely nostalgic gal. There are photos of my childhood scattered around my parents' home in Lebanon just filled with me playing the old games on my Gameboy Color.

Photo by Amelia Krales on The Verge found here

When I started learning web development, I had in my mind to create a website that basically acts like a Pokédex.

When I took the JavaScript course at Juno, they introduced us to APIs and how they work. When I discovered their purpose and importance, my go-to was the PokéAPI the second we had a project to work on.

My first time tackling this wasn't the greatest, but the way the logic worked in my head using JavaScript was absolutely astounding to me. I found myself focused on my laptop screen for three days straight trying to accomplish things. My mind kept finding quick turnarounds for solving any wall I was hitting (and there were plenty of walls). This lead to the creation of my first API project: the Pokémon Region Generator:

Albeit simple to the experienced developer, it was my proudest work yet when I made it live. Just seeing my brain work through all the hurdles resulting in ugly and messy code kind of made it so rewarding.

Fast forward a couple of months, and I discovered the power of React.js and how coding my dream project would actually be a lot simpler and not as intense as I thought it would be.

You see, with React.js, you can code a website with much more ease and in a modular fashion, making it more organized. It also forces you to be selective with the logic and how to represent the data you want appended.

I decided to pursue building my next, bigger project during the holidays after I graduated from Juno's bootcamp.

So, I started sketching...

I'd be lying if I said I had an easy time. At this point in time, I was still struggling with the logic surrounding React. Some of the headaches you'll get when learning this framework come from the life cycle methods, the ternary functions, and passing down props to child components and throwing up functions to parent components.

I ended up having several components, six to be exact. Organization matters!

Throughout making the design and functionality of this project however, I wanted to add a little twist that would make it stand out from traditional Pokédex applications we're so used to seeing. I noticed how my sketch of the project's draft really resembled a Polaroid image, so I played the logic in my head for a bit and thought it would be an exciting challenge to take on. The main difference I would undertake was to change the mainstream attraction of writing under the photos in Polaroids to flip the card for the user when a short bio was to be seen. I was able to achieve the card flip my installing a node package specifically made to flip divs; find it here.

Throughout this project, I dove deeper into the PokéAPI more than I ever did. I had to do multiple calls to the API, one where I had to dive into the region, another to dive into the Pokémon of that region. The second call just showing the creatures didn't give any information aside from their names and a URL leading to an in-depth look at the information, hence why I later needed to make a third call referencing the URL given to me that lead me to another JSON database.

At one point, I was stuck on the second call for a couple of days, only to find out I did not close my .map() method soon enough and instead kept on going with my filtering. That was probably one of the most horrific truths in my coding journey to discover -- an idiocy at best.

I decided to stick to only writing up the code for the first four regions of the series: Kanto, Johto, Hoenn, and Sinnoh. Those were my favourites and anything after Platinum really rubbed me the wrong way. The 5th generation was my least favourite and left a terrible impression on me. It's not easy to say this but, I haven't exactly enjoyed the series since the 4th generation. Every story and mythological story line was half-assed to say the least, lol 😅.

About a week and a bit later, I was able to finally figure out all the logic that went into play for the project and I finally started going into the design aspect of the project -- my favourite part!

Eventually, I had designed the perfect cards for my liking:

The last thing to do was to design the intro page to the website describing the purpose and giving insights on what the user should do to get the results they're searching for.
I chose to get a little creative with this and do something I haven't exactly done before: edit images to fit together and resemble actual Polaroids. I selected to use images of the Pokémon seen as the ~first of who were ever created~, which is known to be a trivia:

Bulbasaur: #1 in the National Pokédex
Mew: Known as the ancestor of all Pokémon
Arceus: Known as the God of all Pokémon and one to create each creature.

I also wanted to include Rhydon, as it was the first Pokémon to ever be sketched by the creator of the series, but I was only able to find one perfect stock image of Polaroids to use, however it only showed three cards.

The final result was this: PokéPolaroid:

Finding Myself Again

Reem — Sun, 08 Dec 2019 22:12:43 +0000

Just this past Thursday, my web development bootcamp, Juno College (formerly HackerYou), held a very intimate "group therapy"-like session for our cohort without us being remotely prepared. The session was meant have each individual share their highs, lows, and everything in between that we've felt throughout the intense bootcamp schedule.

As I mentioned earlier, none of us were really emotionally prepared for the talks we were about to have and the openness and vulnerability of each individual. I won't get into detail about anybody's personal narration, as what we shared was something to only be shared and kept between all of us, which I think is actually beautiful. What happened on Thursday December 5th, 2019 stays in Thursday December 5th, 2019.

Although, I do have one story I have permission to share and that would be my own.

My two highs:

I switched out of a career where I felt so lost and stagnant in, to something that gets me up in the morning and keeps me going at it till bedtime.
I met the most wonderful people these past two months in my cohort where I feel as if I could continue fostering life-long supportive relationships with in this ever-growing community.

My low:
I've found design and creativity to be a bit of a challenge these past few months, but I know I'll eventually find my niche and create a style that works and speaks perfectly for me.

This blog post is dedicated to speaking about my first high I mentioned above

It's no secret that I've struggled finding my path in data science in the past. I remember my role be different in each company I worked for and each company had its own definition of data science. This created a series of months of me having serious anxiety, imposter syndrome, and stress going into work for a very long time. I would come home in the evenings stressed out on why something so simple could not make any sense in my head. I was anxious about how I never received mentorship or guidance in my data career, eventually weighing me down in the confidence scale.

I knew for a fact things would only get better with time. I was aware data would make more sense to me on a larger scale and would be easier to learn and work with overtime and with more practice.
But I practiced. I took courses. I asked questions online and tried to find answers. However, it was rare to apply whatever I was learning online to a real-life scenario at work.
My managers weren't even in the same field I was in, meaning I had almost nobody to turn and ask technical questions to. It was a real struggle finding a way to enjoy work, let alone finishing a task without tearing my hair out and feeling near to worthless.

I could go on for ages about why I couldn't find myself while working in data science, but I'd much rather give you a truth I'm excited about.

I started learning web development earlier in the year as a means of distracting myself from data and my lack of having a forte in it. I guess you could say I did it to rebel against my anxiety and challenge myself in something more... tangible, per se.

I eventually created my first website, my second, third, and eventually my forth. I was on a roll and I genuinely did not want to stop. I didn't find myself crying out in frustration (internally) the way I was at work. In fact, I was gushing each time I changed the style of any element on my website. The look on my face when I center-aligned my text for the first time was the look of pure joy and accomplishment 🥺 #throwback.

I thought "if this isn't what I'm meant to do in tech, I don't know what is"...

After some months struggling to find jobs in data once I moved back to Canada, I ventured into one of Juno's free three-hour courses catered to teaching you how to make a website with HTML and CSS. I honestly went on a whim just hoping to refresh my memory of web development, since I was too busy to code while looking for a job. As you might have guessed, I ended up applying just a week after and got accepted after such a rigorous (but very rewarding) process.

It's been seven weeks, just about to start the eighth, of studying with Juno. I've already got many projects I've created while with Juno ready to go into my portfolio soon. I've learned so much and I know I've excelled in this field opposed to my former one. Many concepts aren't too difficult to grasp, and many of them just come so naturally to me! Do you know how amazing it is to say that about something? Just imagine this: you don't have to wait for data to be cleaned, you don't need to wait for datasets to be analyzed, you don't need to wait on weeks for a report; you just need one thing to show your work: one line of code. You literally have the power to create a website or an application from scratch based on what you type! You know what what best part is, though?

I honestly kind of in a way somehow out of this scope of the conversation possibly found myself again

The best part however, has been the people. I've never been part of a community that isn't competitive, snarky, or just plain old selfish. Each person I've met in the Juno community is so interested in helping others, and seeing others succeed as well. Everybody has something to contribute to the conversation; whether it be how to tackle a coding problem, best tips on readable code, job hunting advice, and project scope advice. The list goes on and on.

This brings me back to the beginning of this blog post: the evening of Thursday December 5th, 2019. The instructors and workers at Juno care so much about each student and what they may be going through. Seeing them create such a great and healthy space for open and vulnerable dialogue has proven that to me.

You Need to Calm Down

Reem — Sun, 10 Nov 2019 03:16:31 +0000

This is my first post on Dev.to! Hope you enjoy.

Starting Juno's immersive web development bootcamp has got me beat.

It's no exaggeration when I say I've gotten much less sleep working on this program's projects in the past several weeks than I have throughout my 5 academic years at university.

Once you are admitted into a coding bootcamp, you tend to find yourself immersed staring at your computer all day looking for inspiration, advice, (coding) packages, and / or answers on Stack Overflow.

Every once in a while, you start to have a mini freakout (or two) over something so small yet inconvenient, like trying to debug your code for example. Just recently, I had a tiny meltdown trying to wrap my head around flexbox.This time you find yourself immersed in a spiral of stress and anxiety of not being good enough.

The cherry on top was receiving a call, while in class, notifying me that MY APARTMENT FLOODED ☺️☺️☺️. Imagine the stress of that?

However, a startling new study (/s) says when life gives you lemons, don't be afraid to seek help from people who are around you. I cannot thank the friends I've made at Juno, as well as my awesome instructors, for all their support during an unpleasant week. Although, emotional support from others isn't enough when you aren't prioritizing yourself, as well.

This form of self-care can come in many ways: Exercising, reading, watching a documentary on Netflix, so on and so forth! The limit does not exist, as long as it is a healthy release.

I've personally taken up running and calming breathing exercises. Heather, a very talented classmate of mine, made a great website utilizing CSS animations to showcase an "breathing" circle guiding us with a breathing technique to take it easy.

No matter how long you've been a victim of any type of stress, you must have realized by now that there is no end to it, but only a new way to learn to take care of yourself. It's all about finding the balance, forcing yourself to take breaks (I recommend looking into the Pomodoro technique), and getting more sleep than you'd like to (sleep is for the weak when there's much to code).

However, what about when you're in the middle of working and need something soothing to keep you going? I've personally been a fan of lo-fi study music for years now. Lo-fi stands for low fidelity, and is listened to by many people, especially students, who need to get in the zone of studying, reading, or even relaxing. It's just all around a wonderful and calming genre of music to tune into.
My recent favourites have been the Poké and Chill and Zelda and Chill playlists by Mikel. They invoke many nostalgic feels and keep the Nintendo lover in me satisfied.

The more of those you do, the more rewarding working on your task feels, and the more adamant you become to being a better doer day-by-day.
Just find your sweet spot, and please remember to just calm down. You're doing great! It's only up from here, no matter how you look at it.