Lyrics Typing

This is a typing game where you can learn lyrics and language!

Link

Features

• Multi-language support. (It is now optimized for Japanese.)
• Huge amount of lyrics powered by MusixMatch.
• It's mobile-first so you can learn anywhere, anytime.
• 🚧Track your learning progress with your account.

Tech Stack

Frontend

• TypeScript (maybe you only need to know the basic concepts in GetStarted)
• Next.js (SSG + Client side data fetching)
• Tailwind CSS (like normal CSS)
• 🚧 Apollo Graphql Client

Tutorials

https://www.apollographql.com/blog/typescript-graphql-code-generator-generate-graphql-types-with-apollo-codegen-tutorial/

Backend 🚧

• NestJS
• Postgres
• Graphql

Service

• Musixmatch (need API-KEY)

Start dev.

prepare .env

MUSIXMATCH_APIKEY=xxx
APOLLO_KEY=service:xxxxx
APOLLO_GRAPH_VARIANT=current
APOLLO_SCHEMA_REPORTING=true

start dev server

yarn dev

IMPORTANT

https://tailwindcss.com/docs/optimizing-for-production#writing-purgeable-html

// ❌ Don't use string concatenation to create class names
<div class="text-{{  error  ?  'red'  :  'green'  }}-600"></div>

// ✅ Do dynamically select a complete class name
<div class="{{  error  ?  'text-red-600'  :  'text-green-600'  }}"></div>

Linting & Formatting

yarn add -D
 @types/eslint
    @typescript-eslint/eslint-plugin
    @typescript-eslint/parser
    eslint
    eslint-config-airbnb
    eslint-config-prettier
    eslint-import-resolver-typescript
    eslint-plugin-import
    eslint-plugin-jsx-a11y
    eslint-plugin-prettier
    eslint-plugin-react
    eslint-plugin-react-hooks

firebase & hasura

Tutorial

https://hasura.io/blog/authentication-and-authorization-using-hasura-and-firebase/

Important note:

• upgrade firebase-admin version
• admin.initializeApp()

{
    "type":"RS256",
    "jwk_url": "https://www.googleapis.com/service_accounts/v1/jwk/[email protected]",
    "audience": "<firebase-project-id>",
    "issuer": "https://securetoken.google.com/<firebase-project-id>"
}