🔗 BlockSim - Interactive Blockchain Learning Platform

An educational blockchain visualization tool built with React, designed to help users understand blockchain technology through interactive demonstrations.

✨ Now Production-Ready with Enhanced UI/UX, Performance Optimizations, and Deployment Configuration!

🚀 Features

• SHA-256 Hashing Visualizer: Real-time cryptographic hash computation with avalanche effect demonstration
• Proof of Work Mining: Interactive mining simulator with adjustable difficulty (1-6 levels)
• Blockchain Explorer: Visual blockchain with validation and tampering detection
• Cryptocurrency Wallets: Key pair generation (secp256k1) and transaction signing (ECDSA)
• Transaction System: Full transaction lifecycle from creation to mining with mempool
• Mobile Responsive: Optimized for desktop, tablet, and mobile devices
• Accessibility: WCAG AA compliant with keyboard navigation and screen reader support
• Data Persistence: Save and load blockchain state with localStorage integration

📦 Quick Start

Development

1. Clone the repository

git clone <repository-url>
cd blocksim

2. Install dependencies

npm install

3. Start development server

npm run dev

4. Open your browser Navigate to http://localhost:3000

Production Deployment

One-Click Deploy to Vercel:

Manual Deploy:

# Build for production
npm run build

# Preview production build
npm run preview

# Deploy to Vercel
vercel --prod

See DEPLOYMENT.md for detailed deployment instructions.

🛠️ Tech Stack

• Frontend Framework: React 18.2.0
• Build Tool: Vite 5.0.0 (with optimized production config)
• Styling: Tailwind CSS 3.3.5
• Animations: Framer Motion 10.16.4
• Cryptography:
  • crypto-js 4.2.0 (SHA-256)
  • elliptic 6.5.4 (ECDSA signatures, secp256k1)
• Visualization: D3.js 7.8.5
• Deployment: Vercel (with CI/CD via GitHub Actions)

📁 Project Structure

blocksim/
├── src/
│   ├── components/
│   │   ├── layout/
│   │   ├── visualizers/
│   │   └── common/
│   ├── pages/
│   ├── utils/
│   │   ├── blockchain/
│   │   └── helpers/
│   ├── hooks/
│   ├── styles/
│   ├── constants/
│   ├── App.jsx
│   ├── main.jsx
│   └── index.css
├── public/
├── index.html
├── package.json
└── README.md

🎯 Usage

Hashing Demonstration

1. Navigate to the Hash Visualizer
2. Enter any text to see SHA-256 hash
3. Try the avalanche effect demo to see how small changes create completely different hashes

Mining Blocks

1. Open the Mining Visualizer
2. Adjust the difficulty level (1-6)
3. Enter block data
4. Click "Start Mining" to see proof-of-work in action

Blockchain Exploration

1. View the blockchain visualization
2. Add new blocks with custom data
3. Try tampering with a block to see validation fail
4. Explore transaction history

Wallet & Transactions

1. Create a new wallet (generates public/private key pair)
2. Fund wallets through mining rewards
3. Create and sign transactions
4. Mine blocks to confirm transactions

🔒 Security Notes

• Private keys are generated in-browser and never sent to any server
• This is an educational tool - do not use for real cryptocurrency
• Private keys are stored in browser memory - clear on page refresh
• Always keep private keys secure in production applications

📚 Learning Objectives

• Understand cryptographic hash functions
• Learn proof-of-work consensus mechanism
• Explore blockchain immutability
• Grasp public-key cryptography
• Visualize distributed ledger technology

🤝 Contributing

Contributions are welcome! Please feel free to submit pull requests or open issues for bugs and feature requests.

📄 License

MIT License - feel free to use this project for educational purposes.

🙏 Acknowledgments

• Built as an educational tool to demystify blockchain technology
• Inspired by blockchain pioneers and cryptocurrency innovations
• Thanks to the open-source community for amazing libraries

📊 Performance

• Lighthouse Score: 90+ (target)
• First Contentful Paint: < 1.5s
• Time to Interactive: < 3.5s
• Bundle Size: < 500KB (initial, with code splitting)

📖 Documentation

• START_HERE.md - Quick orientation guide
• QUICKSTART.md - 2-minute setup guide
• SETUP.md - Detailed installation guide
• FEATURES.md - Complete feature list
• DEPLOYMENT.md - Production deployment guide
• PRODUCTION_CHECKLIST.md - Pre-deployment checklist
• PRODUCTION_ENHANCEMENTS.md - Recent improvements

🎯 Browser Support

• Chrome/Edge 90+
• Firefox 88+
• Safari 14+
• Opera 76+
• Mobile browsers (iOS Safari, Chrome Mobile)

📞 Support

For questions or issues:

• Open a GitHub Issue
• Check existing documentation
• Review the FAQ in About page

🗺️ Roadmap

• Core blockchain functionality
• Transaction system with wallets
• Mobile responsive design
• Production deployment ready
• PWA offline support
• Multi-language support
• Advanced tutorials
• Community features

---

Built with ❤️ for blockchain education

Production Ready ✅ | Version 1.0.0 | MIT License