React project to scan and write into NFC tags using the Web NFC API.

Overview

REACT NFC Sample App

About

This is a simple sample app demostrating the usage of the Web NFC API.

To get the Web NFC API working you will need an Android Device with Google Chrome and your web app will need to be hosted using https.

This is the sample app in action.

alt nfc tag

This project was bootstrapped with Create React App.

If you want to see an Angular app using NFCs look at this video example and visit this repo by the awesome Wassim. Thanks to him I was introduced to the Web NFC API.

WTF is NFC?

NFC stands for Near-Field Communication. NFC is a set of communication protocols for communication between two electronic devices.

Electromagnetic fields can be used to transmit data or induce electrical currents in a receiving device. Passive NFC devices draw power from the fields produced by active devices, but the range is short.

alt NFC Tag

You can buy NFC Tags on Amazon. These tags can contain 540KB of data.

Usages

NFCs can have multiple usages, some of the usages are:

  • Making contactless payments like Google and Apple Pay
  • Opening a door using your badge
  • Opening a link
  • Product control in a warehouse

To learn about the usages visit this forum.

Getting Started with the Web NFC API

This project uses 4 methods of the Web NFC API

  1. Scan: Returns a Promise resolved if starting NFC scan was successful.

    ndef.scan()

  2. Reading: An event fired when a new reading is available.

    ndef.onreading()

  3. Reading Error: An event fired when an error happened during reading.

    ndef.onreadingerror()

  4. Write: Returns a Promise resolved if writing the message (String, ArrayBuffer or NDEF record) with options was successful. ndef.write()

Using the Web NFC API methods

Scan, Reading, Reading Error

{ console.log("Cannot read data from the NFC tag. Try another one?"); }; ndef.onreading = (event) => { console.log("NDEF message read."); onReading(event); //Find function below }; } catch (error) { console.log(`Error! Scan failed to start: ${error}.`); } } }; ">
const scan = async() =>
    if ("NDEFReader" in window) {
        try {
            const ndef = new window.NDEFReader();
            await ndef.scan();

            console.log("Scan started successfully.");
            ndef.onreadingerror = () => {
                console.log("Cannot read data from the NFC tag. Try another one?");
            };

            ndef.onreading = (event) => {
                console.log("NDEF message read.");
                onReading(event); //Find function below
            };
        } catch (error) {
            console.log(`Error! Scan failed to start: ${error}.`);
        }
    }
};

The onReading method grabs the message and serial number inside of the NFC tag, the uses the array of reacord inside of the message and decodes the information so its readable to humans.

const onReading = ({message, serialNumber}) => {
    console.log(serialNumber);
    for (const record of message.records) {
        switch (record.recordType) {
            case "text":
                const textDecoder = new TextDecoder(record.encoding);
                console.log("Message": textDecoder.decode(record.data));
                break;
            case "url":
                // TODO: Read URL record with record data.
                break;
            default:
                // TODO: Handle other records with record data.
        }
    }
};

Write

const onWrite = () => {
  try {
    const ndef = new window.NDEFReader();
    await ndef.write({
      records: [{ recordType: "text", data: "Hellow World!" }],
    });
    console.log(`Value Saved!`);
  } catch (error) {
    console.log(error);
  }
};

Learn More & Resources

Available Scripts

In the project directory, you can run:

yarn start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

yarn build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

Releases(1.0)
Owner
Pato
@google Developer Expert on Angular and Web Technologies, @auth0 Ambassador, MDE @cloudinary, @twilio champ @OneSignal Dev Advocate🥑
Pato
Clone project of a famous Q/A website for developers which is stackoverflow built using MySQL-Express-React-Node :globe_with_meridians:

StackOverflowClone As the name suggests, this project is a clone of a famous Q/A website for professional and enthusiast programmers built solely by m

Mayank Aggarwal 303 Oct 12, 2021
A full-stack web app built with NestJS and ReactJS that helps you find and discover over 500,000+ video games on your device. Powered by RAWG API.

Game Store Monorepo A full-stack web app built with NestJS and ReactJS that helps you find and discover over 500,000+ video games on your device. Powe

Vu Nguyen 59 Oct 14, 2021
Netflix UI Clone with React Native & Expo || web support => https://expo-netflix.vercel.app

Netflix: UI Clone with React Native / Expo web demo: Expo Netflix Table of Contents Install & Build Features API Components/Packages Used Linting Expo

Caleb Nance 358 Oct 4, 2021
Spotify UI Clone with React Native & Expo || web support => https://expo-spotify.vercel.app

Spotify: UI Clone with React Native / Expo web demo: Expo Spotify Table of Contents Install & Build Features Linting Expo Web Demo & Release Notes Ins

Caleb Nance 364 Oct 16, 2021
Simple, powerful online communities.

Simple, powerful online communities. This is the main monorepo codebase of Spectrum. Every single line of code that's not packaged into a reusable lib

Spectrum 10.2k Oct 10, 2021
org-mode on the web, built with React, optimized for mobile, synced with Dropbox and Google Drive

org-mode on the web, built with React, optimized for mobile, synced with Dropbox and Google Drive

Daniel de Haas 1.2k Oct 10, 2021
A clone of Google Keep with its original Material Design aesthetics

A Clone of Google Keep A minimal Clone of Google Keep written in ReactJS with Material UI Components, themed to look exactly like Google Keep, with co

Merbin J Anselm 406 Oct 12, 2021
A Personal Finance Application Built With React

Desafio | Front-end - Módulo 3 Após alguns meses trabalhando em projetos mais simples, você foi designado pelo seu Tech Lead para desenvolver uma apli

Giu Zambot 2 Oct 13, 2021
A meal planning app build with React

Name of the project Additional information or tag line A brief description of your project, what it is used for. Installing / Getting started A quick

Johanna 7 Aug 2, 2021
Awe-amazing Windows 11 clone. Oh wait, Not for your Computer, but for the web! ⚡

Awe-amazing Windows 11 clone. Oh wait, Not for your Computer, but for the web! ⚡

Piyush Suthar 229 Oct 10, 2021
Astro is a fresh but familiar approach to building websites.

Astro is a fresh but familiar approach to building websites. Astro combines decades of proven performance best practices with the DX improvements of the component-oriented era. Use your favorite JavaScript framework and automatically ship the bare-minimum amount of JavaScript—by default.

Snowpack 7.8k Oct 13, 2021
Build a Full Stack Marketplace on Ethereum with React, Solidity, Hardhat, and Ethers.js

Building a Digital Marketplace on Ethereum The technologies used in this workshop are React, Next.js, Tailwind CSS, HardHat, Solidity, and Ethers. Get

Nader Dabit 47 Oct 4, 2021
One more Twitter clone, but this one is featureful yet concise and fast, built with MERN stack, with love ❤.

React front-end for tclone Try it here back-end repo here looks like twitter, but not ?? It is my own take on building Twitter clone, I have tried to

muzamil 106 Oct 3, 2021
Planets fact site with animated solar system built with ReactJS.

Frontend Mentor - Planets fact site Table of contents Overview Intro The challenge Links My process Built with Features Setup Useful resources Overvie

null 38 Sep 11, 2021
Api server for Tclone, a concise, fast, and feature rich Twitter clone built with MERN stack.

Api server for tclone Try the app here React frontend repo here This project is my own take on building Twitter clone, I have tried to keep things sim

muzamil 45 Sep 4, 2021
🎓 Introduction to GraphQL + React + Java + Astra DB

?? Introduction to GraphQL + React + Java + Astra DB

DataStax Developers 68 Oct 7, 2021
React application that scans, decodes and validates EU Digital COVID-19 certificates, all in the browser.

EU Digital Covid Certificate Decoder This project can scan, decode and validate the EU Digital Covid Certificates used in European Union countries as

Miguel Grinberg 11 Sep 28, 2021
Fakeflix – Netflix open source clone, not the usual clone that you can find on the web.

Fakeflix – Netflix open source clone, not the usual clone that you can find on the web.

Davide Mandelli 3.3k Oct 14, 2021
Frontend of HRMS Project with React.

HRMS Project Frontend Frontend of HRMS Project with React. Report Bug · Request Feature About The Project Design Built With UML Component Diagram Usag

Ahmet Çetinkaya 48 Oct 6, 2021