My Portfolio site

💪 Objective

It's a great opportunity to showcase my frontend skills, and to explore new frameworks and libraries such as Tailwind CSS and Nuxt.js.

Table Of Contents

• Getting Started
  • Environment Setup
    • How to run the application
  • Repository Setup
    • Obtaining environment variables
    • GraphQL setup
• Developing
• Frequently Used Scripts
• Additional Documentations

Getting Started

Environment Setup

How to run the application

1. Install Docker Desktop

2. OR with package manager pnpm

   • Install LTS node version.

   💁 Tip: You can use nvm to easily manage multiple versions of node. Once installed, run nvm use in the project directory.

   • Install pnpm

   💁 corepack enable pnpm (Installed Node.js without Homebrew)

   💁 brew install corepack (Installed Node.js using Homebrew)

Repository Setup

Once you have your environment setup, you can clone the repository.

git clone https://github.com/nicholas5538/fp-voucher-BE.git
cd fp-voucher-BE

Obtaining environment variables

• Using dotenv-vault, please request vault_id from @nicholas5538 (recommended)

npx dotenv-vault@latest new <vault_id>
npx dotenv-vault@latest pull development .env

• OR Create a .env file to store environment variables, please request secret keys from @nicholas5538.

NUXT_CLOUDFLARE_R2_ACCESS_KEY=<Insert access key here>
NUXT_CLOUDFLARE_R2_ACCOUNT_ID=<Insert account ID here>
NUXT_CLOUDFLARE_R2_REGION=<Insert region here>
NUXT_CLOUDFLARE_R2_SECRET_ACCESS_KEY=<Insert secret access key here>
NUXT_GITHUB_SECRET=<Insert token here>

GraphQL setup

1. Install the GraphQL plugins for your preferred IDE

• Visual Studio Code
• JetBrains IDE

2. Generate the GraphQL schema and its relevant type files for GraphQL TypeScript support with the following command(s):

pnpm run generate-graphql
# OR use this command if you prefer using node.
# node version has to be >= 22.6.0 due to the --experimental-strip-types flag
node --env-file=.env --experimental-strip-types generate-graphql-files.ts

Developing

Once you have set up the repository, you're ready to start developing. Starting the development environment is managed by the following command(s).

• With Docker Compose or Docker (recommended)

# With Docker compose, you're able
# to see live changes after refreshing
docker compose up -d --build

# Or build your own image
docker build --build-args="NODE_VERSION=lts-alpine" --compress -t <image name> --target dev .
docker run -d --env-file ./env -p 5173:5173 -v .:/app -v /app/node_modules --name <container name> <image name>

• With pnpm

pnpm run dev

The dev command will start the application in your local environment.

Frequently Used Scripts

In addition to the pnpm run dev command, there are other scripts available in the package.json. Some of the most common you might get to use are:

• pnpm run test - Runs unit tests.

  💁 Tip: use pnpm run test:watch or pnpm run test:cov to explicitly specify the desired mode

• pnpm run test-e2e - Runs E2E tests.

  💁 Tip: use pnpm run test-e2e:desktop or pnpm run test:mobile to explicitly specify the desired viewport

• pnpm run format - Check prettier formatting through all the codes

  💁 Tip: use pnpm run format:fix to run auto prettier formatting across all the codes

• pnpm run lint - Runs TS linter through all the codes

Additional Documentations

• Nuxt.js documentation
• Tailwind CSS styling
• Vue.js documentation