Danny  Alfredo  Rodriguez
CASE STUDY

Crosswordia

View GitHub

A full-stack web application that allows users to create, solve, and share crossword puzzles. The platform features an intuitive interface for designing custom crosswords of various sizes, a gallery of pre-made puzzles categorized by difficulty level, and user authentication for saving and tracking created puzzles.

TIMELINE

2022

ROLE

Full-Stack Developer

Crosswordia application screenshot

Technical Stack

Frontend

  • HTML, CSS, JavaScript
  • Simple Keyboard for virtual keyboard input
  • Dictionary API integration for word suggestions

Backend

  • Node.js, Express.js
  • MongoDB with Mongoose ODM
  • Passport.js with Google OAuth
  • Handlebars (express-handlebars)

Architecture

Backend Architecture

The application follows an MVC-like architecture:

  • Models: MongoDB schemas for Users and Crosswords
  • Routes: Express routes handling different application features
  • Views: Handlebars templates for rendering pages
  • Middleware: Authentication and session management

Database Schema

The application uses two main data models:

User Model

  • Google authentication details
  • Profile information (name, image)
  • Creation timestamp

Crossword Model

  • Puzzle metadata (name, size)
  • Solution data
  • Hints/clues organized by direction and position
  • Creator reference (user ID)
  • Creation timestamp

Key Features

1. Crossword Creation Interface

The creation interface (create.js) provides a dynamic grid-based editor with the following features:

  • Multiple grid size options (5x5, 10x10, 15x15)
  • Toggle between "blackout cells" and "typing" modes
  • Automatic highlighting of active word direction (across/down)
  • Hint/clue management system
  • Thesaurus integration for word suggestions
  • Virtual keyboard support for mobile devices

2. Solving Experience

The solving interface (solve.js) offers:

  • Interactive grid with automatic word selection
  • Synchronized hint highlighting
  • Mobile-friendly design with virtual keyboard
  • Visual feedback for correct/incorrect answers
  • Celebration animation upon puzzle completion

3. User Dashboard

Users can:

  • View all their created puzzles
  • Access puzzle statistics
  • Delete their puzzles
  • Share puzzles via unique links

4. Gallery

The gallery showcases puzzles with:

  • Difficulty filtering (Beginner, Intermediate, Advanced)
  • Thematic categorization with visual icons
  • Size indicators
  • Preview descriptions

Technical Challenges & Solutions

Challenge 1: Grid Interaction Logic

Creating an intuitive grid interaction system that handles both creation and solving modes required complex event handling. The solution involved:

  • Custom event listeners for cell selection
  • Direction toggling with visual indicators
  • Automatic word highlighting based on cell position
  • Keyboard navigation between cells

Challenge 2: Puzzle Data Structure

Designing a data structure to efficiently store and retrieve puzzle information required careful consideration. The solution uses:

  • A string-based solution grid representation
  • A structured object for hints organized by direction and position
  • Cell ID mapping for connecting grid positions to hints

Challenge 3: Mobile Responsiveness

Making the crossword grid usable on mobile devices presented unique challenges:

  • Implementation of a virtual keyboard
  • Touch-friendly cell selection
  • Responsive grid sizing based on device dimensions
  • Mobile-optimized hint display

Development Process

The application was built using modern web development practices:

  • Server Setup: Express.js with middleware configuration
  • Authentication: Google OAuth implementation with Passport.js
  • Database Integration: MongoDB connection with Mongoose schemas
  • Frontend Development: Interactive grid implementation with vanilla JavaScript
  • User Experience: Responsive design with intuitive controls

Conclusion

Crosswordia demonstrates effective full-stack development practices by combining:

  • Clean, modular JavaScript code
  • Intuitive user interface design
  • Secure authentication
  • Efficient database modeling
  • Responsive web design principles

The application successfully delivers an engaging platform for crossword enthusiasts to create, solve, and share puzzles across devices.

Back to Projects

Let's Build Something Amazing

I'm always looking for new challenges and interesting projects. If you have an idea or need consultation, I'd love to discuss how I can help bring your vision to life.

Get in Touch LinkedIn