Tablet-First UI Shell for Aviation Flight Planning Web App (React / Next.js)

Job ID: 40157143

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