Reserve, Shop, Succeed; All Campus Life in One Click!
A blazingly fast native desktop application built with Tauri, SvelteKit 5, and Rust — delivering sub-millisecond backend response times with a modern, responsive UI.
 |
 |
| Authentication with modern UI | Dashboard with quick access |
 |
 |
| Advanced room filtering | Room booking workflow |
 |
 |
| Booking management | Admin room management |
- Secure login and registration flows
- Session management with persistent auth state
- Role-based access control (Student, Admin)
- Room Browsing: Browse available dormitory rooms with infinite scroll pagination
- Advanced Filtering: Filter by room type (Regular, VIP, Suite), building, capacity, and availability
- Search: Real-time search with debounced input
- Room Details: Comprehensive room information including amenities, pricing, and availability
- Make Bookings: Reserve rooms for entire semesters with instant confirmation
- My Bookings: View all your bookings with status tracking (Pending, Confirmed, Cancelled)
- Cancel Bookings: Flexible cancellation for confirmed bookings
- Availability Checking: Smart date overlap detection
- Room Management: Full CRUD operations for dormitory rooms
- Dashboard View: Overview of all rooms with status indicators
- Quick Actions: Edit and delete rooms with immediate updates
- General resource booking interface for campus facilities
- Support for multiple resource types (classrooms, meeting rooms, offices)
- Course Catalog: Browse available courses and learning materials
- Progress Tracking: Track your learning journey across all enrolled courses
- Video Lectures: Stream educational content directly in the application
- Assignments: View and manage coursework and deadlines
- Grade Dashboard: View grades and academic performance
- Offline Access: Download materials for offline study
- Product Catalog: Browse campus merchandise and essential items
- Shopping Cart: Full cart management with quantity controls
- Order Tracking: Real-time order status updates
- Secure Checkout: Integrated payment processing
- Order History: View past purchases and receipts
- Campus Delivery: Pickup scheduling at convenient campus locations
- SvelteKit 5: Latest Svelte with runes (
$state,$props,$derived) for reactive state management - TypeScript: Strict mode enabled for type safety
- Tailwind CSS 4: Utility-first styling with custom design system
- Custom Fonts: din-next-round (headers), fether (body text)
- Tauri 2.0: Native desktop runtime with multi-window support
- Rust: High-performance backend with sub-millisecond command execution
- In-Process Communication: Direct Rust-JavaScript bridge via Tauri IPC
- Startup Time: < 500ms cold start
- Backend Commands: < 1ms average response time
- Memory Usage: < 50MB baseline footprint
- Bundle Size: < 10MB for the entire application
np-ui/
├── src/
│ ├── routes/ # SvelteKit file-based routing
│ │ ├── auth/ # Authentication pages
│ │ ├── dormitory/ # Dormitory management
│ │ │ ├── admin/ # Admin room management
│ │ │ ├── my-bookings/ # User bookings
│ │ │ └── room/[id]/ # Room details & booking
│ │ ├── main/ # Main dashboard
│ │ ├── resources-booking/ # Resource booking
│ │ ├── shop/ # Campus shop
│ │ └── elearning/ # E-learning platform
│ ├── lib/
│ │ ├── components/ # Reusable UI components
│ │ ├── composables/ # Svelte composables
│ │ ├── types/ # TypeScript interfaces
│ │ └── utils/ # Utility functions
│ ├── app.css # Global styles
│ └── app.html # HTML template
├── static/ # Static assets (fonts, icons, images)
├── src-tauri/ # Tauri application
│ ├── src/ # Rust backend source
│ │ ├── auth.rs # Authentication handlers
│ │ ├── config.rs # Configuration management
│ │ └── lib.rs # Main Tauri entry point
│ ├── capabilities/ # Tauri capabilities
│ ├── icons/ # Application icons
│ └── tauri.conf.json # Tauri configuration
├── content/ # Documentation screenshots
├── eslint.config.js # ESLint configuration
├── svelte.config.js # SvelteKit configuration
├── tailwind.config.js # Tailwind CSS configuration
├── tsconfig.json # TypeScript configuration
└── vite.config.js # Vite configuration
# Clone the repository
git clone https://github.com/your-org/np-ui.git
cd np-ui
# Install dependencies
bun install
# Start development server
bun run dev| Command | Description |
|---|---|
bun run dev |
Start development server (port 1420) |
bun run build |
Build for production |
bun run check |
Type checking with Svelte |
bun run check:watch |
Type checking in watch mode |
bun run lint |
Run Prettier and ESLint |
bun run format |
Format code with Prettier |
# Build the Tauri application
bun run tauri buildNP-UI is designed to integrate seamlessly with the broader NP ecosystem:
- NP-API: FastAPI-based REST API for persistent data storage
- NP-Auth: Centralized authentication service
- NP-Bookings: Dedicated booking management service
- NP-Shop: Campus commerce and order management
- NP-Learning: E-learning content and course management
The Tauri backend handles real-time operations with in-memory state, designed for eventual integration with the full NP microservices architecture.
| Command | Description |
|---|---|
register(email, password) |
Create a new user account |
login(email, password) |
Authenticate user |
logout() |
End current session |
is_authorized() |
Check current auth status |
get_resources() |
Fetch all dormitory rooms |
get_resources_paginated(page, limit, filters) |
Paginated room listing |
get_resource(id) |
Fetch single room details |
make_resource1(name, type, location, capacity) |
Create new room |
update_resource(id, ...) |
Update room details |
delete_resource(id) |
Remove room |
create_booking(resource_id, user_id, start, end) |
Create booking |
confirm_booking(id) |
Confirm pending booking |
cancel_booking(id) |
Cancel booking |
check_availability(id, from, to) |
Check room availability |
get_user_bookings(userId) |
Fetch user bookings |
get_all_bookings() |
Fetch all bookings (admin) |
get_current_user() |
Get logged-in user |
get_products() |
Fetch shop products |
create_order(cart_items, ...) |
Create shop order |
get_order_history(userId) |
Fetch user order history |
get_courses() |
Fetch available courses |
enroll_course(course_id, user_id) |
Enroll in course |
get_course_progress(course_id, user_id) |
Get learning progress |
- Primary: Lime Green (
#84cc16) - Brand color for positive actions - Secondary: Emerald (
#059669) - Welcome/auth panels - Accent: Blue (
#1cb0f6) - Information and navigation - Warning: Yellow (
#eab308) - Pending states - Danger: Red (
#ef4444) - Destructive actions - Neutral: Stone/Gray scale - Text and backgrounds
- din-next-round: Headings, buttons, and display text
- fether: Body text and form inputs
- Native desktop application with window controls
- Card-based layouts with elevation shadows
- Form inputs with focus states and validation
- Loading states with spinners
- Error handling with toast notifications
MIT License - see LICENSE for details.
Built with by the Null-Pointers Team