In this article, I will walk you through implementing google OAuth with passportjs and JWT in a React, Node, Express, Sequelize, and PostgreSQL application. The same flow can be used on a Next.js application as well.

Originally published at

What is Google Oauth?

Oauth stands for Open Authorization. It allows third-party services like Google and Facebook to exchange your information without you having to give away your passwords. This helps prevent your password from being compromised. Learn more about Google Oauth here.

How does Google Oauth work?

Once a user clicks on the Oauth login button, our frontend sends a request to the Google authorization server through a…

Nextjs has had over 20 new features that improve performance and developer experience. At the same time, the JavaScript size of the Next.js core has been reduced by 16%.

Automatic image optimization

Because the web is not only made of JS, they’ve also introduced automatic image optimisation through introducing a component that will replace the HTML <img> element.

  • When using the Image component from next/image, images are automatically lazy-loaded.
  • Whenever a large image is used on phone screens, the next/image component will automatically generate smaller sizes through built-in Image Optimization.
  • Built-in Image Optimization automatically serves the images in modern image formats like WebP…

Responsive hamburger navigation menu using React and styled-components.
Responsive hamburger navigation menu using React and styled-components.

In order to build a website with a good user experience, there are a lot of things to consider and one of them is how responsive your site is going to be. Your site can be responsive and still have a bad user experience. But how do you solve this?

In this article, I am going to walk you through building a hamburger responsive navigation menu from scratch using Reactjs and Styled-Components. To do this, there are a few things to handle.

Setup React app

In your terminal, run the following scripts. Then open http://localhost:3000 to see your app.

npx create-react-app responsive-nabar cd…

Awa Dieudonne

Full Stack JavaScript Developer

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