https://github.com/jackccrawford/msona
mSona is the first in a series of apps by mVara
https://github.com/jackccrawford/msona
Last synced: 4 months ago
JSON representation
mSona is the first in a series of apps by mVara
- Host: GitHub
- URL: https://github.com/jackccrawford/msona
- Owner: jackccrawford
- License: mit
- Created: 2024-11-12T06:54:53.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-12T07:26:54.000Z (over 1 year ago)
- Last Synced: 2024-11-27T22:14:30.490Z (over 1 year ago)
- Language: TypeScript
- Size: 872 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Security: docs/SECURITY.md
Awesome Lists containing this project
README
# 🌟 mVara Suite (Beta)
A beautiful suite of applications that includes Luminary (quote discovery) and mSona (music discovery). Built with modern web technologies and designed for an exceptional user experience.
Live Demo: https://msona.netlify.app
## 🚀 Features
### 🎵 mSona: Music Discovery
- **Smart Search**: Find artists, songs, and albums with intelligent results
- **Audio Preview**: Listen to track previews with visualization
- **Track Analysis**: View detailed audio features and characteristics
- **Direct Spotify Integration**: Quick access to tracks on Spotify
- **Visual Analytics**: Track mood and energy visualization
- **Audio Controls**: Volume control and playback management
- **Favorites System**: Save and manage your favorite tracks
### 🌟 Luminary: Quote Discovery
- **AI Transformations**: Transform quotes using Grok
- **Text-to-Speech**: Listen to quotes with ElevenLabs voices
- **Smart Categories**: Intelligently organized quotes
- **Favorites System**: Save and manage your favorite quotes
- **PDF Export**: Generate beautiful quote collections
- **Mobile Optimized**: Vertical action buttons and responsive layout
## 🛠️ Tech Stack
- **Frontend**: React 18, TypeScript
- **Styling**: Tailwind CSS
- **Build**: Vite
- **Testing**: Vitest, Testing Library
- **APIs**:
- Spotify Web API
- X.AI (Grok)
- ElevenLabs
- Quotable API
## 📦 Installation
1. Clone the repository:
```bash
git clone https://github.com/yourusername/mvara-suite.git
```
2. Install dependencies:
```bash
cd mvara-suite
npm install
```
3. Set up environment variables:
```bash
cp .env.example .env
```
4. Configure API keys:
a) **Spotify API**
- Go to [Spotify Developer Dashboard](https://developer.spotify.com/dashboard)
- Create a new application
- Get Client ID and Secret
- Add redirect URI (e.g., http://localhost:8888/callback)
- Select Web API scope
b) **ElevenLabs**
- Sign up at [ElevenLabs](https://elevenlabs.io)
- Get API key from your profile
c) **Grok (X.AI)**
- Get API key from [X.AI](https://x.ai)
- Ensure you have access to Grok beta
5. Start development server:
```bash
npm run dev
```
## 🚀 Deployment
### Netlify (Recommended)
1. Push to GitHub:
```bash
git init
git add .
git commit -m "Initial commit"
git push
```
2. Connect to Netlify:
- Sign up/login to [Netlify](https://netlify.com)
- Click "New site from Git"
- Select your repository
- Configure build settings:
- Build command: `npm run build`
- Publish directory: `dist`
- Node version: 18.x
3. Set environment variables:
- Go to Site settings > Environment variables
- Add all variables from `.env`
- Deploy triggers automatically
### Security Notes
- API keys are stored securely in Netlify
- Keys never exposed in client-side code
- All API calls routed through serverless functions
- Rate limiting and error handling included
## 📝 License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## 🙏 Acknowledgments
- Music data from [Spotify Web API](https://developer.spotify.com/documentation/web-api)
- Quote data from [Quotable API](https://github.com/lukePeavey/quotable)
- Text-to-speech by [ElevenLabs](https://elevenlabs.io)
- Icons by [Lucide](https://lucide.dev)
- Development environment by [bolt.new](https://bolt.new)
---
Made with ❤️ by the mVara team