A comprehensive collection of puzzle games built with React, TypeScript, and modern web technologies. This project transforms a simple Wordle clone into a full-featured gaming platform with multiple games, statistics tracking, and a polished user experience.

• Frontend: React 19 + TypeScript + Tailwind CSS 4 + React Router
• Backend: Express API with comprehensive endpoints for all games
• Deployment: Production-ready monorepo deployed on Vercel
• Games: Wordle, Connections, Sudoku, and Numbers

Play Now: https://the-wordle-game.vercel.app/

Classic word-guessing game where you have 6 attempts to guess a 5-letter word. Each guess provides color-coded feedback.

Features:

• 5-letter word validation via API
• Color-coded feedback (correct, wrong position, not in word)
• On-screen keyboard with state tracking
• Physical keyboard support
• Win/loss tracking with localStorage

Find groups of four items that share something in common. Inspired by NYT's Connections game.

Features:

• 4 categories with varying difficulty levels
• Color-coded difficulty (Easy, Medium, Hard, Tricky)
• "One away" hints
• Mistake tracking (4 mistakes max)
• Shuffle and deselect functionality
• Dynamic puzzle generation

Fill a 9×9 grid with digits 1-9 such that each row, column, and 3×3 box contains all digits.

Features:

• Classic 9×9 Sudoku puzzles
• Visual highlighting for selected cells
• Keyboard and mouse input support
• Real-time validation
• Mistake tracking
• Pre-filled cells are locked

Use mathematical operations (+, -, ×, ÷) to reach a target number from a set of given numbers.

Features:

• 6 numbers to work with
• All four basic operations
• Undo functionality
• Operation history tracking
• Division requires whole number results
• Multiple difficulty levels

• React 19 - Latest React with concurrent features
• TypeScript 5.6+ - Type-safe development
• Tailwind CSS 4 - Utility-first styling
• React Router 6 - Client-side routing
• Vite 6 - Lightning-fast build tool
• Lucide React - Beautiful icon library
• Vercel Analytics - Usage tracking

• Node.js - JavaScript runtime
• Express - Web application framework
• TypeScript - Type-safe backend code
• Undici - Fast HTTP client
• CORS - Cross-origin resource sharing
• OpenAPI 3.0 - API documentation standard

• Error Boundaries - Graceful error handling
• Loading States - User feedback during API calls
• Local Storage - Statistics persistence
• Responsive Design - Mobile-first approach
• SEO Optimized - Meta tags and semantic HTML
• PWA Ready - Service worker and manifest

/
├── backend/
│   ├── index.ts              # Express API + all game endpoints
│   ├── favicon.ico           # API favicon
│   ├── package.json          # Backend dependencies
│   ├── tsconfig.json         # TypeScript config
│   └── vercel.json           # Serverless deployment config
│
├── src/
│   ├── components/           # Shared components
│   │   ├── ErrorBoundary.tsx # Error handling component
│   │   ├── Layout.tsx        # Page layout with navigation
│   │   ├── GameCard.tsx      # Game selection card
│   │   └── LoadingSpinner.tsx # Loading indicator
│   │
│   ├── pages/                # Game pages
│   │   ├── Home.tsx          # Home page with game selection
│   │   ├── WordleGame.tsx    # Wordle game logic
│   │   ├── ConnectionsGame.tsx # Connections game logic
│   │   ├── SudokuGame.tsx    # Sudoku game logic
│   │   └── NumbersGame.tsx   # Numbers game logic
│   │
│   ├── (Wordle components)   # Wordle components
│   │   ├── TileRow.tsx       # Row of 5 tiles
│   │   ├── Tile.tsx          # Individual tile
│   │   ├── Keyboard.tsx      # On-screen keyboard
│   │   ├── GameWon.tsx       # Victory screen
│   │   └── GameOver.tsx      # Game over screen
│   │
│   ├── App.tsx               # Router configuration
│   └── main.tsx              # Application entry point
│
├── public/                   # Static assets
│   ├── manifest.json         # PWA manifest
│   └── (favicon files)       # App icons
│
├── package.json              # Frontend dependencies
├── vite.config.ts            # Vite configuration
├── tsconfig.json             # TypeScript config
└── README.md                 # This file

• Node.js v16+
• npm or yarn
• (Optional) Vercel CLI for deployment

# Clone the repository
git clone https://github.com/hoangsonww/The-Wordle-Game.git
cd The-Wordle-Game

# Install frontend dependencies
npm install

# Install backend dependencies
cd backend
npm install
cd ..

# From project root
npm run dev

Opens at http://localhost:4260

# From backend directory
cd backend
npm run build    # Compile TypeScript
npm start        # Start Express server

Runs at http://localhost:3001

# Frontend build
npm run build
# Output: dist/

# Backend build
cd backend
npm run build
# Output: backend/dist/

• Swagger UI: https://wordle-game-backend.vercel.app/api-docs
• OpenAPI Spec: https://wordle-game-backend.vercel.app/swagger.json

# Get a random word for Wordle
curl https://wordle-game-backend.vercel.app/api/random-word

# Validate a word
curl https://wordle-game-backend.vercel.app/api/word-valid/hello

# Get a Connections puzzle
curl https://wordle-game-backend.vercel.app/api/connections/puzzle

# Get a Sudoku puzzle
curl https://wordle-game-backend.vercel.app/api/sudoku/puzzle

# Get a Numbers puzzle
curl https://wordle-game-backend.vercel.app/api/numbers/puzzle

All pages feature a beautiful animated gradient background that transitions smoothly between colors:

• Pink (#ff6ec4)
• Purple (#7873f5)
• Green (#4ade80)
• Yellow (#facc15)

• Glass morphism effects (backdrop blur)
• Rounded corners and shadows
• Responsive design for all screen sizes
• Accessible color contrasts
• Smooth transitions and animations

• Lime Green - Correct (Wordle) / Easy (Connections)
• Yellow - Wrong position (Wordle) / Medium (Connections)
• Orange - Hard difficulty (Connections)
• Purple - Tricky difficulty (Connections)
• Blue - Sudoku selections
• Various - Numbers game operations

Game statistics are stored in browser localStorage:

• Wordle wins
• Connections puzzles solved
• Sudoku puzzles completed
• Numbers puzzles solved

View your stats on the home page!

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel --prod

The monorepo structure automatically deploys:

• Frontend as static site
• Backend as serverless functions

1. Build frontend: npm run build
2. Build backend: cd backend && npm run build
3. Deploy dist/ to static hosting
4. Deploy backend/ to Node.js hosting

# Run tests (if configured)
npm test

# Type checking
npm run build

# Linting
npm run lint

# Format code
npm run format

No environment variables required! The app works out of the box.

Optional:

• PORT - Backend server port (default: 3001)

1. Create game component in src/pages/
2. Add route in src/App.tsx
3. Add API endpoint in backend/index.ts
4. Add game card to src/pages/Home.tsx

• Modify gradient colors in Layout component
• Update Tailwind classes in components
• Adjust styles.css for global styles

This project is licensed under the MIT License. See the LICENSE file for details.

Son Nguyen

• GitHub: @hoangsonww
• Website: https://sonnguyenhoang.com

• Original Wordle game by Josh Wardle
• NYT Connections for game inspiration
• React and TypeScript communities
• Vercel for hosting platform

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the project
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

For issues, questions, or suggestions:

• Open an issue on GitHub
• Contact via email: info@example.com

Made with ❤️ by Son Nguyen

⭐ Star this repo if you find it helpful!