Skip to content

Latest commit

Β 

History

History
109 lines (69 loc) Β· 2.44 KB

File metadata and controls

109 lines (69 loc) Β· 2.44 KB

Flashcards Workshop Web

A web application for creating and studying flashcards, built with React and TypeScript

🎯 Overview

This application allows users to:

  • Create custom flashcard sets
  • Study and test their knowledge using flashcards
  • Navigate through an intuitive, responsive interface
  • Access content in multiple languages (i18n support)

πŸ› οΈ Tech Stack

Core Technologies

  • React 19 - Frontend framework
  • TypeScript - Type-safe programming
  • Vite - Build tool and development server

Routing & State Management

  • TanStack Router - Type-safe routing
  • TanStack Query - Data fetching and caching

Styling & UI

  • Tailwind CSS - Utility-first CSS framework
  • Radix UI - Accessible UI components
  • CVA (Class Variance Authority) - Component variants management

Internationalization

  • i18next - Internationalization framework

API Integration

  • Axios - HTTP client

Form Handling

  • React Hook Form - Form management
  • Zod - Schema validation

Development & Build Tools

  • Docker - Containerization
  • GitHub Actions - CI/CD
  • ESLint - Code linting
  • Prettier - Code formatting
  • Husky - Git hooks

πŸš€ Getting Started

Prerequisites

  • Node.js v22.14.0 or newer
  • Yarn package manager (v4.6.0)

Yarn package manager can be installed via corepack which is build in Node.js feature. Run the following commands

corepack enable
corepack install

Development

# Install dependencies
yarn install

# Start development server
yarn dev

# Build for production
yarn build

# Preview production build
yarn preview

Docker

There are two pre build images available for Docker

  • ghcr.io/deployed/flashcards-workshop-web/flashcards-workshop-web:prod
  • ghcr.io/deployed/flashcards-workshop-web/flashcards-workshop-web:local

The local image assumes API is running under http://localhost:8000/api while the prod image uses API hosted on https://w2025-demo.deployed.space/api

To run any of these images use following command

docker run -it --rm -p 8080:80 ghcr.io/deployed/flashcards-workshop-web/flashcards-workshop-web:local

This will run the image and expose frontend on http://localhost:8080

πŸ“¦ Environment Variables

  • VITE_API_URL - Backend API URL

🌐 Deployment

The application is configured for deployment using GitHub Container Registry (ghcr.io) with both local and production builds available.