DataNova Web

A modern SvelteKit frontend application for DataNova, featuring user authentication and data management capabilities.

Features

Core Features

Modern UI with SvelteKit and Svelte 5
User authentication (registration, login)
Integration with FastAPI backend
Responsive design with Tailwind CSS
UI components from shadcn-svelte
Client-side only (static adapter)
TypeScript support

Advanced ML Features

Report Generation: Create and download comprehensive experiment reports
Algorithm Recommendations: AI-powered ML algorithm suggestions
Model Download: Download trained models directly from experiments
Enhanced Dashboard: Improved layout with quick actions and activity tracking
AI Configuration: User settings for Groq API integration
Custom Error Pages: Improved error handling and user experience

Data Analysis & Visualization

Interactive Charts: Real-time data visualization with multiple chart types
Data Tables: Advanced data grid with sorting, filtering, and cell viewing
Statistical Analysis: Comprehensive dataset profiling and insights
Export Capabilities: Download charts, reports, and datasets
Visual Data Explorer: Interactive data exploration tools

Workflow Management

Experiment Tracking: Complete ML experiment lifecycle management
Pipeline Builder: Visual data preprocessing pipeline creation
Model Comparison: Side-by-side performance analysis
Activity Monitoring: Track all user actions and system events
Lab Environment: Dedicated space for ML experimentation

User Experience

Multi-theme Support: Light/dark mode with system preference detection
Responsive Design: Mobile-first approach with tablet and desktop optimization
Real-time Updates: Live status updates for long-running operations
Progressive Enhancement: Works offline with cached data
Accessibility: WCAG compliant with screen reader support

Prerequisites

Node.js 18+ or Bun
DataNova Backend API running (default: http://localhost:8000)

Setup

1. Install Dependencies

# Using npm
npm install

# Using pnpm
pnpm install

# Using bun
bun install

2. Configure Environment Variables

Create a .env file in the root directory:

cp .env.example .env

Edit .env and configure the backend API URL:

PUBLIC_API_URL=http://localhost:8000/api/v1

For production, change this to your production API URL:

PUBLIC_API_URL=https://api.datanova.com/api/v1

Development

Start the development server:

npm run dev

# or start and open in browser
npm run dev -- --open

The app will be available at http://localhost:5173 (or another port if 5173 is in use).

Building for Production

Static Build (Client-side only)

This project uses the static adapter for client-side rendering:

npm run build

The built files will be in the build/ directory and can be served by any static file server.

Preview Production Build

npm run preview

Project Structure

datanova-web/

datanova-web/ ├── src/ │ ├── lib/ │ │ ├── components/ │ │ │ ├── ui/ # UI components (shadcn-svelte) │ │ │ │ ├── button/ │ │ │ │ ├── card/ │ │ │ │ ├── dialog/ │ │ │ │ ├── input/ │ │ │ │ ├── table/ │ │ │ │ └── ... # Other UI components │ │ │ ├── analysis/ # Data analysis components │ │ │ ├── app-sidebar.svelte # Main application sidebar │ │ │ ├── data-table.svelte # Advanced data grid component │ │ │ ├── data-table-checkbox.svelte # Table selection component │ │ │ ├── data-table-cell-viewer.svelte # Cell detail viewer │ │ │ ├── data-table-reviewer.svelte # Data review component │ │ │ ├── chart-area-interactive.svelte # Interactive charts │ │ │ ├── datanova-header.svelte # Application header │ │ │ ├── datanova-sidebar.svelte # Main sidebar component │ │ │ ├── nav-main.svelte # Main navigation │ │ │ ├── nav-secondary.svelte # Secondary navigation │ │ │ ├── nav-user.svelte # User navigation menu │ │ │ ├── nav-documents.svelte # Document navigation │ │ │ ├── section-cards.svelte # Dashboard cards │ │ │ ├── site-header.svelte # Site header │ │ │ ├── schemas.ts # Component schemas │ │ │ └── lab_LEGACY/ # Legacy lab components │ │ ├── hooks/ # SvelteKit hooks │ │ ├── assets/ # Static assets │ │ └── utils.ts # Utility functions │ ├── routes/ │ │ ├── (admin)/ # Admin-only routes │ │ ├── (app)/ │ │ │ └── health/ # Health check pages │ │ │ ├── +page.svelte │ │ │ └── +page.ts │ │ ├── (auth)/ # Authentication routes │ │ │ ├── login/ # Login page │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ └── register/ # Registration page │ │ │ ├── +page.svelte │ │ │ └── +page.ts │ │ ├── (dashboard)/ # Main application routes │ │ │ ├── dashboard/ # Enhanced dashboard │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ ├── lab/ # ML lab environment │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ ├── experiments/ # Experiment management │ │ │ │ ├── +page.svelte │ │ │ │ ├── +page.ts │ │ │ │ └── [id]/ # Individual experiments │ │ │ ├── datasets/ # Dataset management │ │ │ │ ├── +page.svelte │ │ │ │ ├── +page.ts │ │ │ │ └── [id]/ # Individual datasets │ │ │ ├── analysis/ # Data analysis tools │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ ├── models/ # ML model management │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ ├── activity/ # User activity tracking │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ ├── recomendation/ # Algorithm recommendations │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ ├── settings/ # User settings & AI config │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ ├── guide/ # User guides │ │ │ │ ├── +page.svelte │ │ │ │ └── +page.ts │ │ │ └── +layout.svelte # Dashboard layout │ │ ├── dashboard-01/ # Alternative dashboard │ │ ├── +error.svelte # Custom error page │ │ ├── +layout.svelte # Root layout │ │ ├── +layout.ts # Layout configuration │ │ ├── +page.ts # Home page data │ │ └── page.svelte.spec.ts # Page tests │ ├── app.css # Global styles │ ├── app.d.ts # TypeScript declarations │ └── app.html # HTML template ├── static/ # Static files │ ├── favicon.png │ └── ... ├── docs/ # Documentation │ ├── REGISTRATION_API.md # Registration API docs │ ├── LOGIN_API.md # Login API docs │ └── QUICK_SETUP.md # Setup guide ├── backend_docs/ # Backend integration docs ├── build/ # Build output ├── e2e/ # End-to-end tests ├── mockups/ # Design mockups ├── test-results/ # Test results ├── .env.example # Environment template ├── components.json # UI components config ├── eslint.config.js # ESLint configuration ├── package.json # Dependencies ├── playwright.config.ts # E2E test config ├── svelte.config.js # SvelteKit configuration ├── tsconfig.json # TypeScript config ├── vite.config.ts # Vite configuration └── README.md # This file

│   ├── app.css               # Global styles
│   ├── app.d.ts              # TypeScript declarations
│   └── app.html              # HTML template
├── static/                   # Static files
├── docs/                     # Documentation
│   ├── REGISTRATION_API.md   # Registration API documentation
│   ├── LOGIN_API.md          # Login API documentation
│   └── QUICK_SETUP.md        # Quick setup guide
├── .env.example              # Environment variables template
├── svelte.config.js          # SvelteKit configuration
├── vite.config.ts            # Vite configuration
└── package.json              # Dependencies

Authentication

Registration

The registration page (/register) connects to the FastAPI backend registration endpoint.

Features:

Email and password validation
Full name (optional)
Real-time error display
Success messages
Automatic redirect to login after successful registration

API Endpoint:

POST /api/v1/auth/register

Request Body:

{
  "email": "user@example.com",
  "password": "securepassword",
  "full_name": "John Doe"
}

Success Response (201):

{
  "id": "uuid",
  "email": "user@example.com",
  "is_active": true,
  "is_superuser": false,
  "is_verified": false,
  "full_name": "John Doe"
}

Error Responses:

400 - User already exists or validation error
422 - Data constraint violation
500 - Server error

For detailed API documentation, see docs/REGISTRATION_API.md.

Login

The login page (/login) authenticates users with JWT tokens.

Features:

Email and password authentication
Remember me option (token persistence)
Real-time error display
Automatic redirect to dashboard after successful login
Secure token storage (localStorage or sessionStorage)

API Endpoint:

POST /api/v1/auth/login

Request Body (Form Data):

username=user@example.com&password=securepassword

Success Response (200):

{
  "access_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
  "token_type": "bearer"
}

Using the Token:

// Include in API requests
fetch('/api/v1/users/me', {
  headers: {
    'Authorization': `Bearer ${access_token}`
  }
});

Error Responses:

400 - Invalid credentials or user not verified
401 - Unauthorized
422 - Validation error

For detailed API documentation, see docs/LOGIN_API.md.

Protected Routes

After login, users can access protected routes:

/dashboard - User dashboard
Protected API endpoints require the JWT token in the Authorization header

Token Storage:

Session Storage: Token cleared when browser closes (more secure)
Local Storage: Token persists across sessions (with "Remember me")

Logout:

// Clear tokens
localStorage.removeItem('access_token');
sessionStorage.removeItem('access_token');
// Redirect to login

Technologies Used

SvelteKit - Web framework
Svelte 5 - UI framework with runes
TypeScript - Type safety
Tailwind CSS - Styling
shadcn-svelte - UI component library
Vite - Build tool
Playwright - E2E testing
Vitest - Unit testing

Testing

Unit Tests

npm run test:unit

E2E Tests

npm run test:e2e

Deployment

This app uses the static adapter, which generates a static site that can be deployed to:

Netlify
Vercel
GitHub Pages
AWS S3 + CloudFront
Any static hosting service

Example: Deploy to Netlify

Build the app:
```
npm run build
```
Deploy the build/ directory to Netlify

Set environment variables in Netlify dashboard:

PUBLIC_API_URL=https://api.yourdomain.com/api/v1

Example: Deploy to Vercel

Install Vercel CLI:
```
npm i -g vercel
```
Deploy:
```
vercel
```
Set environment variables in Vercel dashboard

Environment Variables

All environment variables must be prefixed with PUBLIC_ to be available in the browser.

Variable	Description	Default
`PUBLIC_API_URL`	Backend API base URL	`http://localhost:8000/api/v1`

Contributing

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

License

This project is licensed under the MIT License.

Related Projects

DataNova Backend - FastAPI backend API

Name		Name	Last commit message	Last commit date
Latest commit History 62 Commits
.github		.github
.vscode		.vscode
backend_docs		backend_docs
e2e		e2e
mockups		mockups
src		src
static		static
.env.example		.env.example
.gitignore		.gitignore
.npmrc		.npmrc
.prettierignore		.prettierignore
.prettierrc		.prettierrc
GUIDE.md		GUIDE.md
README.md		README.md
bun.lock		bun.lock
components.json		components.json
eslint.config.js		eslint.config.js
package-lock.json		package-lock.json
package.json		package.json
playwright.config.ts		playwright.config.ts
svelte.config.js		svelte.config.js
tsconfig.json		tsconfig.json
vite.config.ts		vite.config.ts

Folders and files

Latest commit

History

Repository files navigation

DataNova Web

Features

Core Features

Advanced ML Features

Data Analysis & Visualization

Workflow Management

User Experience

Prerequisites

Setup

1. Install Dependencies

2. Configure Environment Variables

Development

Building for Production

Static Build (Client-side only)

Preview Production Build

Project Structure

Authentication

Registration

Login

Protected Routes

Technologies Used

Testing

Unit Tests

E2E Tests

Deployment

Example: Deploy to Netlify

Example: Deploy to Vercel

Environment Variables

Contributing

License

Related Projects

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages