Skip to content

PolThm/bailapp

Repository files navigation

Bailapp ๐Ÿ’ƒ๐Ÿ•บ

License: MIT

A modern PWA application for creating choreographies, learning new moves, and tracking your dance progress.

Try it now: bailapp.web.app

Features

  • ๐Ÿ“ฑ Mobile-First - Optimized for mobile with touch-friendly UI and bottom navigation
  • ๐ŸŽญ Learn - Browse and learn new dance moves
  • ๐ŸŽจ Create - Design and save your own choreographies
  • ๐Ÿ“Š Progress - Track your dance journey and improvements
  • ๐ŸŒ Multilingual - Full support for English, French, Spanish and Italian
  • ๐Ÿ“ฒ PWA - Install on any device and use offline
  • ๐Ÿ”’ Optional Auth - Explore freely, sign in only when needed
  • โšก Fast - Code splitting, lazy loading, and optimized caching

Tech Stack

Frontend

  • React 19 with TypeScript (mobile-optimized)
  • Vite 5 for fast development with code splitting
  • TailwindCSS 3.4 + Shadcn UI for touch-friendly components
  • React Query 5 for data fetching
  • react-i18next 15 for internationalization
  • Firebase SDK 11 for authentication and data
  • Mobile-First Design with bottom navigation and safe areas

Backend

  • Firestore for database
  • Firebase Auth (Google)
  • Firebase Hosting

Getting Started

Prerequisites

  • Bun installed (alternatively, you can use "yarn" or "npm")

Installation

  1. Clone the repository

    git clone https://github.com/PolThm/bailapp.git
    cd bailapp
  2. Install dependencies

    bun install
  3. Start development server

    bun dev

    The app will be available at http://localhost:5173

Firebase Emulators (Optional)

To develop locally with Firebase emulators:

bun emu

This will start:

  • Firestore emulator
  • Auth emulator
  • Hosting emulator

Available Commands

Command Description
bun dev Start development server
bun build Build for production
bun preview Preview production build
bun deploy Deploy to Firebase
bun deploy:hosting Deploy hosting
bun emu Start Firebase emulators
bun lint Lint code
bun format Format code with Prettier
bun type-check Check TypeScript types
bun ngrok Start ngrok for tunneling

Project Structure

bailapp/
โ”œโ”€โ”€ apps/
โ”‚   โ””โ”€โ”€ web/                  # Frontend React app
โ”‚       โ”œโ”€โ”€ public/
โ”‚       โ”‚   โ”œโ”€โ”€ icons/        # PWA icons, favicons
โ”‚       โ”‚   โ”œโ”€โ”€ images/       # UI images (logos, illustrations)
โ”‚       โ”‚   โ”œโ”€โ”€ manifest.webmanifest
โ”‚       โ”‚   โ””โ”€โ”€ browserconfig.xml
โ”‚       โ””โ”€โ”€ src/
โ”‚           โ”œโ”€โ”€ components/   # Reusable components
โ”‚           โ”œโ”€โ”€ context/      # React Context providers
โ”‚           โ”œโ”€โ”€ hooks/        # Custom hooks
โ”‚           โ”œโ”€โ”€ locales/      # Translation files
โ”‚           โ”œโ”€โ”€ pages/        # Page components
โ”‚           โ”œโ”€โ”€ config/       # Configuration files
โ”‚           โ”œโ”€โ”€ data/         # Video lists and other data
โ”‚           โ”œโ”€โ”€ App.tsx
โ”‚           โ””โ”€โ”€ main.tsx
โ”œโ”€โ”€ firebase.json
โ”œโ”€โ”€ firestore.rules
โ”œโ”€โ”€ .firebaserc
โ”œโ”€โ”€ package.json
โ””โ”€โ”€ tsconfig.base.json

Internationalization

The app supports four languages:

  • ๐Ÿ‡ฌ๐Ÿ‡ง English (default)
  • ๐Ÿ‡ซ๐Ÿ‡ท French
  • ๐Ÿ‡ช๐Ÿ‡ธ Spanish
  • ๐Ÿ‡ฎ๐Ÿ‡น Italian

Translation files are located in apps/web/src/locales/.

Mobile-First Architecture

Bailapp is designed mobile-first with:

  • โœ… Touch-optimized UI (44px minimum touch targets)
  • โœ… Bottom navigation bar (5 main items)
  • โœ… Safe area support (iPhone X+ notches)
  • โœ… Responsive typography and spacing
  • โœ… Performance optimized (code splitting, caching)
  • โœ… PWA ready (installable, offline mode)

Authentication Flow

The app follows an "optional authentication" pattern:

  • All pages are accessible without login
  • Users can browse and explore freely
  • Authentication is required only when trying to save data (choreographies, progress)
  • A modal prompts users to sign in when needed

Deployment

  1. Build the project

    bun build
  2. Deploy to Firebase

    bun deploy

Your app will be live at https://bailapp.web.app

Contributing

Contributions are welcome! Please read our Contributing Guide for details on how to contribute to this project.

License

MIT - see LICENSE file for details.

About

A modern PWA app for creating choreographies, learning new moves, and tracking your dance progress

Topics

Resources

License

Contributing

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors