Tablet-First UI Shell for Aviation Flight Planning Web App (React / Next.js)
Budget: $750 – $1,500 SGD
I’m building a new web-based aviation flight planning application to replace an existing Excel workflow.
This project is Phase 1 only and focuses on building the UI shell and navigation structure, not application logic or calculations.
The app contains 6 main pages/tabs:
Dash(Dashboard), Nav(Navigation), Fuel, Wts (Weights), Paxs (Passengers), Wx (Weather)
I will provide an Excel file that shows the visual structure and layout of each page.
Your task is to translate this into a clean, modern, tablet-first web UI, without implementing functional calculations.
Scope (Phase 1)
✅ UI/UX design
✅ Frontend layout & navigation
✅ Responsive behaviour
❌ No formulas or business logic
❌ No backend integration
❌ No real data handling (use placeholders)
Technical Requirements
React (latest) + Next.js (App Router)
TypeScript
Tailwind CSS
Component libraries such as shadcn/ui, Radix UI, or similar
Navigation Requirements
Hybrid responsive navigation:
Tablet (primary): Bottom tab bar with icons + short labels
Desktop: Sidebar or top navigation
Smooth client-side transitions
Design & UX Guidelines
Tablet-first (iPad mini focus)
Touch-friendly spacing and controls
Fully responsive:
Mobile <768px
Tablet 768–1024px (primary)
Desktop >1024px
Clean, professional aviation-themed aesthetic
Accessibility-aware (semantic HTML, basic ARIA)
Optimised for iPad Safari
Dark mode is nice-to-have (not required)
Process
Review provided Excel file for layout reference
Produce initial UI designs (Figma or similar) for all pages + navigation
Iterate based on feedback
Implement approved designs in Next.js
Cross-device testing (tablet + desktop)
Deliverables
Design files (Figma or equivalent)
Next.js project repository
Clean, well-structured components
Deployment link (Vercel or similar)
Short README covering setup and structure
Timeline
2–4 weeks, flexible:
Design & layout interpretation: ~1 week
Implementation: ~1–2 weeks
Polish & testing: ~1 week
Budget
SGD 1000 – SGD 1,500 (negotiable)
Please include in your proposal:
Estimated timeline
Budget proposal
Relevant examples of UI / responsive / tablet-first work
This project is Phase 1 only and focuses on building the UI shell and navigation structure, not application logic or calculations.
The app contains 6 main pages/tabs:
Dash(Dashboard), Nav(Navigation), Fuel, Wts (Weights), Paxs (Passengers), Wx (Weather)
I will provide an Excel file that shows the visual structure and layout of each page.
Your task is to translate this into a clean, modern, tablet-first web UI, without implementing functional calculations.
Scope (Phase 1)
✅ UI/UX design
✅ Frontend layout & navigation
✅ Responsive behaviour
❌ No formulas or business logic
❌ No backend integration
❌ No real data handling (use placeholders)
Technical Requirements
React (latest) + Next.js (App Router)
TypeScript
Tailwind CSS
Component libraries such as shadcn/ui, Radix UI, or similar
Navigation Requirements
Hybrid responsive navigation:
Tablet (primary): Bottom tab bar with icons + short labels
Desktop: Sidebar or top navigation
Smooth client-side transitions
Design & UX Guidelines
Tablet-first (iPad mini focus)
Touch-friendly spacing and controls
Fully responsive:
Mobile <768px
Tablet 768–1024px (primary)
Desktop >1024px
Clean, professional aviation-themed aesthetic
Accessibility-aware (semantic HTML, basic ARIA)
Optimised for iPad Safari
Dark mode is nice-to-have (not required)
Process
Review provided Excel file for layout reference
Produce initial UI designs (Figma or similar) for all pages + navigation
Iterate based on feedback
Implement approved designs in Next.js
Cross-device testing (tablet + desktop)
Deliverables
Design files (Figma or equivalent)
Next.js project repository
Clean, well-structured components
Deployment link (Vercel or similar)
Short README covering setup and structure
Timeline
2–4 weeks, flexible:
Design & layout interpretation: ~1 week
Implementation: ~1–2 weeks
Polish & testing: ~1 week
Budget
SGD 1000 – SGD 1,500 (negotiable)
Please include in your proposal:
Estimated timeline
Budget proposal
Relevant examples of UI / responsive / tablet-first work
Related categories:
JavaScript
CSS
HTML5
HTML
Web Development
Frontend Development
React Native
Next.js
Tailwind CSS