TechMind - Three Tech Words 🚀

Tech, Explained Simply

Demystifying technology, three words at a time.

Detailed Step-by-Step Guide available here

🌟 Features

Core Features

• Three-Word Explanations: Get concise, easy-to-understand explanations for tech terms
• Multiple Explanation Modes:
  • 🖥️ Normal (Expert View)
  • 😄 Fun (Clever & Witty)
  • 😤 Frustrated (Developer Pain)
  • 👶 Kid-Friendly (Simple Explanations)

Special Features

• Matrix Mode: Type /t or /transform before your term for a cool Matrix-style output
• GitHub Authentication: Track your learning progress with GitHub login
• Learning Streaks: Keep track of your searched terms and build streaks
• Shareable Stats Card: Generate and download beautiful stats cards showing your learning journey
• GitHub Stats: View your GitHub activity and contributions directly in your profile

Technical Features

• Real-time Processing: Instant explanations powered by advanced AI
• Responsive Design: Works seamlessly on all devices
• Modern UI: Beautiful, neon-themed interface with glow effects
• Persistent Storage: All your searches and streaks are saved in Supabase

🛠️ Tech Stack

• Frontend:

  • React with TypeScript
  • TailwindCSS for styling
  • Framer Motion for animations
  • Shadcn/ui for UI components

• Backend:

  • Node.js with Express
  • Supabase for database
  • GitHub OAuth for authentication

• AI Integration:

  • OpenAI for generating explanations
  • Custom prompt engineering for accurate responses

🚀 Getting Started

1. Clone the repository:

   git clone https://github.com/rohitg00/threetechwords.git
   cd threetechwords

2. Install dependencies:

   npm install

3. Set up environment variables: Create a .env file with:

   DATABASE_URL=your_supabase_db_url
   SUPABASE_URL=your_supabase_project_url
   SUPABASE_ANON_KEY=your_supabase_anon_key
   SUPABASE_SERVICE_ROLE=your_supabase_service_role
   OPENAI_API_KEY=your_openai_api_key
   GITHUB_CLIENT_ID=your_github_client_id
   GITHUB_CLIENT_SECRET=your_github_client_secret
   SESSION_SECRET=your_session_secret

4. Start the development server:

   npm run dev

📱 Features in Detail

1. Explanation Modes

• Normal Mode: Technical, accurate explanations
• Fun Mode: Witty and clever interpretations
• Frustrated Mode: Real developer experiences
• Kid Mode: Simple, easy-to-understand explanations

2. Matrix Mode

• Type /t or /transform before any term
• Get Matrix-style animated responses
• Cool ASCII art animations
• Binary-enhanced output

3. Stats Tracking

• Track total searches
• Count unique terms
• Monitor search streaks
• Generate shareable stats cards
• View GitHub contributions and activity

4. User Experience

• Smooth animations
• Terminal-style interface
• Responsive design
• Dark theme with neon accents

🎨 UI/UX Features

• Neon Glow Effects: Beautiful glow effects on buttons and cards
• Terminal Aesthetics: Command-line inspired design
• Animated Transitions: Smooth page and component transitions
• Loading States: Elegant loading animations
• Toast Notifications: User-friendly notifications
• Mobile Optimization: Fully responsive on all devices

🔒 Security

• Secure GitHub OAuth integration
• Environment variable protection
• Session-based authentication
• Secure database connections

🌐 Live Demo

Visit threetechwords.com to try it out!

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🤝 Contributing

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

👨‍💻 Author

Rohit Ghumare

• Twitter: @ghumare64

---

Made with ❤️ by Rohit Ghumare

Website • Twitter