React/Next.js Dashboard App — Chat UI, File Browser, Email Panel, Status Dashboard (PWA)
Budget: $25 – $50 AUD
Looking for a React/Next.js developer to build a personal productivity dashboard as a PWA.
This is frontend only. The app uses mock JSON data for now and will connect to a live API later. You do not need to build any backend.
THE APP:
Clean, modern interface. Dark sidebar navigation on the left, content area on the right. Dark mode and light mode. Responsive for desktop, tablet and mobile.
5 PAGES:
1. CHAT — Message list UI (user on right, reply on left). Text input at bottom. Conversation list in sidebar. Loads from mock JSON.
2. EMAIL — Inbox list with sender, subject, date. Click to read. Compose button. Folder list (Inbox, Sent, Drafts). Loads from mock JSON.
3. FILES — Grid/list view toggle. Folders and files with icons. Click to navigate or preview (image, PDF, text, markdown). Breadcrumb navigation. Upload button. Loads from mock JSON.
4. DASHBOARD — Status cards showing service name + green/red dot. Simple charts for usage stats (use Recharts). Recent activity feed. Loads from mock JSON.
5. DOCS — Folder tree sidebar. Markdown viewer with rendered output. Search bar. Loads from mock JSON.
REQUIREMENTS:
- Next.js 14+ with App Router
- TypeScript
- Tailwind CSS
- PWA (installable on desktop and mobile)
- Mock JSON data included for all 5 pages
- Environment variable to switch mock data / live API
- Dockerized (Dockerfile + docker-compose.yml)
- Mobile responsive
- Clean component architecture
MOCK DATA TO INCLUDE:
- mock/chat.json — 5 sample conversations with messages
- mock/emails.json — 10 sample emails
- mock/files.json — Sample folder/file structure
- mock/dashboard.json — Sample status and metrics
- mock/docs.json — Sample document tree with markdown content
DELIVERABLES:
- Source code (Git repo or ZIP)
- All 5 pages working with mock data
- README with setup instructions
- Docker setup
- PWA manifest and service worker
- Clean, reusable component structure
IP OWNERSHIP:
Full ownership of all source code transfers to me upon final payment. Only open-source dependencies (MIT, Apache, BSD).
MILESTONES:
M1—Setup, sidebar, chat page, email page (mock data)
M2—Files, dashboard, docs, dark mode, PWA, Docker, README
TIMELINE: 2-3 weeks
QUESTIONS:
1. Show me a dashboard or chat app you've built with React/Next.js.
2. What is your cost estimate and timeline?
This is frontend only. The app uses mock JSON data for now and will connect to a live API later. You do not need to build any backend.
THE APP:
Clean, modern interface. Dark sidebar navigation on the left, content area on the right. Dark mode and light mode. Responsive for desktop, tablet and mobile.
5 PAGES:
1. CHAT — Message list UI (user on right, reply on left). Text input at bottom. Conversation list in sidebar. Loads from mock JSON.
2. EMAIL — Inbox list with sender, subject, date. Click to read. Compose button. Folder list (Inbox, Sent, Drafts). Loads from mock JSON.
3. FILES — Grid/list view toggle. Folders and files with icons. Click to navigate or preview (image, PDF, text, markdown). Breadcrumb navigation. Upload button. Loads from mock JSON.
4. DASHBOARD — Status cards showing service name + green/red dot. Simple charts for usage stats (use Recharts). Recent activity feed. Loads from mock JSON.
5. DOCS — Folder tree sidebar. Markdown viewer with rendered output. Search bar. Loads from mock JSON.
REQUIREMENTS:
- Next.js 14+ with App Router
- TypeScript
- Tailwind CSS
- PWA (installable on desktop and mobile)
- Mock JSON data included for all 5 pages
- Environment variable to switch mock data / live API
- Dockerized (Dockerfile + docker-compose.yml)
- Mobile responsive
- Clean component architecture
MOCK DATA TO INCLUDE:
- mock/chat.json — 5 sample conversations with messages
- mock/emails.json — 10 sample emails
- mock/files.json — Sample folder/file structure
- mock/dashboard.json — Sample status and metrics
- mock/docs.json — Sample document tree with markdown content
DELIVERABLES:
- Source code (Git repo or ZIP)
- All 5 pages working with mock data
- README with setup instructions
- Docker setup
- PWA manifest and service worker
- Clean, reusable component structure
IP OWNERSHIP:
Full ownership of all source code transfers to me upon final payment. Only open-source dependencies (MIT, Apache, BSD).
MILESTONES:
M1—Setup, sidebar, chat page, email page (mock data)
M2—Files, dashboard, docs, dark mode, PWA, Docker, README
TIMELINE: 2-3 weeks
QUESTIONS:
1. Show me a dashboard or chat app you've built with React/Next.js.
2. What is your cost estimate and timeline?
Related categories:
JavaScript
JSON
Docker
Web Development
Frontend Development
API Integration
Next.js
Web Application
Tailwind CSS