Live app guide

Notebook Studio User Guide

A complete user page for your live app, with practical steps, stack details, and the fastest way to get started.

Open AppSign Up / Sign In

Step-by-Step: How Users Work in This App

Step 1

Upload Your CSV

Choose any raw CSV file and let Notebook Studio parse it instantly in the browser.

Step 2

Auto Clean Data

Headers are normalized, whitespace is trimmed, empty rows are removed, and duplicates are filtered.

Step 3

Download Outputs

Get a cleaned CSV and a generated Jupyter notebook template for repeatable workflows.

Step 4

Run Interactive Python

Use in-browser Pyodide cells to inspect, transform, and experiment with your data.

Step 5

Explore Visualizations

Generate chart-based insights from cleaned data using the built-in visualization panel.

Step 6

Use Secure Sign-In

Access protected features through verified email/password authentication with Firebase.

How This Project Was Completed

Build progression from initial setup to full interactive live app.

Phase 1

Foundation

Set up Next.js app structure, routing, core UI shell, and Firebase integration points.

Outcome: A stable app foundation and auth-ready architecture.

Phase 2

CSV Processing Engine

Implemented CSV upload, parsing, cleanup logic, and download generation for cleaned outputs.

Outcome: Users can transform noisy CSV files into ready-to-use data.

Phase 3

Interactive Notebook Runtime

Integrated Pyodide for browser-side Python execution with editable cells and output rendering.

Outcome: Users can run notebook-like workflows without any backend Python server.

Phase 4

Analytics and UX

Added visualization modules, motion system, interactive cards, and route transitions.

Outcome: A more visual, animated, and guided product experience.

Complete Workflow Guide

End-to-end user journey with expected outputs and best-practice tips.

Step 1

Open the app and upload a CSV file.

Result: The file is parsed in-browser and validated.

Tip: Use standard CSV headers for best chart suggestions.

Step 2

Allow the cleaning pipeline to run.

Result: Headers are normalized, whitespace is trimmed, and empty/duplicate rows are removed.

Tip: Review the cleanup summary card before exporting.

Step 3

Download cleaned CSV and generated notebook.

Result: You get reusable outputs for analytics and automation.

Tip: The notebook includes step-by-step data cleaning logic.

Step 4

Use the Interactive Notebook tab.

Result: Run and edit Python code cells directly in your browser.

Tip: Start with the predefined cells before writing custom code.

Step 5

Open Visualizations.

Result: Explore automatic charts from cleaned data.

Tip: Try both standard and custom chart modes.

Step 6

Sign up or sign in with email and password.

Result: Access protected dashboard/admin routes.

Tip: New users must verify email before first login.

Technology Used to Build This App

This is the exact development stack used in Notebook Studio.

Next.js 16 (App Router)React 19 + TypeScriptTailwind CSS 4 + custom animationsPapaParse (CSV parsing)Pyodide (in-browser Python)Firebase Auth + FirestoreChart.js + react-chartjs-2

Frontend Framework

Next.js 16, React 19, TypeScript

Provides fast routing, type safety, and maintainable component architecture.

Styling and Motion

Tailwind CSS 4 + custom CSS animation utilities

Enables responsive design and a polished animated UI with reusable classes.

Data Handling

PapaParse

Efficient CSV parsing and transformation directly on the client.

In-Browser Python

Pyodide (WebAssembly)

Runs Python notebook cells locally in the browser without backend compute.

Auth and Database

Firebase Auth (email/password + email verification), Firestore

Secure verified accounts plus user profile persistence and protected routes.

Data Visualization

Chart.js + react-chartjs-2

Interactive chart rendering for cleaned CSV data insights.

Complete Developer Guidance

  1. 1. Clone repository and install dependencies.
  2. 2. Configure Firebase environment variables in.env.local.
  3. 3. Runnpm run devand open/livefor this guide and/for the app.
  4. 4. Validate usingnpm run lintandnpm run buildbefore deploy.

Recommended command sequence

cp .env.local.example .env.local
npm install
npm run dev
npm run lint
npm run build

Troubleshooting and FAQ

Why does the Python runtime take time on first load?

Pyodide and Python packages are downloaded in the browser on first run. Later loads are faster due to caching.

Do I need a backend server for notebook execution?

No. Notebook code execution runs client-side in WebAssembly through Pyodide.

Do users need email verification?

Yes. On Sign Up, a verification email is sent. Users verify first, then log in with email and password.

Why do some charts not appear?

Some charts require specific column types or enough non-empty values. Try the Custom mode in Visualizations.

Start Using Notebook Studio

Everything is ready: upload CSV, clean data, run Python, generate charts, and access protected pages with secure email-link sign-in.

Go to AppOpen Dashboard