MINE Card

Create and share your namecard in LINE within minutes.

• Made with: LIFF, NextJS, React
• Demo: https://line-namecard.netlify.app/

Development

Prerequisites

• Node.js <= 16.20.0
• npm
• yarn (optional)

Installation & Setup

1. Install dependencies

   npm install
   # or
   yarn

2. Run the development server:

   npm run dev
   # or
   yarn dev

Deployment

• Deploy on netlify
• Deploy on Vercel

Registering LIFF App

To enable Line login and sending messages, you need to register a LIFF app in the LINE Developer Console.

1. Create a LINE Provider - LINE Official Guide
2. Create a LINE Login Channel - LINE Official Guide
3. Add the LIFF app to the channel - LINE Official Guide

Environment Variables

Edit .env.local file in the root directory of the project.

LIFF_ID = "Your LIFF ID which is aquired from LINE Dev Center"
LIFF_URL = "Liff url of the app, eg: https://line-namecard.netlify.app"
DOMAIN_URL = "Domain url of the app, eg: https://liff.line.me/<LIFF_ID>"

• How to add environment variables in local development
• How to add environment variables to Netlify
• How to add environment variables to Vercel

Resources

• LIFF v2 API Reference
• Flex Message API Reference

Acknowledgements

This project was inspired by and built based on the following projects:

• LIFF Starter
• LINE 數位版名片 liff-businesscard
• react-liff - A react context provider for LIFF
• flex2html - Convert LINE Flex message to HTML