Learn Crypto the Right Way.
A premium, beginner-friendly crypto education platform.
CryptoX is an educational platform designed to simplify cryptocurrency and blockchain concepts for beginners — without the noise, hype, or confusion.
It turns complex ideas into:
- clean UI
- simple explanations
- interactive learning experiences
No jargon without clarity. No theory without visuals.
Education should feel intuitive, calm, and empowering — not overwhelming.
CryptoX exists to help people actually understand crypto, not just hear about it.
- 🪩 Animated Hero Section — premium first impression
- 📚 Basics Section — crypto, blockchain, wallets, gas fees, NFTs, DeFi
- 🔒 Safety Section — scam awareness & best practices
- 🧭 Guided Learning Flow — step-by-step explanations
- 📊 Live Crypto Prices — real-time data via CoinGecko API
- 📖 Glossary — simple definitions with smooth accordions
- ❓ Interactive Quiz — test your understanding
- 🌗 Dark / Light Mode — smooth theme switching
- 📱 Fully Responsive — works beautifully on all devices
- Ultra-minimal, modern design
- Clean typography & strong visual hierarchy
- Micro-interactions and hover effects
- Scroll-based reveal animations
- Subtle motion — smooth, not distracting
- Designed like a premium tech product, not a blog
| Layer | Technology |
|---|---|
| Frontend | ⚛️ React.js (Vite) |
| Styling | 🎨 Tailwind CSS v4 |
| Animations | CSS + JavaScript |
| API | 📈 CoinGecko |
| Hosting | 🚀 Vercel |
| Tooling | npm · VS Code |
cryptox/
├─ public/
├─ src/
│ ├─ components/
│ │ ├─ Navbar.jsx
│ │ ├─ Hero.jsx
│ │ ├─ Basics.jsx
│ │ ├─ Safety.jsx
│ │ ├─ Guides.jsx
│ │ ├─ Prices.jsx
│ │ ├─ Glossary.jsx
│ │ ├─ Quiz.jsx
│ │ └─ Footer.jsx
│ ├─ hooks/
│ │ └─ useScrollAnimation.js
│ ├─ data/
│ │ └─ basicsContent.js
│ ├─ App.jsx
│ └─ index.css
├─ tailwind.config.js
├─ postcss.config.js
└─ package.json
- Start from the Hero section to understand the platform
- Explore Basics with expandable topics
- Learn Safety practices before diving deeper
- Check Live Prices for real-time data
- Use the Glossary to clarify terms
- Take the Quiz to reinforce learning
CryptoX is designed as a learning journey, not a static page.
- Interactive blockchain visualizations
- Wallet & transaction simulators
- User progress tracking
- Advanced quizzes & certifications
- Accessibility enhancements
- SEO optimization for educational reach
Built and designed with care by Abhra
Passionate about clean UI, strong UX, and meaningful learning experiences.
This project is licensed under the MIT License — feel free to use, modify, and build upon it.
Stay focused, stay productive, and keep leveling up! — kaizenX out. ✌️