Skip to content

README.md

Latest commit

 

History

History
202 lines (136 loc) · 3.73 KB

README.md

File metadata and controls

202 lines (136 loc) · 3.73 KB
Raw

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
  1. 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