Palabritas is a word puzzle game where players unscramble words and discover all the words hidden within them. Built with Angular 20 and NgRx for state management.

You're given a scrambled word and must:

1. Unscramble the main word
2. Find all possible words contained within it

For example, if your word unscrambles to "SECURE", you can also find "CURE", "SURE", "RESCUE", and more!

Words are sourced from Webster's Unabridged Dictionary (August 22, 2009) provided by Project Gutenberg. While not perfect, it provides a solid foundation for the game.

• Node.js (v18+ recommended)
• npm (comes with Node.js)
• Angular CLI (automatically installed with dependencies)

1. Clone the repository

   git clone https://github.com/tarrball/palabritas.git
   cd palabritas

2. Install dependencies

   npm install

3. Start the development server

   npm start

4. Open your browser to http://localhost:4200

# Start development
npm start

# In another terminal, run tests
npm test

# Lint your code before committing
npm run lint

# Build for production
npm run build

• Frontend: Angular 20 with Angular Material
• State Management: NgRx (Store, Effects, Selectors)
• Styling: SASS with Angular Material theming
• Testing: Jasmine + Karma with ng-mocks
• Code Quality: ESLint with Angular and NgRx rules

Palabritas follows a clean, modular architecture built on Angular 18 best practices:

The codebase uses a numbered folder structure for logical organization:

• 1. features/ - UI components and Angular feature modules
• 2. store/ - NgRx state management (stores, actions, effects, reducers)
• 3. services/ - Injectable services for business logic and external APIs
• 4. shared/ - Shared utilities, types, and test helpers

Built on NgRx for predictable state management:

• Reactive Architecture: RxJS observables throughout the application
• Immutable Updates: Uses Immer for safe, readable state mutations
• Effect-driven Side Effects: Async operations and external API calls
• Type-safe Selectors: Memoized state derivations with full TypeScript support

Automatic game progress saving and restoration:

• Seamless Experience: Your game continues exactly where you left off
• Smart Hydration: State restored on startup, falls back to new game gracefully
• Transparent Operation: No impact on game logic or user interface

# Run tests once
npm test

# Run tests with coverage
npm test -- --code-coverage

# View coverage report
open coverage/index.html

Tests include:

• Unit tests for components, services, and NgRx store
• Mocking with ng-mocks and @faker-js/faker
• Coverage reports generated in coverage/ directory

1. Follow the installation steps above
2. Create a feature branch: git checkout -b feature/your-feature
3. Make your changes following the existing patterns
4. Run tests and linting: npm test && npm run lint
5. Build to ensure everything works: npm run build
6. Commit with conventional commit messages
7. Push and create a pull request

• ESLint: Configured with Angular and NgRx rules
• TypeScript: Strict type checking enabled
• SASS: Use kebab-case for component selectors
• Testing: Write tests for new features and bug fixes
• Commits: Follow Conventional Commits

Use our auto issue template for feature requests and bug reports.

This project is open source. See the repository for license details.

• SEO and Metadata: docs/seo.md - Complete guide to SEO implementation, social media optimization, and structured data

• Live Demo: palabs.app
• Issues: GitHub Issues
• Angular Docs: angular.io
• NgRx Docs: ngrx.io