Nova is a custom, open-source smart display designed to transform any old computer into a personalized smart hub.

• Frontend: React 18 + TypeScript with Vite
• Backend: Flask with Spotify OAuth integration
• Build: Multi-stage Docker build (Node.js → Python)

Terminal 1 - Backend :

./start-backend.sh

Terminal 2 - Frontend :

npm install  # Si ce n'est pas déjà fait
npm run dev

Terminal 1 - Backend :

# Installer les dépendances Python si nécessaire
pip install -r requirements.txt

# Créer le fichier .env à partir de env.example
cp env.example .env
# Éditer .env et ajouter vos clés Spotify

# Démarrer le serveur Flask
python app.py

Terminal 2 - Frontend :

npm install
npm run dev

Le frontend sera accessible sur http://localhost:5173 et proxy les requêtes vers Flask sur http://localhost:5000.

npm install
npm run dev

The dev server runs on http://localhost:5173 with proxies to the Flask backend at http://localhost:5000.

npm run build

This generates the optimized React bundle in the dist/ folder, which Flask serves.

⚠️ Important : Le serveur backend Flask doit être démarré avant le frontend pour que l'application fonctionne.

1. Installer les dépendances Python :

pip install -r requirements.txt

2. Créer un fichier .env à partir de env.example et y ajouter vos clés Spotify :

cp env.example .env
# Éditer .env et ajouter vos clés

3. Démarrer le serveur Flask :

python app.py

Le serveur Flask sera accessible sur http://localhost:5000

4. Dans un autre terminal, démarrer le frontend :

npm run dev

Le frontend sera accessible sur http://localhost:5173 et proxy les requêtes vers Flask.

Set these in your .env file:

• SPOTIFY_CLIENT_ID: Your Spotify API client ID
• SPOTIFY_CLIENT_SECRET: Your Spotify API client secret
• FLASK_SECRET_KEY: Secret key for Flask sessions (optionnel en dev)
• SPOTIFY_REDIRECT_URI: OAuth redirect URI (par défaut: http://127.0.0.1:5000/callback)

docker-compose up --build

This uses a multi-stage build:

1. Node.js stage builds the React app
2. Python stage copies the built files and runs Flask

.
├── src/                    # React source code
│   ├── components/         # React components (Clock, Player, Settings, etc.)
│   ├── styles/            # Component CSS files
│   ├── utils/             # Utility functions (backgrounds, etc.)
│   ├── App.tsx            # Main app component
│   ├── main.tsx           # Entry point
│   ├── api.ts             # API utilities
│   └── types.ts           # TypeScript type definitions
├── public/                 # Static assets (fonts, backgrounds, logo)
│   └── backgrounds/       # Background images
├── dist/                  # Built React app (generated)
├── static/                # Legacy static files
├── app.py                 # Flask backend
├── start-backend.sh       # Script de démarrage du backend
├── package.json           # Node dependencies
├── tsconfig.json          # TypeScript config
├── vite.config.ts         # Vite bundler config
└── requirements.txt       # Python dependencies

• Real-time Clock: Updates every minute
• Spotify Integration: Displays currently playing track with album art
• Customizable Backgrounds: Choose from multiple background images
• Weather Widget: Display current weather (to be implemented)
• Settings Panel: Glassmorphism design with multiple configuration options
• Responsive Design: Works on desktop and mobile devices
• OAuth Flow: Secure Spotify authentication

Le serveur Flask n'est pas démarré. Lancez ./start-backend.sh ou python app.py dans un terminal séparé.

• Vérifiez que vos clés Spotify sont correctes dans le fichier .env
• Vérifiez les logs du serveur Flask pour plus de détails
• Si le token est expiré, supprimez le fichier .cache et ré-authentifiez-vous

Vous devez vous authentifier avec Spotify. L'application vous redirigera automatiquement vers la page d'authentification Spotify.