Translating Brain Signals into Text
Live Demo • Getting Started • Tech Stack • Project Structure
ThinkInk is a cutting-edge platform that translates brain signals (EEG/EMG) into text using advanced AI and machine learning technologies. This frontend application provides an intuitive, accessible interface for users to interact with neural data processing capabilities.
- 🧠 Neural Signal Processing — Upload and process EEG/EMG files in real-time
- 🤖 AI-Powered Translation — Convert brain signals to text using advanced ML models
- 🔐 Secure Authentication — Google OAuth integration with JWT token management
- 📱 Progressive Web App — Offline capabilities with service worker support
- ♿ Accessibility First — Designed specifically for users with speech impairments
- ⚡ Real-time Feedback — Toast notifications and smooth animations
| Category | Technologies |
|---|---|
| Framework |   |
| Styling |   |
| Routing |  |
| HTTP Client |  |
| Authentication |   |
| UI Components |   |
| PWA |   |
| Dev Tools |    |
| Runtime |  |
- React 18 — Modern React with concurrent features
- Vite — Lightning-fast build tool and dev server
- React Router DOM v7 — Client-side routing
- Tailwind CSS — Utility-first CSS framework
- Framer Motion — Production-ready motion library
- Lucide React — Beautiful & consistent icon pack
- Swiper — Modern touch slider
- Axios — Promise-based HTTP client
- React Hot Toast — Toast notifications
- React OAuth Google — Google OAuth integration
- JWT Decode — JSON Web Token decoder
- Vite PWA Plugin — Zero-config PWA framework
- Workbox Window — Service worker management
ThinkInk-Frontend/
├── 📁 public/ # Static assets
│ ├── robots.txt # SEO robots configuration
│ └── sitemap.xml # SEO sitemap
│
├── 📁 dev-dist/ # PWA service worker files
│ ├── sw.js # Service worker
│ └── workbox-*.js # Workbox runtime
│
├── 📁 src/ # Source code
│ ├── 📄 App.jsx # Root application component
│ ├── 📄 main.jsx # Application entry point
│ ├── 📄 index.css # Global styles
│ │
│ ├── 📁 api/ # API layer
│ │ ├── axiosInstance.jsx # Axios configuration
│ │ ├── auth.jsx # Authentication API
│ │ ├── register.jsx # Registration API
│ │ └── logout.jsx # Logout API
│ │
│ ├── 📁 assets/ # Static assets
│ │ └── 📁 images/ # Image files
│ │
│ ├── 📁 common/ # Reusable UI components
│ │ ├── AppleBtn.jsx # Apple sign-in button
│ │ ├── GoogleBtn.jsx # Google sign-in button
│ │ ├── CheckBox.jsx # Custom checkbox
│ │ ├── SwitchBtn.jsx # Toggle switch
│ │ ├── GreenTag.jsx # Status tag component
│ │ ├── Loader.jsx # Loading spinner
│ │ └── TopNav.jsx # Top navigation bar
│ │
│ ├── 📁 components/ # Feature components
│ │ ├── LanguageSelector.jsx # Language picker
│ │ ├── 📁 header/ # Header component
│ │ ├── 📁 hero/ # Hero section
│ │ ├── 📁 footer/ # Footer component
│ │ ├── 📁 articles/ # Articles display
│ │ ├── 📁 codeSample/ # Code examples
│ │ ├── 📁 fileupload/ # EEG/EMG file upload
│ │ ├── 📁 pricingCard/ # Pricing cards
│ │ ├── 📁 FQA/ # FAQ section
│ │ ├── 📁 sideMenu/ # Side navigation
│ │ ├── 📁 side-slider/ # Slider component
│ │ ├── 📁 sectionText/ # Text sections
│ │ ├── 📁 response-popup/ # Response modal
│ │ ├── 📁 Enterprise/ # Enterprise section
│ │ └── 📁 PATIENTS/ # Patients section
│ │
│ ├── 📁 context/ # React Context providers
│ │ └── UploadContext.jsx # File upload state
│ │
│ ├── 📁 global/ # Global utilities
│ │ └── styles.css # Global CSS variables
│ │
│ └── 📁 pages/ # Route pages
│ ├── About.jsx # About page
│ ├── Api.jsx # API documentation
│ ├── BluetoothConnect.jsx # Bluetooth device connection
│ ├── ComingSoon.jsx # Coming soon placeholder
│ ├── Contact.jsx # Contact form
│ ├── Login.jsx # Login page
│ ├── Register.jsx # Registration page
│ ├── Pricing.jsx # Pricing page
│ ├── Profile.jsx # User profile
│ └── NotFound.jsx # 404 page
│
├── 📄 index.html # HTML entry point
├── 📄 package.json # Dependencies & scripts
├── 📄 vite.config.js # Vite configuration
├── 📄 tailwind.config.js # Tailwind configuration
├── 📄 postcss.config.js # PostCSS configuration
├── 📄 eslint.config.js # ESLint configuration
├── 📄 Dockerfile # Docker configuration
└── 📄 README.md # Project documentation
- Bun (v1.0 or higher) — Fast all-in-one JavaScript runtime
# Install Bun (if not already installed)
curl -fsSL https://bun.sh/install | bash
# Clone the repository
git clone https://github.com/your-username/ThinkInk-Frontend.git
cd ThinkInk-Frontend
# Install dependencies
bun install# Start development server
bun run dev
# Run linting
bun run lint
# Setup git hooks
bun run prepare# Build for production
bun run build
# Preview production build
bun run previewThis project is optimized for deployment on Vercel:
- ✅ Automatic builds on push
- ✅ SEO optimization with sitemap.xml
- ✅ Progressive Web App capabilities
- ✅ Performance optimizations
- ✅ Docker support available
- Fork the repository
- Create a feature branch:
git checkout -b feat/new-feature - Commit changes:
git commit -m 'feat: add new feature' - Push to branch:
git push origin feat/new-feature - Submit a pull request
Please follow the Branch Naming Conventions and use conventional commits.
This project is licensed under the MIT License — see the LICENSE file for details.