Svelte-based SaaS ERP Frontend Development

Frontend Developer Svelte 5 SvelteKit SaaS ERP Development
Project Overview
We are redesigning our existing, fully functional ERP into a modern, high-performance SaaS application.
Our current ERP is already live and working. The selected developer will not be creating workflows from scratch. Instead, the existing ERP will serve as the primary functional reference, while the frontend is redesigned using a modern technology stack with an improved user experience, cleaner architecture, and significantly better performance.
The backend will be developed separately using Laravel with PostgreSQL, and the frontend should communicate through REST APIs. During frontend development, dummy JSON data should be used for all pages and forms. Backend API integration will be completed later by our backend team.
________________________________________
Technology Stack
The frontend must be developed using:
• Svelte 5 (Runes)
• SvelteKit v2
• TypeScript
• Tailwind CSS
• Vite
• REST API architecture
• Responsive design
• Component-based architecture
The project must follow modern coding standards and be scalable for future SaaS expansion.
________________________________________
Project Scope
The project includes approximately:
• 10–12 Dashboards
• 30–35 Internal Pages
• Multiple CRUD forms
• Quotation Module
• Sales Invoice
• Purchase
• Inventory
• HR & Payroll
• Accounting
• Optimizer Setup
• Customer & Vendor Masters
• Reports
• All Settings
• User Management
• Approval Screens
• Any other modules from Erp etc….
Most pages are straightforward CRUD interfaces, while a few modules (Quotation, Sales Invoice, Inventory, etc.) require more advanced functionality.
Reference ERP access and selected Figma screens will be provided.
________________________________________
Primary Objective
Build an extremely fast ERP frontend that feels as responsive as desktop software such as Tally.
The application should prioritize:
• Instant navigation
• Minimal loading time
• Smooth keyboard workflow
• Fast calculations
• Excellent user experience even on slow internet connections
Performance is the highest priority.
________________________________________
Performance Requirements
The application must:
• Feel instant during navigation
• Work smoothly on slow 3G internet connections
• Minimize unnecessary API calls
• Avoid unnecessary page reloads
• Update only modified UI components
• Perform CRUD operations efficiently
• Display loading states appropriately
• Be optimized for large datasets
• Support virtualization where needed
• Keep JavaScript bundle size optimized
The frontend should provide a desktop-like experience rather than a traditional website.
________________________________________
Keyboard-First ERP Experience
The ERP should be fully keyboard-driven, similar to Tally.
Requirements include:
• Keyboard shortcuts throughout the application
• Fast movement between fields
• Enter-key workflow
• Shortcut keys for common actions
• Minimal mouse dependency
• Instant focus changes
• Efficient tab navigation
Navigation speed must never be compromised.
________________________________________
Dynamic Configuration
The frontend must be configuration-driven wherever possible.
The following should not be hardcoded:
• Sidebar menus
• Modules
• Sub-modules
• Tabs
• Permissions
• Subscription features
• Feature visibility
The application should be designed to render these dynamically from backend configuration in the future.
________________________________________
Role & Permission Ready
Frontend architecture must support:
• Super Admin
• Admin
• Staff Users
• Channel Partners
• CA or Auditor
Each module should support from super admin and admin:
• Module enable/disable
• Tab enable/disable
• Button visibility
• Permission-based rendering
The UI should be ready to consume permission data from backend APIs.
________________________________________
SaaS Subscription Ready
The frontend should support subscription-based feature management.
Different plans should be capable of enabling or hiding:
• Modules
• Features
• Tabs
• Reports
• Menu items
The architecture should allow this through backend configuration without requiring frontend code changes.
________________________________________
Forms
All forms should initially use dummy JSON data.
The frontend developer is not responsible for backend integration during this phase.
The forms should be fully functional from a UI perspective, including:
• Validation
• Calculations
• Keyboard navigation
• Loading states
• Success and error states
• Responsive layouts
The backend team will later replace the dummy data with Laravel REST APIs.
________________________________________
Image Upload Requirements
Image upload should support:
• Drag & Drop
• Browse Upload
• Copy & Paste
• Preview
Images should be automatically optimized on the client side to reduce file size while maintaining adequate print quality.
________________________________________
Live Sync Ready
The frontend should include UI support for:
• Sync indicator
• Sync pending status
• Sync completed status
• Background synchronization state
Actual synchronization logic will be implemented during backend integration.
________________________________________
Code Quality Requirements
The codebase must be:
• Clean
• Modular
• Reusable
• Maintainable
• Scalable
• Well structured
Avoid code duplication wherever possible.
Reusable components should be created for repeated UI elements.
________________________________________
Documentation Requirements
The developer must provide complete documentation including:
• Project setup instructions
• Folder structure explanation
• Component architecture
• Routing structure
• State management approach
• Reusable component guide
• Build process
• Environment configuration
• Dependency list
• Deployment instructions
________________________________________
Code Documentation
The source code must include meaningful comments explaining:
• Complex logic
• Reusable functions
• Components
• Stores
• Utility methods
Variable names, function names, and file names should follow consistent naming conventions.
________________________________________
Source Code Handover
Upon project completion, the developer must hand over:
• Complete original source code
• Full Git repository (if used)
• All project files
• Configuration files
• Build configuration
• Assets
• Fonts
• Icons
• Environment template files (excluding secrets)
• Package configuration files
• Dependency list
• Documentation
The delivered source code must be complete, well-organized, and build successfully without missing files.
No compiled-only deliverables will be accepted. Ownership of the developed frontend source code and related project assets will transfer to us upon final payment, unless otherwise agreed in writing.
________________________________________
Deliverables
The final delivery should include:
• Complete Svelte 5 frontend
• Responsive layouts
• All pages completed
• Reusable components
• Keyboard shortcut implementation
• Dynamic menu architecture
• Dummy data integration
• Image upload functionality
• Form validation
• Optimized performance
• Loading states
• Error handling
• Documentation
• Original source code
________________________________________
Timeline
• Development Timeline: 45 Calendar Days
• Bug Fixes: Included
• Support: 12 Months
________________________________________
Budget
Total Budget:
₹1,80,000 (Fixed Price)
Payments will be released based on predefined milestones after successful completion and approval of each milestone.
________________________________________
Milestones
Milestone 1
• Project setup
• Architecture
• Routing
• Layout
• Authentication screens
• Theme implementation
• Reusable components
Milestone 2
• Master modules
• Customer
• Vendor
• Ledgers
• Product
• Category
• Basic CRUD pages
• All settings
• Any other pages from live ERP
Milestone 3
• Quotation Module
• Sales Invoice
• Purchase
• Inventory
• Accounting.
• Production
• Complex forms
• Keyboard workflow
• Any other pages from live ERP

Milestone 4
• User Management
• Permissions
• Dynamic menu system
• Configuration-driven frontend
• Subscription-ready UI
• Image upload
• Validation
Milestone 5
• Reports
• Dashboards
• Charts
• Final optimization
• Performance tuning
• Cross-browser testing
• Documentation
• Source code handover