Modern frontend application for the Bitwise learning platform, built with React 19, TypeScript, and Vite.

Bitwise UI is a high-performance, type-safe web application that provides an interactive learning experience for computer science education. The application features a modern design system, responsive layouts, and advanced state management to deliver seamless educational content, assessments, and progress tracking.

• Interactive Learning Interface - Engaging lessons with syntax highlighting and code examples
• Adaptive Assessment System - Dynamic quizzes and evaluations with instant feedback
• Progress Tracking Dashboard - Visual analytics and progress monitoring with charts
• Binary/Decimal Calculator - Interactive tools for number system conversions
• Circuit Simulator - Visual circuit design and simulation tools
• AI-Powered Assistance - Integrated AI chatbot for learning support
• Bookmark Management - Save and organize favorite lessons and topics
• Responsive Design - Mobile-first approach with seamless cross-device experience
• Dark Mode Support - Theme switching with next-themes
• Authentication - Secure user authentication with Supabase

• React 19 - Latest version with concurrent features
• TypeScript 5.8 - Strongly typed development
• Vite 6 - Next-generation frontend build tool

• TanStack Router - Type-safe routing with file-based routing
• TanStack Query - Powerful asynchronous state management
• Zustand - Lightweight state management solution

• Tailwind CSS 4 - Utility-first CSS framework
• Shadcn/UI - Re-usable component library
• Radix UI - Accessible component primitives
• Lucide React - Beautiful icon set
• Motion (Framer Motion) - Animation library
• Material-UI - Additional UI components

• React Hook Form - Performant form handling
• Zod - TypeScript-first schema validation
• Formik - Form management utilities

• Recharts - Composable charting library
• Lottie React - After Effects animations
• React Confetti - Celebration animations
• Canvas Confetti - Canvas-based confetti effects
• COBE - WebGL globe visualization

• Axios - HTTP client for API calls
• Supabase - Backend-as-a-Service for authentication and database
• MathLive - Math equation editor
• Intro.js - User onboarding and tutorials
• React Syntax Highlighter - Code syntax highlighting

• ESLint - Code linting with TypeScript support
• Prettier - Code formatting
• Kubb - OpenAPI code generation
• dotenv - Environment variable management

Before running the application, ensure you have the following installed:

• Node.js (v18 or higher)
• npm or yarn
• Git

git clone <repository-url> cd bitwise-ui

npm install

Create a .env file in the root directory with the following variables:

# API Configuration VITE_API_URL="http://localhost:3000" # Supabase Configuration VITE_SUPABASE_URL="your-supabase-url" VITE_SUPABASE_ANON_KEY="your-supabase-anon-key" # Feature Flags (optional) VITE_ENABLE_DEVTOOLS="true"

npm run dev

The application will start at http://localhost:5173.

npm run build

npm run preview

npm run dev # Start development server with hot reload npm run preview # Preview production build locally

npm run build # Build application for production npm run build:ci # Build with clean install for CI/CD npm run render-build # Build script for Render deployment npm run start # Serve production build on port 3000

npm run lint # Lint and auto-fix code issues

bitwise-ui/ ├── public/ │ ├── _redirects # Deployment redirects │ └── site.webmanifest # PWA manifest ├── src/ │ ├── assets/ # Static assets │ │ ├── animations/ # Lottie animations │ │ ├── audio/ # Audio files │ │ ├── icons/ # Icon assets │ │ └── photos/ # Images │ ├── components/ # React components │ │ ├── ui/ # Shadcn/UI components │ │ └── *.tsx # Feature components │ ├── constants/ # Application constants │ ├── contexts/ # React contexts │ ├── hooks/ # Custom React hooks │ ├── lib/ # Library configurations │ │ └── styles/ # Global styles │ ├── routes/ # Route components │ ├── services/ # API services │ ├── tools/ # Utility tools │ │ └── simulator/ # Circuit simulator │ ├── types/ # TypeScript definitions │ ├── utils/ # Utility functions │ ├── App.tsx # Root component │ ├── main.tsx # Application entry point │ └── routeTree.gen.ts # Generated route tree ├── components.json # Shadcn/UI config ├── Dockerfile # Docker configuration ├── eslint.config.js # ESLint configuration ├── package.json # Dependencies and scripts ├── tsconfig.json # TypeScript configuration └── vite.config.ts # Vite configuration 

• components/ - Reusable UI components and feature-specific components
• routes/ - Page-level components mapped to routes
• services/ - API client services and data fetching logic
• hooks/ - Custom React hooks for shared logic
• contexts/ - React context providers for global state
• tools/ - Interactive tools like calculators and simulators
• utils/ - Helper functions and utilities
• types/ - TypeScript type definitions and interfaces

The application is optimized for production deployment with:

• Code splitting and lazy loading
• Minification and compression
• Tree shaking for minimal bundle size
• Asset optimization
• Environment-specific builds

# Build Docker image docker build -t bitwise-ui . # Run container docker run -p 3000:3000 bitwise-ui

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

1. Fork the repository
2. Create a feature branch (git checkout -b feature/your-feature)
3. Commit your changes (git commit -m 'Add some feature')
4. Push to the branch (git push origin feature/your-feature)
5. Open a Pull Request

This project is private and unlicensed.