bubblecode.studio/tutuview
✦ Interactive Dance App

TutuView
Pocket Ballet Studio

Experience the elegance of ballet through interactive 3D lessons, AI pose correction, and a supportive community β€” all in the palm of your hand.

🏠 πŸ” ❀️ πŸ‘€
9:41 πŸ“Ά πŸ”‹

🩰 TutuView

β–Ά
Grand JetΓ©
Intermediate Β· 12 min
Today's Progress
3 of 5 lessons complete
✨ What makes TutuView magical

Designed for dancers,
powered by AI.

From real-time feedback to curated playlists, TutuView brings the grace of ballet to your daily routine.

🩰

Interactive 3D Lessons

Learn with a 3D avatar that demonstrates every pliΓ©, tendu, and pirouette from any angle.

🧠

AI Pose Correction

Get real-time feedback on your form using your device's camera, powered by TensorFlow.js.

πŸ“ˆ

Progress & Goals

Track your flexibility, strength, and technique improvements with beautiful analytics.

🎡

Curated Playlists

Dance to the perfect rhythm with professionally curated playlists for every practice session.

⚑ The Development Process

Built with VSCode & modern tools.

From wireframe to deployment, here's how I crafted the TutuView app using my favorite tech stack.

01

Ideation & Design

Started with Figma to sketch out the user journey, wireframes, and the elegant ballet-inspired UI.

Figma
02

Code & Architecture

Set up the React Native project in VSCode, structured the components, and connected Firebase.

React Native Firebase
03

AI Integration

Integrated TensorFlow.js for pose detection, enabling real-time feedback directly on the device.

TensorFlow.js Node.js
πŸ–₯️ Under the Hood

How I built it with VSCode

I used Visual Studio Code as my primary IDE. The combination of ES7+ React/Redux/React-Native snippets, Prettier, and GitLens supercharged my productivity.

The real magic happened when I integrated the Live Share extension for pair programming and used the integrated terminal for running the Metro bundler and testing the app on an emulator.

 // App.js β€” Core structure
                        import React, { useState } from 'react';
                        import { NavigationContainer } from '@react-navigation/native';
                        import { createStackNavigator } from '@react-navigation/stack';

                        const Stack = createStackNavigator();

                        function App() {
                        return (
                        <NavigationContainer>
                        <Stack.Navigator screenOptions={{ headerShown: false }}>
                        <Stack.Screen name="Home" component={HomeScreen} />
                        <Stack.Screen name="Lesson" component={LessonScreen} />
                        </Stack.Navigator>
                        </NavigationContainer>
                        );
                        }

                        export default App;
                    
πŸ‘€ The Developer

Hope Tambeyi

Hope is a solo developer who loves crafting elegant digital experiences. With a background in design and a passion for movement, building TutuView was a dream project that combined art and code.

"I wanted to make ballet accessible to everyone, using the power of AI and beautiful interfaces."

🩰 TutuView's Philosophy

Grace meets technology.

TutuView is built on the belief that technology can be poetic. Every swipe, every tap, every animation is designed to feel as fluid as a ballet performance.

The app is a testament to how modern tools like React Native and TensorFlow.js can create deeply human experiences.

πŸ“¬ Let's Connect

Have a project in mind?

I'm always open to collaborating on creative, tech-driven projects. Reach out and let's make something beautiful.

πŸ“§
Email
tambeyihope@gmail.com
πŸ“±
WhatsApp
+263 078 664 1278
πŸ“
Studio
Harare, Zimbabwe
✨ Opening email...