Puzzle Port

Project Overview

Puzzle Port is an interactive, logic-based web game built using React.js that challenges users through multiple puzzle levels of increasing difficulty. Each level presents timed questions where players must think quickly and accurately to progress.

The project features smooth transitions, real-time feedback messages (“Correct”, “Wrong”, “Time’s Up”), and a leaderboard to track performance. It provides an engaging platform to test reasoning and focus skills while demonstrating the power of modern front-end technologies such as React, Zustand, and Framer Motion.

Key Features

Multi-Level Gameplay: Multiple puzzle levels with progressive difficulty.
Per-Question Timer: Each question includes a countdown timer.
Instant Feedback System: Displays real-time responses for correct, wrong, or time-out answers.
Automatic Level Progression: Moves seamlessly to the next question or level.
Completion Summary: Shows total time, correct/wrong count, and streak stats after all levels.
Local Leaderboard: Stores best runs using localStorage for future sessions.
Glassmorphism UI: Stylish interface with smooth gradients and soft blur effects.
Fully Responsive: Optimized for mobile, tablet, and desktop.

Functionality

Initialization
- Loads puzzle data from puzzles.json.
- Initializes counters for streak, correct/wrong answers, and total time.
Question Flow
- Displays each question with multiple options.
- Player selects an answer → instant feedback (Correct/Wrong/Time’s Up).
- Timer counts down per question.
Level Progression
- Automatically moves to the next question or level upon completion.
- After finishing all levels, the “Run Finished” summary screen appears.
Run Summary
- Displays total time taken, correct and wrong answers, and current streak.
- Option to Save Run (adds to leaderboard) or Restart the challenge.
Leaderboard Storage
- Uses localStorage to save player name and performance stats.
- Data persists across sessions — visible even after reloading or reopening the app.