NFC My Business Card

☁ Try it in the Cloud

Utilize NFC to realize a digital business card in the form of an NFC card to refer to a profile site.

NFC My Business Card is a web application that allows you to create a business card site with NFC with encrypted site.

How to set up

npm install

And also, you need to buy NFC card.

You can write the card with NFC Tools for your deployed business card site.

Run locally

npm start

Development Tools

Continuous Integration

This project uses GitHub Actions for CI/CD. On every push and pull request, the following checks are automatically run:

• Linting - ESLint checks for code quality issues
• Formatting - Prettier ensures consistent code style
• Type Checking - TypeScript compiler validates types
• Unit Tests - Vitest runs all unit tests
• E2E Tests - Playwright runs end-to-end tests
• Build - Verifies the project builds successfully

You can run all CI checks locally with:

npm run ci    # Run all checks (lint, format, typecheck, test, build)

Testing

This project includes comprehensive testing setup:

Unit Tests (Vitest)

Run unit tests:

npm test                # Run tests in watch mode
npm run test:run        # Run tests once
npm run test:ui         # Run tests with UI

E2E Tests (Playwright)

Run end-to-end tests:

npm run test:e2e        # Run E2E tests
npm run test:e2e:ui     # Run E2E tests with UI

Linting and Formatting

ESLint

Check code quality:

npm run lint            # Check for linting errors
npm run lint:fix        # Auto-fix linting errors

Prettier

Format code:

npm run format          # Format all files
npm run format:check    # Check formatting

Storybook

View and develop components in isolation:

npm run storybook       # Start Storybook dev server
npm run build-storybook # Build Storybook for production

Build and Encrypt

Before build and encrypt, you need to set up the environment variables.

PASSWORD=yourpassword

npm run build && npm run encrypt && npm run serve

And you can access http://localhost:3000#yourpassword

Demo

Touch your NFC card to your smartphone, and you can see your business card site.

AR.js

AR.js is used to display 3D models on the profile site on your camera.

Encrypt with Pagecrypt

If you access the site without NFC or QR code, you need to input the password to access the site.