Freelance Full-Stack JS developer & entrepreneur (mariestarck.com) | I work with designers and entrepreneurs to bring their ideas from paper to code
Image for post
Image for post

Originally published at https://mariestarck.com on November 28, 2020.

Routing in an application is the ability to change urls and go from one page to another. It’s a major component in any web application. Thankfully, Next.js comes with a built-in logic concerning routing.

This tutorial will be focusing on static routing and cover:

How to create routes in Next.js

  • Index Routes (such as /)

How to navigate between pages

  • Next.js Link Component

To better illustrate this concept, I will be using the example of an online store. This store will have three pages: Home, About and New Arrivals. We will be going over the different ways how to implement routing between them. …


Image for post
Image for post

Note: Originally published at https://mariestarck.com on November 15, 2020.

When I became a freelancer, I was afraid of deployment. As a startup employee, I always had the luxury of my coworkers nearby if anything went wrong. It was a luxury I only appreciated once it was no longer an option as these days I mostly work by myself. But that move from employee to freelancer also made me realize something else:

While deployment may seen frightening, it doesn’t have to be.

As a matter of fact, this tutorial will prove how easily and quickly you can get your Next.js …


Image for post
Image for post
Photo by chuttersnap on Unsplash

Originally published at https://mariestarck.com on September 4, 2020.

It is no secret today that an app performance is an important component in the user experience. According to a study conducted by Google, 53% of mobile users will leave a page if it takes longer than 3 seconds to load.

After finally shipping out my personal project, City Secrets, I decided to run some Lighthouse Test and improve the performance.

Note: If you are unfamiliar with Lighthouse, it’s an open source tool that allows you to run audits on your web pages not only for performance but also accessibility, SEO, progressive web apps and more. …


Image for post
Image for post

Note: Originally published at mariestarck.com

This is part 3 (and the last one) of a multi-part React tutorial on Mapbox.

In part 1, we simply focus on displaying a map and adding a geocoder to look up addresses. We even managed to re-center our map to the selected address.

In part 2, we learned how to display markers.

Part 3 will be focusing on popups and removing markers from a map.

Note: Here is the link to Part 1 in case you missed it. And here is part 2

Let’s get started!

Display a Popup

Once again, we will be using the react-map-gl library which offers a nice Popup component. So I will go ahead and create a CustomPopup component to display the address after clicking on a marker. …


Image for post
Image for post

Note: Originally published at mariestarck.com

This is part 2 of a multi-part React tutorial on Mapbox.

In part 1, we simply focus on displaying a map and adding a geocoder to look up addresses. We even managed to re-center our map to the selected address. Note: Here is the link to Part 1 in case you missed it.

While very nice, a map doesn’t quite feel as complete without markers to show us what’s important.

So let’s get started!

Display a marker

We have our map and our geocoder. We can look up addresses and select one.

Let’s now display a marker on that particular address. Our react-map-gl library also comes with a handy Marker component. …


Image for post
Image for post

Note: Originally published at mariestarck.com

This multi-part React tutorial will be covering how to use Mapbox to:

  • display a map

and even removing a marker.

To not overwhelm people with a bunch of code, I will be splitting it up into three parts:

We will be using create-react-app for our base React app and using the react-map-gl and react-mapbox-gl-geocoder libraries for our map and geocoder respectively. …


Image for post
Image for post
Photo by William Iven on Unsplash

Note: Originally published at mariestarck.com

This tutorial will be covering how to create a bottom tab navigator for ReactJS. There are loads of libraries in React Native but not as much for ReactJS.

And yet, as more and more users browse the internet on their phones, it is important for websites to replicate a truly mobile experience. As a result, I decided to do away with the typical hamburger and instead implement a real bottom tab navigator for the web.


Image for post
Image for post
Photo by Dlanor S on Unsplash

This is part two of 12 biggest misconceptions about coding. Here is part one if you would like to read it.

In the previous one, we went over some of most well-know misconceptions including:

  • You need to be good at math to code

And here are the last six.

7. Coding isn’t creative

I think this one might have stemmed from our first misconception (aka you need to be good at math to code). …


Image for post
Image for post

Software engineering has a long list of benefits. Some of them include:

  • High salary

And yet women developers still only clocks at 20–25% of the workforce.

Three years ago, a coworker and I went to our old high school to attend career day and answer questions students might have about software engineering. …


Image for post
Image for post
Photo by Capturing the human heart. on Unsplash

A couple of weeks ago, I wrote a tutorial on how to add localization with React Navigation. This guide used the global screenProps to pass down functions and instances necessary to translate our content.

But while researching for that article, one sentence in the React Navigation documentation piqued my interest.

You may want to also use React’s context API […] in order to make it easier to access the translate function from a variety of components.

Feeling curious, I took an afternoon to see how that would work. The following tutorial is my approach to this problem. …

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