Like me, you too are new to the world of styled-components. Well, my fellow curious Front end developer look no further!! This blog series will be all about styled-components from the basics of what are styled-components, how to get started & styling your components, leading up to how you can properly pass props in styled-components!

What are styled-components?

In all honesty, I thought CSS inline styling, style-sheets and SASS were the only forms of styling a developer could use. That assumption was gracefully proven wrong once I learned about styled-components.

A styled-component is a library for React & React Native that allows you…

You read the title right! In this article, we will be talking about slugs and how to generate a slug for a post in a blog component using Gatsby.js.

What Is A Slug?

By programming definition, a Slug is a unique identifier of a web address, usually seen at the end of a URL. It may also be the final component when a new document is created under a parent document; for example, this page’s slug is Glossary/Slug.MDN(

Why Use A Slug?

Good question! You would want to use a slug when you want to optimize your search engine URL. The Search Engine Optimization, also known…

In case you are interested in seeing the quotesGenerator component in action here is the link to my website:

Everyone has their favorite quote(s) they love to either tell people, post about on their Facebook or get tattooed on their body to cherish forever!

If you are curious to know.. Yes! I personally am one of those people that has a quote that she cherishes dearly! Ask me about it if you want to know what it is haha!

This leads me to why I decided I wanted to include a random quotes generator in my website! I personally…

Move Zeroes is a leetcode challenge that prompts you to move all the zeroes in an array to the end of that array.

The Problem:

Given an array of nums, write a function to move all 0’s to the end of it while maintaining the relative order of the non-zero elements.


Input: [0,1,0,3,12]
Output: [1,3,12,0,0]


  1. you must do this in-place without making a copy of the array
  2. Minimize the total number of operations.

Now, there are many ways of doing this algorithm, I will be displaying two different ways to approach this very challenge!

The First Approach

The Pseudocode:

we can create a pointer called j, and…

This weekend I attended a Hackathon called “Health and Wellness”, hosted by Major League Hacking Community. This time around I went into this hackathon with the plan to either find a group or create my own project! Fortunately, I was recruited by a few people that put together a team an hour or so later!

After an hour or so of discussion on what we should create, we agreed on a web application called Positivity Pal!

As I continue my battle in learning how to solve algorithms for future technical interviews, I was recommended by a friend to schedule mock interviews on a site called Pramp!

Once you have signed up for Pramp, you receive 6 interview credits for you to you any time! You will also have the option to pick your language that you feel comfortable coding in along with what you would like to interview for. There is a nice variety of choices like Data structures and algorithms, Frontend, Data Science, and more.

Once you schedule your interview, you receive a confirmation email…

If you’re like me, practicing a code challenge is probably the one thing that’s got you feeling extremely nervous about that technical interview coming up soon, or even tomorrow! That’s okay, they are meant to be challenging, otherwise, they wouldn't be called code challenges!

Luckily, they are not impossible to solve, unless someone out there has created the world's most complicated algorithm — which would just be incredibly unnecessary.

Aside from all of the “what ifs”, I am here to talk about an algorithm I struggled solving!

Sales By Match


There is a large pile of socks that must be paired by color…

For my final project for Module 5 at Flatiron, it was the day before our projects were due for presentations. Unfortunately, my project was not how I envisioned it to look or function. That was okay, I had already accepted that it wouldn't. Fortunately, I at least wanted to learn something that would make my application at least look a little more dynamic!

That’s when I learned about React Page Transitions! Framer Motion — An open-source react animation library for frontend design lovers. With Framer Motion, you can do animations like:

  • Spring animations
  • Gestures (drag/tap/hover)
  • Variants
  • SVG paths
  • Exit animations

What does it mean to find the “maximum depth ” of a tree data structure?

Luckily, it is as simple as finding the last remaining french fry at the bottom of your bag! As stated by Leetcode, “A binary tree’s maximum depth is the number of nodes along the longest path from the root node down to the farthest leaf node.

Continuing on from my latest blogs of learning about Tree and Graph data structures, I wanted to also write about the two ways to traverse these data structures using Breadth-First Search & Depth-First Search!

What is a Depth-First Search algorithm?

Depth-first search is an algorithm and searches or traverses through a graph or tree data structure. Starting at a selected root node (this can be any node of choice for a graph data structure), the algorithm explores along each possible branch it can find until it has to backtrack up from the explored node down to unvisited nodes.

Akiko Green

Software Engineer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store