A modern web application designed to make learning data structures engaging through interactive visualizations and gamification.
Live Demo | Documentation | Quick Deploy Guide
Portfolio Project: This deployed platform demonstrates modern web development and educational-software design with React, TypeScript, D3.js, and Firebase.
StackTrek is an interactive learning platform that transforms traditional data-structures education through modern web technologies.
Primary Goals:
- Create engaging interactive visualizations for core computer science data structures
- Implement gamification elements to increase student motivation and retention
- Support responsive learning experiences across desktop, tablet, and mobile devices
- Demonstrate modern web-development and educational-software techniques
Technical Achievements:
- Interactive visualization framework using React and D3.js
- Responsive design supporting desktop, tablet, and mobile devices
- TypeScript implementation with linting and formatting tooling
Core Data Structures:
- Arrays: Complete implementation with dynamic operations, sorting algorithms, and complexity analysis
- Linked Lists: Fully functional singly and doubly linked lists with pointer visualization
- Stacks: Complete LIFO operations with real-time push/pop animations and use case examples
- Queues: FIFO operations including priority queues and circular queue implementations
- Binary Trees: Hierarchical structures with all traversal algorithms (inorder, preorder, postorder)
- Hash Tables: Hash function visualization with collision resolution strategies
Educational Framework (Fully Operational):
- Interactive Tutorials: Step-by-step guided learning with immediate visual feedback
- Algorithm Visualizations: Working animations for sorting and searching algorithms
- Complexity Analysis: Real-time time and space complexity calculations and explanations
- Code Examples: Multi-language code snippets with syntax highlighting
- Progress Tracking: Comprehensive analytics showing learning progress and time spent
Engagement Systems:
- Experience Points: Functional reward system for completed tutorials and challenges
- Achievement System: 25+ working achievement badges for concept mastery
- Progress Tracking: Visual progress indicators and learning streak counters
- Interactive Mini-Games (Fully Functional):
- Tower of Hanoi: Complete implementation teaching recursive problem-solving
- Dijkstra's Shortest Path: Interactive pathfinding algorithm visualization
- Sorting Algorithm Race: Competitive sorting algorithm comparison tool
Advanced Data Structures (Planned for future releases):
- AVL Trees and Red-Black Trees
- Graph algorithms (advanced pathfinding)
- Segment Trees and Fenwick Trees
- Trie data structures
Accessibility work is in progress. The current application includes limited alternative text, focus styling, and reduced-motion handling; comprehensive keyboard and screen-reader support has not yet been implemented.
Live Application: https://stacktrek-app.netlify.app
Deployment Platform: Netlify (Free tier with automatic deployments)
- Build Time: ~2-3 minutes
- Global CDN: Fast loading worldwide
- HTTPS: Automatic SSL certificate
- Custom Domain: Optional upgrade available
Deploy Your Own Copy:
- Fork this repository
- Connect to Netlify via GitHub
- Automatic deployment on every push
- See Deployment Guide for detailed instructions
- Complete Feature List - Comprehensive list of all working features
- D3.js Visualizations - Advanced visualization implementation details
- Deployment Guide - Free deployment options and live demo setup
- Firebase Setup - Quick setup guide for backend services
- Detailed Firebase Guide - Complete backend configuration
┌─────────────────────────────────────────────────────────────┐
│ Presentation Layer │
├─────────────────────────────────────────────────────────────┤
│ React 18 + TypeScript │ Styled Components │ Framer Motion │
├─────────────────────────────────────────────────────────────┤
│ Application Layer │
├─────────────────────────────────────────────────────────────┤
│ Redux Toolkit │ React Router │ Custom Hooks │
├─────────────────────────────────────────────────────────────┤
│ Visualization Layer │
├─────────────────────────────────────────────────────────────┤
│ D3.js │ Canvas API │ WebGL (Future) │
├─────────────────────────────────────────────────────────────┤
│ Data & Services Layer │
├─────────────────────────────────────────────────────────────┤
│ Firebase │ Local Storage │ Analytics API │
└─────────────────────────────────────────────────────────────┘
- React 18: Component-based architecture for modular educational content
- TypeScript: Type safety for robust educational software development
- D3.js: Powerful data visualization capabilities for complex animations
- Styled Components: Theme-based styling for accessibility and customization
- Framer Motion: Smooth animations that enhance learning without distraction
- Firebase: Scalable backend for user management and learning analytics
- Vite: Fast development and optimized production builds
- React 18+ with TypeScript for type-safe component development
- Vite for fast development builds and optimized production bundles
- D3.js for interactive data visualizations
- Styled Components for component-scoped styling
- Framer Motion for smooth animations and transitions
- Redux Toolkit for predictable state management
- Netlify for hosting and continuous deployment
- GitHub for version control and collaboration
- Firebase for backend services (optional)
- Vite for optimized production builds
- ESLint and Prettier for consistent code formatting and quality
- Jest and React Testing Library are configured; automated test coverage has not yet been added
- Storybook for isolated component development and documentation
- Clone the repository:
git clone <repository-url>
cd gamify-data-structures- Install dependencies:
npm install- Copy environment variables:
cp .env.example .env- Start the development server:
npm run devThe application is ready for free deployment on multiple platforms. See Deployment Guide for detailed instructions.
Quick Deploy Options:
- Netlify: Automatic deployment from Git repository (recommended)
- Vercel: One-click deployment with GitHub integration
- GitHub Pages: Free hosting for static sites
Build for Production:
npm run build
npm run preview # Test production build locallyDevelopment:
npm run dev- Start development servernpm run build- Build for productionnpm run preview- Test production build locally
Code Quality:
npm run lint- Check code qualitynpm run test- Run test suitenpm run storybook- Component documentation
src/
├── components/ # Reusable UI components
│ ├── common/ # Generic components (Button, Avatar, etc.)
│ └── layout/ # Layout components (Header, Sidebar, etc.)
├── pages/ # Page components
├── hooks/ # Custom React hooks
├── store/ # Redux store and slices
├── styles/ # Theme and global styles
├── types/ # TypeScript type definitions
├── utils/ # Utility functions
└── assets/ # Static assets
The application uses a comprehensive design system with:
- Consistent color palette
- Typography scale
- Spacing system
- Component variants
- Responsive breakpoints
- Modern React 18 architecture with TypeScript for type safety
- Responsive design supporting desktop, tablet, and mobile devices
- Dark and light theme system with user preference persistence
- Complete navigation and routing system
- Comprehensive component library documented in Storybook
- Redux Toolkit state management implementation
- Error boundaries and loading states for robust user experience
- Interactive data structure visualizations with D3.js integration
- Professional-grade animations and smooth transitions
- Code editor with syntax highlighting for multiple languages
- Complete tutorial system with step-by-step guidance
- Advanced gamification system with achievement tracking
- User authentication and personalized learning profiles
- Advanced graph algorithms and tree balancing visualizations
- Fork the repository
- Create a feature branch:
git checkout -b feature/descriptive-name - Commit your changes following conventional commit format
- Push to the branch:
git push origin feature/descriptive-name - Open a Pull Request with detailed description
Code Quality:
- ESLint for code analysis and consistency
- Prettier for automated code formatting
- Husky for pre-commit quality checks
- Conventional commit messages for clear project history
- Windows users may need to adjust PowerShell execution policy for npm scripts
- Some advanced features are planned for future development phases
This project is licensed under the MIT License - see the LICENSE file for details.
- Array Operations: Complete implementation with insert, delete, search operations and smooth D3.js transitions
- Linked List: Node-based visualization with animated pointer updates and memory management concepts
- Stack: Full LIFO operations with gradient effects and real-time visual feedback
- Queue: Complete FIFO operations with color-coded indicators
- D3.js Integration: Professional-grade SVG animations with custom easing functions
- Code Editor: Multi-language syntax highlighting with comprehensive language support
- Tutorial System: Interactive guided learning with immediate visual feedback
- Responsive Design: Optimized experience across all device types and screen sizes
Visit the deployed application to explore:
- Interactive visualizations for each implemented data structure
- Real-time operation feedback and visual animations
- Comprehensive complexity analysis and explanations
- Code examples in multiple programming languages