Author: Chris Nwamba

Vue is a progressive Javascript framework that makes building frontend applications easy. Coupled with vue-router, we can build high performance applications with complete dynamic routes. Vue-router is an efficient tool and can handle authentication in our Vue application seamlessly. In this tutorial, we will look at using vue-router to handle authentication and access control for different parts of our application. Getting Started To begin, install Vue cli and create a vue application with it: $ npm install -g @vue/cli $ npm install -g @vue/cli-init $ vue init webpack vue-router-auth Follow the setup prompt and complete the installation of this application. If you are not sure of an option, simply click the return key (enter key) to continue with the default option. When asked to install ...

Downshift is a library that helps you build simple, flexible, WAI-ARIA compliant enhanced input React components. Its major use case is for building autocomplete components but it can also be used to build dropdown components. In this post, we’ll walk through some common use cases solved with Downshift. Prerequisites To follow this tutorial, you need Node and NPM installed on your machine. A basic understanding of React will help you get the most out of this tutorial. If you don’t have Node.js installed, go to the Node website and install the recommended version for your operating system. Setting up the application We’ll make use of Create React App to create a simple React app with no build configuration. If you don’t have Create React App installed, run npm i create-react-app in your ter...

When building React applications, one thing developers don’t like to utilize is routing in React - usually because of the assumed learning curve involved. In this article, we are going to debunk that myth and show you how easy it is to implement routing and serving responsive routes in your React applications. In layman’s terms, responsive routing is pretty much serving different routes to users based on the viewport of their device. CSS media queries are usually used to achieve this. The only issue with this is the fact that with media queries, you’re restricted to either showing or not showing different elements by using the CSS props. With responsive routes, you can now serve entire separate views our React applications to different users based directly on their screen sizes. What we’ll...

With the high demand for SEO and high-performant web application, server-side rendering has become innevitable for commercial websites since they need to be found and ranked higher than their competitors. Building SSR with frontend frameoworks/libraries like React is quite challenging and the flow can get tricky. Next.js is a platform that simplifies SSR and helps the developr focus on just building a React app. Why NextJS Next.js was built to bridge the gap between frontend and backend development. Since it is built on React, there is a really low learning curve for frontend developers who want to start building fullstack Javascript web applications. It also has some incredible features that come built in. Here’s a list of some Next.js features: Ease of use Automatic code splitting ...