Creative Development

DevHack Terminal Puzzle

An interactive terminal-style puzzle site revealing hackathon details through creative problem-solving.

DevHack Terminal Puzzle
View CodeTry It

Overview

A gamified marketing approach for Echelon Dev Society's hackathon, styled as a terminal interface. Users solve coding-themed puzzles to unlock information about the upcoming hackathon. Built with Next.js and Framer Motion, it features terminal-like animations, command processing, and interactive responses that engage potential participants while showcasing technical creativity.

Technologies Used

Next.jsTypeScriptFramer MotionTailwind CSSBunJS

Key Features

  • Terminal-style interface with realistic animations
  • Interactive command processing system
  • Progressive puzzle revelation system
  • Custom animations using Framer Motion
  • Easter eggs and hidden commands
  • Responsive design maintaining terminal aesthetics
  • Real-time command feedback and hints

Key Highlights

  • 1Creative marketing approach for hackathon promotion
  • 2Authentic terminal experience with modern animations
  • 3Engaging puzzle mechanics that test coding knowledge
  • 4Seamless integration of marketing content with gameplay

Challenges Overcome

  • Creating authentic terminal behavior with modern web tech
  • Balancing puzzle difficulty with accessibility
  • Implementing smooth animations without compromising performance
  • Managing state for multiple terminal commands and responses

Screenshots

Screenshot 1

Screenshot 1

Terminal boot-up animation with glowing green text

Screenshot 2

Screenshot 2

Terminal login interface with authentication prompt

Screenshot 3

Screenshot 3

Main terminal interface showing command input and response

Screenshot 4

Screenshot 4

Interactive puzzle solving interface with command history

Screenshot 5

Screenshot 5

Administrator view showing system controls and monitoring

Development Metrics

time To Complete

1 day

commit Count

9

Learning Journey

Time Investment

Research

30-45 minutes

Implementation

1.5 hours

Performance Metrics

Load Time

Initial load under 1.5s

Lighthouse Scores

Performance

96

/100

Accessibility

98

/100

SEO

100

/100

Best Practices

95

/100

Future Development

  • Multiple puzzle paths and difficulty levels
  • User progress tracking system
  • Interactive terminal tutorials
  • More complex command combinations
  • Additional terminal customization options