|
1 | | -# TODO |
| 1 | +# Flashcards Workshop Web |
| 2 | + |
| 3 | +A web application for creating and studying flashcards, built with React and TypeScript |
| 4 | + |
| 5 | +## 🎯 Overview |
| 6 | + |
| 7 | +This application allows users to: |
| 8 | + |
| 9 | +- Create custom flashcard sets |
| 10 | +- Study and test their knowledge using flashcards |
| 11 | +- Navigate through an intuitive, responsive interface |
| 12 | +- Access content in multiple languages (i18n support) |
| 13 | + |
| 14 | +## 🛠️ Tech Stack |
| 15 | + |
| 16 | +### Core Technologies |
| 17 | + |
| 18 | +- **React 19** - Frontend framework |
| 19 | +- **TypeScript** - Type-safe programming |
| 20 | +- **Vite** - Build tool and development server |
| 21 | + |
| 22 | +### Routing & State Management |
| 23 | + |
| 24 | +- **TanStack Router** - Type-safe routing |
| 25 | +- **TanStack Query** - Data fetching and caching |
| 26 | + |
| 27 | +### Styling & UI |
| 28 | + |
| 29 | +- **Tailwind CSS** - Utility-first CSS framework |
| 30 | +- **Radix UI** - Accessible UI components |
| 31 | +- **CVA (Class Variance Authority)** - Component variants management |
| 32 | + |
| 33 | +### Internationalization |
| 34 | + |
| 35 | +- **i18next** - Internationalization framework |
| 36 | + |
| 37 | +### API Integration |
| 38 | + |
| 39 | +- **Axios** - HTTP client |
| 40 | + |
| 41 | +### Form Handling |
| 42 | + |
| 43 | +- **React Hook Form** - Form management |
| 44 | +- **Zod** - Schema validation |
| 45 | + |
| 46 | +### Development & Build Tools |
| 47 | + |
| 48 | +- **Docker** - Containerization |
| 49 | +- **GitHub Actions** - CI/CD |
| 50 | +- **ESLint** - Code linting |
| 51 | +- **Prettier** - Code formatting |
| 52 | +- **Husky** - Git hooks |
| 53 | + |
| 54 | +## 🚀 Getting Started |
| 55 | + |
| 56 | +### Prerequisites |
| 57 | + |
| 58 | +- Node.js v22.14.0 or newer |
| 59 | +- Yarn package manager (v4.6.0) |
| 60 | + |
| 61 | +Yarn package manager can be installed via `corepack` which is build in Node.js feature. |
| 62 | +Run the following commands |
| 63 | + |
| 64 | +``` |
| 65 | +corepack enable |
| 66 | +corepack install |
| 67 | +``` |
| 68 | + |
| 69 | +### Development |
| 70 | + |
| 71 | +```bash |
| 72 | +# Install dependencies |
| 73 | +yarn install |
| 74 | + |
| 75 | +# Start development server |
| 76 | +yarn dev |
| 77 | + |
| 78 | +# Build for production |
| 79 | +yarn build |
| 80 | + |
| 81 | +# Preview production build |
| 82 | +yarn preview |
| 83 | +``` |
| 84 | + |
| 85 | +### Docker |
| 86 | + |
| 87 | +There are two pre build images available for Docker |
| 88 | + |
| 89 | +- `ghcr.io/deployed/flashcards-workshop-web/flashcards-workshop-web:prod` |
| 90 | +- `ghcr.io/deployed/flashcards-workshop-web/flashcards-workshop-web:local` |
| 91 | + |
| 92 | +The `local` image assumes API is running under `http://localhost:8000/api` while the `prod` image |
| 93 | +uses API hosted on `https://w2025-demo.deployed.space/api` |
| 94 | + |
| 95 | +To run any of these images use following command |
| 96 | + |
| 97 | +```bash |
| 98 | +docker run -it --rm -p 8080:80 ghcr.io/deployed/flashcards-workshop-web/flashcards-workshop-web:local |
| 99 | +``` |
| 100 | + |
| 101 | +This will run the image and expose frontend on `http://localhost:8080` |
| 102 | + |
| 103 | +## 📦 Environment Variables |
| 104 | + |
| 105 | +- `VITE_API_URL` - Backend API URL |
| 106 | + |
| 107 | +## 🌐 Deployment |
| 108 | + |
| 109 | +The application is configured for deployment using GitHub Container Registry (ghcr.io) with both local and production builds available. |
0 commit comments