en pointe banner

en pointe

6 devlogs
3h 10m 55s

En Pointe is a beginner friendly ballet web app that helps new dancers learn the foundations of ballet in a fun, interactive way. I plan to update the app so that users can explore a library of classic ballet poses, read descriptions of each posit…

En Pointe is a beginner friendly ballet web app that helps new dancers learn the foundations of ballet in a fun, interactive way. I plan to update the app so that users can explore a library of classic ballet poses, read descriptions of each position, and follow along with an animated ballerina. Built with React, Tailwind CSS.

This project uses AI

I used Claude as a coding tutor and guide throughout this project. Claude helped me set up React and Tailwind CSS, explained concepts, and walked me through debugging errors step by step. AI was used for guidance and explanations.

Demo Repository

Loading README...

Maria Fujisawa

What I did today:

  • Drew my own ballerina character from scratch on iPad using Sketchbook
  • Replaced the placeholder SVG ballerina with my hand-drawn one

To do :
Draw more poses, Second Position, Plié, Arabesque etc.

Attachment
0
Maria Fujisawa

A few things i added today

  • Fact popup, clicking a pose now shows a fun ballet fact about it
  • Made the popup draggable, you can click and drag it anywhere on screen
  • Redesigned the left panel with elegant fonts and a pink border on the selected pose

Still working on:
Drawing my own ballerina character
Ballerina animations
3D angle rotation

Attachment
0
Maria Fujisawa

What I added:

  • welcome/title screen with an elegant font and Begin button
  • Hair color picker in the costume panel
  • Costume panel now has tutu, skin tone & hair color all in one place
  • Barre toggle button — users can now choose to dance with or without the barre
  • Improved the floor and barre positioning

Still working on:
Getting the ballerina perfectly positioned at the barre
Drawing my own ballerina character
Ballerina animations
More poses
Eventually 3D rotation when viewing dance moves

Attachment
0
Maria Fujisawa

A few things I added today:

  • Moved the costume picker into its own panel on the right side
  • Added skin tone selector with 6 inclusive options
  • Fixed the music player, tracks now work on the live Vercel deployment(used to only work with localhost)
  • Added 3 new poses: Passé, Tendu, and Port de Bras (8 poses total now!)
  • Upgraded the fonts to Cormorant Garamond and Montserrat

Still working on:

  • Getting the barre positioned perfectly
  • Drawing my own ballerina character
  • Adding 3D angle rotation
  • a beginner tips section??
Attachment
0
Maria Fujisawa

updates I’ve made today:

  • Costume color picker: you can now dress the ballerina in 6 different colors
  • Ballet studio background with a wooden floor and barre

still working on:

  • Getting the barre positioned perfectly behind the ballerina
  • Drawing my own custom ballerina character
Attachment
0
Maria Fujisawa

updates i’ve made:

  • Set up React + Vite + Tailwind CSS from scratch
  • Created a pose library with 5 ballet positions and descriptions
  • Built an animated SVG ballerina that reacts to selected poses
  • Added a music player with 3 classic ballet tracks (Swan Lake, Sylvia, The Nutcracker)
  • Deployed it live on Vercel
Attachment
0