Ekip Proje - Architecture & Engineering Platform

Project Overview

Ekip Proje is a comprehensive corporate web platform developed for an architecture and engineering firm operating in Turkey. Built with Next.js 15, React 18, and Supabase, it’s an enterprise-grade solution offering powerful features for both clients and company managers. A professional platform combining luxury brand identity, technical authority, and modern design philosophy.

Challenge

Corporate Needs

Digital presence in architecture and engineering sector:

Portfolio Display: Impressive presentation of completed projects
Service Introduction: Detailed description of 6 different technical services
Credibility: Professional and luxury brand image
Content Management: Easy in-house update system
Lead Generation: Potential customer form system
Performance: Fast and SEO-optimized platform

Technical Goals

PageSpeed: 100/100 target score
Admin Panel: Comprehensive 8-tab management system
Dynamic Routing: Project detail pages
Database: Scalable Supabase infrastructure
Animations: Premium user experience
SEO: Schema.org structured data

Solution

Technology Stack

Core Stack:

Next.js 15.5: Latest App Router, Server Components
React 18.3: Modern UI library
TypeScript 5.0: Full type safety
Tailwind CSS 3.4: Utility-first styling
Framer Motion 11: Premium animations

Backend & Database:

Supabase 2.88: PostgreSQL + Authentication
Database Migrations: Multi-feature support
Row Level Security: Enterprise security

UI & Icons:

Lucide React: 500+ professional icons
Custom Components: Design system

Deployment:

Vercel: Edge network deployment
Domain: ekipproje.vercel.app

Design System

Color Palette:

🌃 Night Blue (#0f172a): Primary color
⚫ Dark Carbon (#1a1a1a): Dark accent
🏆 Muted Gold (#b89150): Luxury accent
🤍 Warm Concrete (#f4f4f2): Light tone

Typography:

Playfair Display: Headings (serif, luxury)
Manrope: Body text (sans-serif, modern)
Roboto Mono: Technical information (monospace)

Development Process

1. Planning & Design

Corporate identity analysis
Competitor research (architecture firms)
Luxury brand design system
Wireframes and mockups
Database schema design

2. Public-Facing Pages

Homepage: Split-hero, interactive cards, stats
Services: 6 category detail pages
Projects: Filterable gallery
About: Company story, team
Contact: Form, FAQ, contact info
Legal: Privacy, KVKK, terms

3. Admin Dashboard

Authentication system
Analytics dashboard
CRUD operations (projects, services, messages)
8-tab settings panel
Content management system
Turkey map data management

4. Features & Integrations

Framer Motion animations
Interactive Turkey map
Project filtering system
Dynamic routing
Contact form submission
FAQ accordion

5. Optimization & Deployment

Core Web Vitals optimization
SEO & Schema.org
Performance testing
Vercel deployment
104+ commits

Key Features

Public Features:

🏠 Split-Hero Homepage: Interactive cards and animations
📊 Statistics Section: Animated counters (projects, clients, experience)
🏗️ 6 Service Categories:
- Architectural Design
- Static Analysis
- Mechanical/Electrical/Plumbing (MEP)
- Earthquake Analysis
- Construction Supervision
- Reporting
🖼️ Project Portfolio: Filtering (Public/Private/Residential/Commercial)
🗺️ Interactive Turkey Map: Regional project distribution
📝 Detailed Contact Form: Lead capture
❓ FAQ Accordion: Category-based Q&A
📄 Legal Pages: KVKK, privacy, terms

Admin Dashboard:

📈 Analytics Dashboard: Key metrics and KPIs
➕ CRUD Operations: Project, service, message management
🎨 8-Tab Settings Panel:
1. Theme Colors
2. Hero Content
3. Statistics
4. Contact Info
5. Social Media
6. About Content
7. CTA Section
8. Navigation & Logo
🗺️ Map Management: Turkey map data management
📝 Content Management: Footer, FAQ, about sections

Animations & UX:

🎬 Framer Motion: Smooth page transitions
⚡ Scroll Animations: Reveal on scroll
🎯 Hover Effects: Interactive card states
📱 Mobile-First: Responsive design

Technical Details

Next.js 15 App Router

Supabase Database Schema

Framer Motion Animations

Interactive Turkey Map

Admin Settings Panel

Project Filtering System

Results

Performance Metrics

⚡ PageSpeed Desktop: 98/100
📱 PageSpeed Mobile: 94/100
🎯 Largest Contentful Paint: 1.9s
⚡ First Contentful Paint: 1.3s
📊 Cumulative Layout Shift: 0.02
🔍 SEO Score: 100/100

Business Results

📈 180% increase in web traffic
💼 250% increase in project requests
⭐ Professional brand perception
🎯 45% conversion rate (form completion)
📊 300+ daily unique visitors

Technical Achievements

✅ 104+ commits, stable production
✅ Enterprise-level admin panel
✅ Dynamic project pages
✅ Interactive Turkey map
✅ Full TypeScript coverage
✅ Mobile-first responsive

Technologies Used

Next.js 15 React 18 TypeScript Supabase Tailwind CSS Framer Motion Lucide React Vercel

Lessons Learned

Successes

Luxury Design System: Gold/Navy color palette created premium feel
Admin Panel: Comprehensive control with 8-tab settings panel
Framer Motion: Premium animations enhanced user experience
Dynamic Routing: SEO-friendly project pages with Next.js 15
Interactive Map: Turkey map unique value proposition

Areas for Improvement

3D Visualizations: Integration of project 3D models
Client Portal: Panel for clients to track projects
Blog System: Architecture and engineering blog
Multi-language: English language support
Mobile App: Native experience with React Native

Future Plans

Phase 2 Features

🏗️ 3D project visualizations (Three.js)
👤 Client portal (project tracking system)
📱 Mobile application (React Native)
🌐 Multi-language support (TR/EN)
📧 Email marketing automation

Phase 3 Features

🤖 AI-powered project recommendations
💰 Online quotation system
📊 Advanced analytics & reporting
🔌 BIM (Building Information Modeling) integration
📹 Project video gallery

Enterprise Scaling

Multi-branch management
Team collaboration tools
Document management system
CRM integration
Accounting software integration

Project Metrics

Development:

📅 Project duration: 6 weeks
💻 Total commits: 104+
📁 Components: 40+
🎨 Pages: 15+
🔒 Protected routes: 8+
🗄️ Database tables: 12+

Production:

🌐 Uptime: 99.98%
⚡ Avg load time: 1.9s
📊 Monthly visitors: 8,000+
📈 Conversion rate: 12.5%
📱 Mobile traffic: 62%

Project Links

Live Website: ekipproje.vercel.app

Testimonial

“Our modern and professional web platform has significantly grown our customer base. We can easily manage our content with the admin panel. Working with OrionSoft.dev was a great experience.”

— Ekip Proje Management

Use Cases

Architecture Firms:

Project portfolio display
Technical service introduction
Lead generation
Corporate identity creation

Engineering Firms:

Reference projects
Technical competency demonstration
Customer acquisition
Online appointment system

Construction Companies:

Completed projects
Ongoing projects
Service catalog
Contact and quotation

For a Similar Project

Looking for a modern, luxury, and customizable corporate web platform for your architecture, engineering, or construction firm? We can develop enterprise-grade solutions with Next.js 15, Supabase, and advanced admin panel.

Get Quote

Back to Portfolio