We build a simple REST API with the Express JS framework. This tutorial assumes a basic familiarity with RESTful architecture and methods.

Image for post
Image for post

What is Express?

Express is a “fast, unopinionated, minimalist web framework” for the extremely popular Node runtime.

In the eight years since its introduction, Express has become the de facto standard server framework for Node.

It packs a number of helpful tools to get a Node app, or in our case an API, running quickly and efficiently.

Let’s put it to use!

What are We Making?

In this tutorial, we are going to build an API that:

  • Handles CRUD for an item (we’ll be using dinosaurs)
  • Follows standard URL structures (e.g. http://example.com/api/dinosaurs)
  • Uses RESTful HTTP methods(GET, POST, PUT, and DELETE)
  • Reads and returns JSON data
  • Logs all requests made in the…

We build a chat application made in React Native using Google Firebase, React Navigation, and Gifted Chat.

Image for post
Image for post

Let’s build a chat application.

The goal is to create an application with: authentication (signup/login), chat room creation, and group messages within those rooms.

It will be built in React Native. Firebase will be used to handle authentication and database storage. React Navigation will help with getting around. And, Farid Safi’s wonderful Gifted Chat library will handle the actual chat screen.

In the interest of space, and keeping things clean all styles will be kept out of this write up but live in the GitHub repository.

Create the App and install Dependencies

Open a terminal window, navigate to your folder of choice, and invoke the React Native CLI to create a new application named “RNFirebaseChat”. …

We go over Google Firebase’s offerings and set up a quick-start template for accessing your Firebase project from React Native.

Image for post
Image for post

At Platypus, we’re big fans of Google Firebase.

It streamlines much of the development process, and enables simple, rapid scaling when you’re ready to go from MVP to production.

What is Firebase?

A comprehensive back end solution for your web and mobile apps. With Firebase, Google aims to take as much hassle out of the development process as possible so that you can focus on your app instead of getting different back end services to play together nicely.

You can spend more time getting the front end dialed in just the way you like without worrying about things like spinning up a server, provisioning a database, or configuring a realtime data sync pipeline (provided here by socket.io). …

Using the Create React App Buildpack will save your time and sanity. It’s also extremely easy.

Image for post
Image for post

Using Create React App to build a new site? Deploying to Heroku? Word of advice. USE THE HEROKU BUILDPACK.

It will save you many headaches. It eases forcing HTTPS, compatibility with Google Fetch / Crawl bot, and generally makes your life much easier.

For the SSL, add a new file to the root of your project named “satic.json”, inside it put:

"root": "build/", "https_only": true, "headers": { "/**": { "Strict-Transport-Security": "max-age=7776000" } }

If you’re using React Router (and if you’re not, you probably should be) then also add:

"routes": { "/**": "index.html" }

This will make sure the new pack plays well with your set routes.

Hope this helps!

Swipe cards are all the rage in mobile UI. In this Platypost we make a swipe card component in React Native using PanResponder and the Animated API.

Image for post
Image for post

Tinder really changed the game with it’s card swiping interface. It’s simple, visually appealing, and just plain fun.

Perhaps that’s why it’s taken the mobile UI world by storm. These days there is a “Tinder of…” just about everything from Music to Pet Adoption.

So what’s behind these addictive cards? Let’s find out!

Create the App and Set Initial Structure

In the interest of space, and keeping things cleaner, all styles will be kept out of this write up but live in the GitHub repository. That out of the way, let’s begin.

Open a terminal window, navigate to your folder of choice, and invoke the React Native CLI to create a new application named “RNCardStack”. …

We dive into React Navigation and explore how to create apps with tab, stack, drawer navigators, and combinations thereof.

Image for post
Image for post

In the last post, we took a look at React Native and created our first app. Today we’re going to go from a single screen to a multi screen application using navigators.

What are Navigators?

Navigators allow you to define your application’s structure. Through the use of routes and scenes (or in this case screens), they set up how your application is displayed to the user. Navigators also render common elements such as headers and tab bars.

React Navigation

There are many options to choose from when it comes to selecting a navigator for your application. For this article, we’re going to focus on React Navigation. …

In this post we explain a bit about React Native and how to set up your system to start building mobile apps with it.

Image for post
Image for post

What is it?

React Native is a code library by the good people of Facebook and Instragram. At the most basic level it allows you to use JavaScript to write mobile apps.

Mobile apps with no Objective-C or Java required? That’s right, and I mention both because you can use React Native to write for both iOS and Android.

Now, there will be some cleanup to do when it comes to deploying code to each platform, but at its core we’re talking a language that can write for both systems quickly and efficiently.

At this point you’re probably looking for the catch. Like me, you’re probably thinking, ok so it’s a web app that’s optimized for mobile. …

This is going to be our section to talk about everything trending in web and mobile development/design.

Image for post
Image for post

At least everything we find interesting, and get around to writing about.

We’re working on a series of tutorials and general commentary on:

  • React
  • Firebase
  • React Native
  • Express
  • and more!

Follow us on Twitter to get updated when we publish a new Platypost.

Stay tuned for more!



Development studio combining quality tech and good design into uniquely functional tools that empower your business. https://platypus.dev

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