Storing and retrieving data can be a pain when working in an environment that focuses more on the “V” part of an MVC framework such as React. For most applications, I use Firebase Cloud Firestore to store and manage data because it handles the “Model” part pretty well.

In this article, I will demonstrate how I use Cloud Firestore to save and query data in a React environment. The example project I’ll be using is called Burger Builder, an application that lets you order burgers from a menu and see your previous orders. An administrator would be able to create new varieties to be added to the menu. …


This article provides a short introduction to setting up and using the Firebase Authentication API in a React environment.

Image for post
Image for post
Photo by Marcos Mayer on Unsplash

The first step is to create a new firebase project, and under Project Overview, create a new web app. It will open a new page that allows you to register your app. You’ll end up with a config object that might look like this.

const firebaseConfig = {
apiKey: 'AIzaXXXXXXXXXXXXXXXXXXXXXXX',
authDomain: 'burger-builder-XXXX.firebaseapp.com',
databaseURL: 'https://burger-builder-XXXXXX.firebaseio.com',
projectId: 'burger-builder-XXXX',
storageBucket: 'burger-builder-XXXX.appspot.com',
messagingSenderId: 'XXXXXXX',
appId: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
};

As an alternative, you can also use environment variables in React applications, you only need to prefix them with REACT_APP_ for them to be available from within your code asprocess.env.REACT_APP_<variable name>. All environment variables should be in a .env, .env.local or .env.production


According to the docs, useMemo returns a memoized value. It will only recompute the memoized value when one of the dependencies changes. Okay cool, but what does that mean?

Image for post
Image for post
Photo by Leonardo Yip on Unsplash

For the longest time, I read the word memoized as memorized without realizing it. Luckily, these are different words but mean similar things.

A person memorizes things by committing them to their memory to be retrieved at a later time. Memoization, however, is an optimization technique in software that stores the results of an expensive computation and returning the cached results when the same input occurs again.

This idea is important when thinking around useMemo and how it returns a memoized value. Any function passed into useMemo would only be recomputed when one of the values passed as a dependency change. …


Image for post
Image for post
Photo by Rob Fuller on Unsplash

This is one of those ~super~ common hooks we use but I found myself having issues with it more often than not and so I shied away from it because I didn’t fully understand how it works. I hit several roadblocks with effects; like what even is [], why do I sometimes enter an infinite loop when I try to fetch data? I came across this very detailed explanation and it brought clarity, so I’m going to try to explain how I now think around useEffect.

This quote from Overreacted speaks to me.

It’s only after I stopped looking at the useEffect Hook through the prism of the familiar class lifecycle methods that everything came together for me. …


Image for post
Image for post
Photo by Brook Anderson on Unsplash

Before React 16.8, updating state required your component to be class-based. This meant that if you started your component as a “stateless”, or functional component and then realized that you needed state, you’d need to convert your component to be class-based.

Classical Component Example

With the introduction of React Hooks, this is no longer the case.

The useState hook takes an optional initial state value, and returns two things; the value and a function to update that value. So,

this.state = { count: 0 };

becomes

const [count, updateCount] = React.useState(0);

Notice that this is a familiar JavaScript syntax. The values returned from useState are set as variables (constant variables, lol) with array destructuring; in this case count is a number (implicitly, because it was initialized with the value 0), while updateCount is a function that would be used to update count. …


Image for post
Image for post
Photo by Denys Nevozhai on Unsplash

While building web applications, we may find that some routes need to be hidden from anonymous users. I have found this need arise more often recently, and find that using a Higher Order Component for those routes work pretty well for my use-cases.

<PrivateRoute path="/dashboard" component={Dashboard} />

Example

Below is an example of how the <PrivateRoute /> HOC could look.

firebase was used for authentication here

In a nutshell, <PrivateRoute /> takes another Component and passes it to <Route />. If the user is not anonymous, the desired, private component is rendered by <Route />. …


Image for post
Image for post
Photo by Jonny Caspari on Unsplash

Introduction

The piece of functionality covered in this tutorial is part of a larger app I am attempting to build. This app was initially started using only the React Native library and I quickly learned I was not willing to go through the head — and heartache of writing a lot of extra code to handle higher-level functionality (cue device Permissions and loading the Camera Roll) while accounting for Android and iOS systems simultaneously.

Enter Expo!

As stated in their documentation, Expo is a set of free, open sources tools, libraries, and services to help you build mobile applications for iOS and Android systems. Under the managed workflow, Expo offers push-notification services, a production build service, and over-the-air (OTA) updates all out-of-the-box. …


Six months after enrolling in the VR Nanodegree at Udacity, I have come to my final project. This one was very broad in the sense that we (the students enrolled in this nanodegree) were given full creative control on what we create. The only rules were that the project had to earn a specific number of points in 3 different categories, and had to evoke some kind of emotion.

My project is called Scream, and as the name suggests, it evokes fear.

Unique Considerations

Sream was built for the HTC Vive, so a major design consideration was setting clear boundaries within the game since players have control over movement. It would not do to have players traverse to a place outside the gameplay area and break immersion. Another design consideration for my specific game was lighting. Since fear was the emotion I went for, it made sense to make the scene dark, but not too dark where players cannot get their bearings. …


This long overdue story wraps up my work on mobile VR development with the Udacity VR Nanodegree program. MazeVR was one of the first experiences I developed that featured some amount of coding (check out my GitHub page for all my work on both PC and mobile games). The objective of MazeVR is to find your way out of the maze and into the temple to collect the treasure.

Unique Considerations

One design consideration I had to make was the size of the play area. Seeing as mazes can get very complicated, it was important to design this one in a way where the maze was not too simple but not so complex that players could get lost easily. I combated this problem by introducing hints by way of adding the richer gold colored walls as a guide which required substantial user testing. Another consideration was the design of the waypoints. …


As part of my coursework in the VR nanodegree at Udacity, I designed, tested and iterated a VR mobile experience using the Google Cardboard. This one is a little different because it is an experience of experiences! I focused on a company here in Ottawa, Canada — SimWave Consulting to show how their work brings VR technology into education. The experience includes 5 viewing stations that showcases 5 of their innovations; Vimy Ridge, CN-6400 Steam Locomotive VR Experience, 3D Interactive Theater, Royal Canadian Regiment WW1 VR Experience, and the Elemental Booth.

Unique Considerations

An important design consideration was to create it such that everything is in front of the player and is still clearly visible. Another consideration was to design the room to be life-sized so the player doesn’t feel too small or too large. Lastly, simulator sickness was considered and minimized by limiting the movement of the user and keeping everything in front of the camera. …

About

Deinyefa

UX Engineer ⋅ JavaScript ⋅ Hooked on ReactJS

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