A comprehensive project management and client collaboration platform built for Te Wairama Digital, designed to streamline web development projects from discovery to launch.
Managing web development projects requires constant communication, progress updates, and file sharing across multiple platforms. Clients often lose track of project status, while developers juggle scattered tools for project management, resulting in:
- Communication fragmentation across email, messaging apps, and calls
- Lack of transparency in project progress
- Manual status updates consuming valuable development time
- Poor onboarding experience for new clients
A unified platform that provides both an admin dashboard for project management and a client-facing portal for real-time progress tracking, combining:
- Structured 5-phase workflow (Discovery → Strategy → Design → Development → Launch)
- Real-time progress visualization
- Centralized file management
- Task and milestone tracking
- Automated onboarding workflows
- Secure client access via passcode authentication
- Project Management Interface - Create, edit, and manage multiple client projects
- Phase Tracking - Monitor progress across all 5 development phases
- Task Management - Toggle-able task lists with completion tracking
- File Uploads - Secure document management (PDF, PNG, JPG, DOC up to 10MB)
- Client Onboarding - View and manage client questionnaire responses
- Project Duplication - Quick setup for similar projects
- Clean, Branded Interface - Professional client-facing design
- Progress Dashboard - Visual representation of project status
- Phase Indicators - Clear understanding of current and upcoming milestones
- What's Next Section - Always know the next step in the process
- Quick Links - Direct access to designs, asset uploads, and meeting scheduling
- Secure Access - Passcode-protected client portals
- Real-time Updates - Instant synchronization across admin and client views
- Responsive Design - Seamless experience across desktop, tablet, and mobile
- Type Safety - Full TypeScript implementation for robust development
- Modern UI - Built with Tailwind CSS for consistent, maintainable styling
- Optimized Performance - Next.js 15 with App Router for fast page loads
Discovery (0-100%)
├── Initial consultation call
├── Send client questionnaire
├── Review competitors and inspiration
├── Define project goals
└── Contract signed
Strategy (0-100%)
├── Information architecture
├── Feature prioritization
├── Technology stack selection
└── Project timeline creation
Design (0-100%)
├── Brand exploration
├── Wireframing
├── High-fidelity mockups
└── Design system documentation
Development (0-100%)
├── Environment setup
├── Frontend development
├── Backend integration
└── Testing and QA
Launch (0-100%)
├── Pre-launch checklist
├── Domain configuration
├── Deployment
└── Post-launch monitoring
src/
├── app/ # Next.js App Router
│ ├── admin/ # Admin dashboard routes
│ ├── client/ # Client portal routes
│ └── api/ # API endpoints
├── components/ # React components
│ ├── admin/ # Admin-specific components
│ ├── client/ # Client-facing components
│ └── shared/ # Reusable components
├── lib/ # Utilities and helpers
│ ├── supabase/ # Database client and queries
│ └── utils/ # Helper functions
└── types/ # TypeScript type definitions
| Category | Technology | Purpose |
|---|---|---|
| Framework | Next.js 15 | React framework with App Router |
| Language | TypeScript | Type-safe development |
| Database | Supabase | PostgreSQL database and authentication |
| Styling | Tailwind CSS | Utility-first CSS framework |
| Deployment | Vercel | Edge network deployment |
| Icons | Lucide React | Modern icon library |
- Node.js 18+ and npm/pnpm/yarn
- Supabase account and project
- Git
-
Clone the repository
git clone https://github.com/ali-harrison/Client-Portal.git cd Client-Portal -
Install dependencies
npm install # or pnpm install # or yarn install
-
Set up environment variables
Create a
.env.localfile in the root directory:NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
-
Run the development server
npm run dev
-
Open your browser
Navigate to http://localhost:3000
-- Projects table
CREATE TABLE projects (
id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
client_name TEXT NOT NULL,
project_name TEXT NOT NULL,
client_passcode TEXT NOT NULL,
start_date DATE NOT NULL,
target_launch_date DATE,
current_phase TEXT DEFAULT 'discovery',
created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);
-- Phases table
CREATE TABLE phases (
id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
project_id UUID REFERENCES projects(id) ON DELETE CASCADE,
phase_name TEXT NOT NULL,
completion_percentage INTEGER DEFAULT 0,
updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);
-- Tasks table
CREATE TABLE tasks (
id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
project_id UUID REFERENCES projects(id) ON DELETE CASCADE,
phase_name TEXT NOT NULL,
task_description TEXT NOT NULL,
is_completed BOOLEAN DEFAULT FALSE,
created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);
-- Files table
CREATE TABLE files (
id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
project_id UUID REFERENCES projects(id) ON DELETE CASCADE,
file_name TEXT NOT NULL,
file_url TEXT NOT NULL,
file_type TEXT NOT NULL,
uploaded_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);
-- Onboarding responses table
CREATE TABLE onboarding_responses (
id UUID PRIMARY KEY DEFAULT uuid_generate_v4(),
project_id UUID REFERENCES projects(id) ON DELETE CASCADE,
response_data JSONB NOT NULL,
submitted_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);Create a storage bucket named project-files in your Supabase dashboard with the following policies:
-- Allow authenticated uploads
CREATE POLICY "Allow authenticated uploads"
ON storage.objects FOR INSERT
TO authenticated
WITH CHECK (bucket_id = 'project-files');
-- Allow public downloads
CREATE POLICY "Allow public downloads"
ON storage.objects FOR SELECT
TO public
USING (bucket_id = 'project-files');-
Push to GitHub
git add . git commit -m "Initial commit" git push origin main
-
Import to Vercel
- Go to vercel.com/new
- Import your GitHub repository
- Add environment variables from
.env.local - Deploy
-
Configure Domain (Optional)
- Add custom domain in Vercel project settings
- Update DNS records as instructed
Update colors in tailwind.config.ts:
theme: {
extend: {
colors: {
primary: '#your-brand-color',
secondary: '#your-secondary-color',
accent: '#your-accent-color',
}
}
}Modify phases in src/lib/constants.ts:
export const PROJECT_PHASES = [
{ id: 'discovery', name: 'Discovery', icon: '👥' },
{ id: 'strategy', name: 'Strategy', icon: '📋' },
// Add or modify phases
];Integrate with your preferred email service (SendGrid, Resend, etc.) by adding API endpoints in src/app/api/notifications/.
- Passcode Authentication - Client portals protected with unique passcodes
- Row Level Security - Supabase RLS policies ensure data isolation
- Environment Variables - Sensitive credentials stored securely
- File Upload Validation - Type and size restrictions enforced
- HTTPS Only - All deployments use secure connections
- Email notifications for phase completions
- In-app messaging between admin and clients
- Time tracking and invoicing integration
- PDF report generation for project summaries
- Mobile app (React Native)
- Multi-user admin accounts with role-based access
- Analytics dashboard for project metrics
This Client Portal was built by Ali Harrison for Te Wairama Digital, a web development agency based in Christchurch, New Zealand, specializing in premium websites that integrate Te Ao Māori values with modern technology.
Services: React, Next.js, TypeScript, PHP development ranging from landing pages to full e-commerce platforms.
This project is created as a portfolio piece for Te Wairama Digital. For commercial use or adaptation, please contact the author.
- Built with Next.js by Vercel
- Database and authentication by Supabase
- Icons by Lucide
- Deployed on Vercel
Questions or interested in working together? Reach out via GitHub or check out Te Wairama Digital.