EVM Masterclass

A high-performance interactive presentation deck for technical interviews focusing on Ethereum, EVM, and Solidity standards. Built with React, TypeScript, and Vite for a smooth, modern presentation experience.

🎯 Overview

EVM Masterclass is an interactive presentation tool designed for technical interviews and educational sessions about Ethereum, the Ethereum Virtual Machine (EVM), and Solidity token standards. It features an AI-powered assistant that provides real-time technical explanations and answers questions about the content.

✨ Features

• Interactive Slide Deck: Navigate through comprehensive slides covering:

  • Blockchain Basics
  • Consensus Mechanisms (PoW vs PoS)
  • EVM Architecture
  • Solidity Smart Contracts
  • ERC-20 Token Standard
  • ERC-721 NFT Standard
  • ERC-1155 Multi-Token Standard
  • Interactive Q&A Session

• Speaker Notes: Built-in speaker notes overlay to help presenters deliver the content effectively

• Keyboard Navigation: Navigate slides using arrow keys for a smooth presentation experience

• Modern UI: Beautiful, dark-themed interface with smooth animations and transitions

• Progress Tracking: Visual progress bar showing presentation completion

• Slide Menu: Quick navigation menu to jump to any slide

🛠️ Tech Stack

• React 19 - UI framework
• TypeScript - Type safety
• Vite - Build tool and dev server
• Lucide React - Icon library
• Recharts - Data visualization (for charts in slides)

📁 Project Structure

evm-masterclass/
├── components/
│   ├── slides/          # Individual slide components
│   │   ├── IntroSlide.tsx
│   │   ├── BlockchainBasics.tsx
│   │   ├── Consensus.tsx
│   │   ├── EvmArchitecture.tsx
│   │   ├── SolidityIntro.tsx
│   │   ├── Erc20Demo.tsx
│   │   └── Erc721Demo.tsx
│   ├── AiAssistant.tsx  # AI chat interface
│   ├── CodeBlock.tsx    # Code display component
│   └── Layout.tsx       # Main layout and navigation
├── data/
│   └── presentationScript.ts  # Speaker notes
├── constants.ts         # Slide metadata and constants
├── types.ts            # TypeScript type definitions
├── App.tsx             # Root component
└── index.tsx           # Entry point

🚀 Getting Started

Prerequisites

• Node.js (v18 or higher recommended)
• npm or yarn

Installation

1. Clone the repository:

git clone <repository-url>
cd evm-masterclass

2. Install dependencies:

npm install

3. Create a .env file in the root directory:

4. Start the development server:

npm run dev

5. Open your browser and navigate to http://localhost:3000

🎮 Usage

Navigation

• Arrow Keys: Navigate between slides (Left/Right)
• Menu Button: Open slide index to jump to any slide
• Speaker Notes Button: Toggle speaker notes overlay
• AI Assistant Button: Open/close the AI co-pilot chat

Presentation Tips

• Use fullscreen mode (F11) for the best presentation experience
• The AI assistant is context-aware and will answer questions based on the current slide
• Speaker notes provide talking points for each slide
• Progress bar at the top shows presentation completion

🔧 Development

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build

Environment Variables

Adding New Slides

1. Create a new slide component in components/slides/
2. Add the slide type to types.ts (SlideType enum)
3. Add slide metadata to constants.ts (SLIDE_META array)
4. Add the slide case to the renderSlide function in Layout.tsx
5. Add speaker notes to data/presentationScript.ts (optional)

🏗️ Building for Production

npm run build

The production build will be output to the dist/ directory. You can preview it with:

npm run preview

📝 Notes

• The presentation is optimized for fullscreen viewing
• All slides are responsive and work on various screen sizes
• The project uses Tailwind CSS (via Vite) for styling

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

This project is private and proprietary.

---

Built with ❤️ for technical interviews and blockchain education.