Typing – Full‑Stack Typing Practice App

A full‑stack app for typing practice and challenges.

• Back‑end: Laravel 12 (PHP 8.2+), Sanctum, Sail (Docker), Pest
• Front‑end: Vue 3, Vite 7, TypeScript, Pinia, Vue Router, Tailwind CSS v4, DaisyUI
• E2E/Unit: Cypress, Vitest

Monorepo Layout

typing/
  back-end/   # Laravel API (Sail-ready)
  front-end/  # Vue 3 SPA (Vite/TypeScript)
  package.json # Root helper scripts

---

Prerequisites

• Docker + Docker Compose (recommended) OR PHP 8.2+, Composer, MySQL
• Node.js 20.19+ or 22.12+ and npm

---

Quick Start

One‑command Dev (Docker Sail + Vite)

From the repo root:

npm run start

What it does:

• Brings up Laravel Sail containers in back-end/
• Installs front‑end deps and starts Vite dev server in front-end/

Default ports (see back-end/docker-compose.yml):

• API: http://localhost:80
• Vite dev: http://localhost:5173

Manual Setup (Docker)

1. Back‑end

cd back-end
composer install
cp .env.example .env
./vendor/bin/sail up -d
./vendor/bin/sail php artisan key:generate
./vendor/bin/sail php artisan migrate

2. Front‑end

cd ../front-end
npm install
npm run dev

Local (no Docker)

Back‑end:

cd back-end
composer install
cp .env.example .env
php artisan key:generate
php artisan migrate
php artisan serve

Front‑end:

cd ../front-end
npm install
npm run dev

---

Back‑end (Laravel)

• PHP: ^8.2
• Framework: laravel/framework:^12
• Auth: laravel/sanctum
• Dev tooling: Sail, Pint, Pest, Pail

Useful composer scripts (in back-end/composer.json):

# Dev convenience (concurrently runs server, queue, logs, vite)
composer run dev

# Run tests
composer test

Database: MySQL (via Sail). Credentials/DB name come from back-end/.env (copy from .env.example).

API

• GET /api/paragraph/{lang}/{number} → Returns a paragraph for a given language and item number.

Auth: /api/user is protected by Sanctum.

---

Front‑end (Vue 3 + Vite)

Key tech:

• Vue 3, TypeScript, Pinia, Vue Router
• Tailwind CSS v4, DaisyUI

Common scripts (in front-end/package.json):

# Dev server
npm run dev

# Type-check + build
npm run build

# Unit tests (Vitest)
npm run test:unit

# E2E tests (Cypress)
npm run test:e2e:dev  # against vite dev server
npm run test:e2e      # against preview/prod build

# Linting / formatting
npm run lint
npm run format

Vite alias: @ → front-end/src

---

Development Notes

• When using Sail, the API will be served from the container at http://localhost (port 80 by default). Vite dev server runs on 5173.
• Ensure CORS/Sanctum configuration if you add authenticated routes consumed by the SPA.
• Tailwind v4 is configured via the Vite plugin in front-end/vite.config.ts.

---

Testing

Back‑end (Pest):

cd back-end
./vendor/bin/sail php artisan test   # with Sail
# or
php artisan test                      # without Docker

Front‑end:

cd front-end
npm run test:unit
npm run test:e2e:dev

---

Environment

Back‑end .env (copy from .env.example) must define DB credentials used by Sail (DB_DATABASE, DB_USERNAME, DB_PASSWORD).

Front‑end can consume Vite env vars via import.meta.env (e.g., VITE_API_BASE_URL). Create front-end/.env as needed.

---

Deployment

• Back‑end: Deploy as a standard Laravel app (configure web server, PHP 8.2+, queue worker if needed, and database). Run migrations on release.
• Front‑end: npm run build produces static assets in front-end/dist for serving via any static host or your web server.

---

Scripts Overview (root)

# Bring up Sail and start front-end dev in one go
npm run start

---

License

MIT