🚀 SmartDev Client Portal

A Modern, AI-Powered Client Management Platform

SmartDev is a cutting-edge client portal featuring AI-powered project consultation, intelligent booking management, and a stunning animated user interface.

✨ Features • 🛠️ Tech Stack • 🚀 Quick Start • 📁 Project Structure • 🤖 AI Integration

✨ Features

🎨 Beautiful UI/UX 🌓 Dark/Light mode support 🎯 Custom animated cursor with color cycling ✨ Smooth Framer Motion animations 📱 Fully responsive design 🎭 Micro-interactions & hover effects	🤖 AI-Powered 💬 AI Project Consultant (Gemini) 🤝 Floating AI Copilot assistant 🧠 Context-aware conversations 🌍 Multilingual support (EN/FR/NL/DE)
� Client Management 📊 Interactive Dashboard 📅 Smart Booking System 🎫 Demo Booking (No login required) 📁 Project Management 🔔 Real-time Notifications	🔐 Admin Features 👤 User Management ✅ Booking Approvals 📈 Analytics Overview 🛡️ Role-based Access

🛠️ Tech Stack

Category	Technologies
Frontend	React 19 • TypeScript • Vite
Styling	Tailwind CSS • Framer Motion
Backend	Node.js • Express
AI	Google Gemini API
Icons	Lucide React
Charts	Recharts

🚀 Quick Start

Prerequisites

Node.js v18+ 
npm or yarn

📦 Installation

# Clone the repository
git clone https://github.com/OUARAS-khelil-Rafik/SmartDev-ClientPortal.git

# Navigate to project
cd SmartDev-ClientPortal

# Install frontend dependencies
npm install

# Install backend dependencies
cd server && npm install && cd ..

⚙️ Configuration

Create a server/.env file:

# Get your API key at: https://aistudio.google.com/app/apikey
GEMINI_API_KEY=your_api_key_here
PORT=3001
NODE_ENV=development

🎯 Running the Application

Option 1: Run Both Together (Recommended)

npm run dev

This starts both frontend (port 3000) and backend (port 3001) simultaneously.

Option 2: Run Separately

Terminal 1 - Backend:

cd server
node index.js

Terminal 2 - Frontend:

npm run client

🌐 Access the App

Service	URL
🖥️ Frontend	http://localhost:3000
🔌 Backend API	http://localhost:3001
❤️ Health Check	http://localhost:3001/api/health

📁 Project Structure

SmartDev-ClientPortal/
├── 📂 src/
│   ├── 📂 components/
│   │   ├── 🎨 AdminDashboard.tsx    # Admin control panel
│   │   ├── 🤖 AIConsultant.tsx      # AI chat interface
│   │   ├── 🎯 AllComponents.tsx     # All components showcase
│   │   ├── 📬 AllNotifications.tsx  # All notifications view
│   │   ├── 🎪 AppsShowcase.tsx      # Apps showcase section
│   │   ├── 🔐 Auth.tsx              # Authentication
│   │   ├── 📅 Booking.tsx           # Booking system (logged-in users)
│   │   ├── ⚠️ ConfirmDialog.tsx     # Confirmation dialog
│   │   ├── 🎯 CustomCursor.tsx      # Animated cursor
│   │   ├── 📊 Dashboard.tsx         # Client dashboard
│   │   ├── 🎫 DemoBooking.tsx       # Demo booking (no login required)
│   │   ├── 💬 FloatingCopilot.tsx   # AI assistant widget
│   │   ├── 🏠 Hero.tsx              # Landing hero section
│   │   ├── 🧭 Navbar.tsx            # Navigation bar
│   │   ├── 🔔 Notifications.tsx     # Notification system
│   │   └── 🛠️ Services.tsx          # Services showcase
│   │
│   ├── 📂 i18n/
│   │   ├── 🇬🇧 en.ts                 # English translations
│   │   ├── 🇫🇷 fr.ts                 # French translations
│   │   ├── 🇳🇱 nl.ts                 # Dutch translations
│   │   ├── 🇩🇪 de.ts                 # German translations
│   │   └── 📦 index.tsx             # i18n provider
│   │
│   ├── 📂 img/
│   │   └── 📂 tech-icons/           # Technology icons
│   │
│   ├── 📂 services/
│   │   ├── 🤖 geminiService.ts      # AI API client
│   │   └── 🌐 api.ts                # MongoDB-backed API client
│   │
│   ├── 🎨 App.tsx                   # Main application
│   ├── 🎭 index.css                 # Global styles
│   ├── 📦 index.tsx                 # Entry point
│   └── 📝 types.ts                  # TypeScript types
│
├── 📂 server/
│   ├── 🚀 index.js                  # Express server
│   ├── 📦 package.json              # Server dependencies
│   ├── 🔒 .env                      # Environment variables
│   └── 📄 .env.example              # Environment template
│
├── 📄 package.json                  # Project dependencies
├── ⚡ vite.config.ts                # Vite configuration
├── 🎨 tailwind.config.cjs           # Tailwind configuration
└── 📝 tsconfig.json                 # TypeScript configuration

🎫 Demo Booking

SmartDev features a Demo Booking system that allows potential clients to schedule a demo without requiring an account:

✨ Features

Feature	Description
🚫 No Login Required	Book a demo without creating an account
📝 Simple Form	Collect name, email, company, and phone
📅 Live Availability	Real-time slot checking to prevent double-booking
📧 Admin Notifications	Admins receive instant notifications of new demo requests
🌍 Fully Translated	Available in all supported languages (EN/FR/NL/DE)

📋 Booking Flow

Click "Book a Demo" on the homepage
Fill in contact information (name, email, optional company/phone)
Describe your project needs
Select available date and time slot
Submit request - Admin will confirm and send meeting link

🤖 AI Integration

SmartDev features two AI-powered assistants powered by Google Gemini:

💬 AI Project Consultant

A full-page AI consultant that helps clients:

Define project requirements
Get technology recommendations
Understand project timelines
Break down complex projects

🤝 Floating Copilot

A compact assistant widget that:

Helps navigate the website
Answers questions about services
Provides quick assistance

API Endpoints

Method	Endpoint	Description
`POST`	`/api/consultation`	Project consultation AI
`POST`	`/api/copilot`	Website copilot AI
`GET`	`/api/health`	Health check

🔔 Notifications

SmartDev includes a real-time notification system used for booking updates, demo requests, and admin alerts.

Users receive notifications scoped to their account; admins see all notifications.
Notifications support marking read/unread, deleting, and bulk actions.
Translations for notification UI strings live in the src/i18n files (see notifications.* keys).

The frontend Notifications component uses the MongoDB-backed API client in src/services/api.ts.

🎨 Custom Cursor

The portal features a unique animated cursor experience:

Feature	Description
🎯 Smooth Following	Ring follows cursor with smooth animation
🌈 Color Cycling	Automatic HSL color rotation
💫 Click Ripples	Animated ripples on click
🔍 Hover Effects	Ring grows on interactive elements
♿ Accessibility	Respects `prefers-reduced-motion`

Note: The cursor is only active on devices with fine pointers (not touch devices).

🌍 Internationalization

The app supports multiple languages:

Language	Code	Status
🇬🇧 English	`en`	✅ Complete
🇫🇷 French	`fr`	✅ Complete
🇳🇱 Dutch	`nl`	✅ Complete
🇩🇪 German	`de`	✅ Complete

Toggle language using the language switcher in the navbar.

📜 Available Scripts

Command	Description
`npm run dev`	Start frontend + backend together
`npm run client`	Start frontend only
`npm run server`	Start backend only
`npm run build`	Build for production
`npm run preview`	Preview production build

🔧 Environment Variables

Frontend (`.env` in root)

VITE_API_URL=http://localhost:3001

Backend (`server/.env`)

GEMINI_API_KEY=your_api_key_here
PORT=3001
NODE_ENV=development

🐛 Troubleshooting

❌ "I'm having trouble connecting to the AI service"

Make sure the backend server is running on port 3001
Check that your GEMINI_API_KEY is valid
Verify the API key at Google AI Studio

❌ Port already in use

Kill the process using the port:

# Windows
Get-Process -Id (Get-NetTCPConnection -LocalPort 3001).OwningProcess | Stop-Process -Force

❌ Custom cursor offset issues

Set browser zoom to 100%
Check OS display scaling settings
Verify window.devicePixelRatio in console

👨‍💻 Author

OUARAS Khelil Rafik

⭐ Star this repo if you found it helpful!

Made with ❤️ and ☕

Name		Name	Last commit message	Last commit date
Latest commit History 70 Commits
.github/workflows		.github/workflows
api		api
server		server
src		src
.env.example		.env.example
.gitignore		.gitignore
.hintrc		.hintrc
.nvmrc		.nvmrc
.vercelignore		.vercelignore
README.md		README.md
index.html		index.html
metadata.json		metadata.json
package-lock.json		package-lock.json
package.json		package.json
postcss.config.cjs		postcss.config.cjs
swa-cli.config.json		swa-cli.config.json
tailwind.config.cjs		tailwind.config.cjs
test-endpoints.js		test-endpoints.js
tsconfig.json		tsconfig.json
vercel.json		vercel.json
vite.config.ts		vite.config.ts

Navigation Menu

Repository files navigation

🚀 SmartDev Client Portal

A Modern, AI-Powered Client Management Platform

✨ Features

🎨 Beautiful UI/UX

🤖 AI-Powered

� Client Management

🔐 Admin Features

🛠️ Tech Stack

🚀 Quick Start

Prerequisites

📦 Installation

⚙️ Configuration

🎯 Running the Application

🌐 Access the App

📁 Project Structure

🎫 Demo Booking

✨ Features

📋 Booking Flow

🤖 AI Integration

💬 AI Project Consultant

🤝 Floating Copilot

API Endpoints

🔔 Notifications

🎨 Custom Cursor

🌍 Internationalization

📜 Available Scripts

🔧 Environment Variables

Frontend (`.env` in root)

Backend (`server/.env`)

🐛 Troubleshooting

👨‍💻 Author

⭐ Star this repo if you found it helpful!

About

Releases

Packages

Used by

Contributors

Languages

Folders and files

Latest commit

History

Repository files navigation

🚀 SmartDev Client Portal

A Modern, AI-Powered Client Management Platform

✨ Features

🎨 Beautiful UI/UX

🤖 AI-Powered

� Client Management

🔐 Admin Features

🛠️ Tech Stack

🚀 Quick Start

Prerequisites

📦 Installation

⚙️ Configuration

🎯 Running the Application

🌐 Access the App

📁 Project Structure

🎫 Demo Booking

✨ Features

📋 Booking Flow

🤖 AI Integration

💬 AI Project Consultant

🤝 Floating Copilot

API Endpoints

🔔 Notifications

🎨 Custom Cursor

🌍 Internationalization

📜 Available Scripts

🔧 Environment Variables

Frontend (.env in root)

Backend (server/.env)

🐛 Troubleshooting

👨‍💻 Author

⭐ Star this repo if you found it helpful!

About

Resources

Stars

Watchers

Forks

Releases

Packages

Used by

Contributors

Languages

Frontend (`.env` in root)

Backend (`server/.env`)