natanhermes / virtual-card

virtual-card

Generate Page

This page is responsible for generating the image according to the data provided in the form.

Generate page

Mobile Image Generated

The generated image contains the QR Code that will redirect to a presentation page.

User Info Page

This page is responsible for displaying the user data registered on the image generation page, as well as the access buttons to the social networks Linkedin and Github.

Technology stack

• React
• GraphQL with Hygraph CMS
• TailwindCSS
• Vite.js

About project

This project is published online, you can view it here: https://virtual-card.hermesdeveloper.com/generate. But if you want to run in development mode, follow the steps below.

Running locally

1. Clone this repo:

$ git clone https://github.com/natanhermes/virtual-card.git

2. Then go to the project's folder:

cd virtual-card

3. Install all dependencies:

npm install

4. Configure your environment variables.

VITE_DOMAIN_URL="your localhost"
VITE_API_URL="api uri to configure apollo client using graphcms/hygraph"
VITE_API_ACCESS_TOKEN="auth token of graphcms/hygraph"

5. Clone this project in hygraph

https://app.hygraph.com/clone/8584237ce8bf4ccb9d0c727d800960eb?name=Virtual%20Card

6. Get your environment variables Project Settings -> Access -> API Access -> Endpoints -> Content API URL

VITE_API_URL= get url public content api in the hygraph project settings

Project Settings -> Access -> API Access -> Permanent Auth Tokens -> Copy Access Token

VITE_API_ACCESS_TOKEN= get token in "Permanent Auth Tokens"

7. Run locally, use node version 18:

npm run dev