A modern, full-featured portfolio website built with Next.js 16, featuring a public portfolio showcase and a comprehensive admin dashboard for content management.
This frontend application provides both a public-facing portfolio website and an admin dashboard for managing portfolio content. Built with Next.js App Router, featuring multi-language support, responsive design, and modern UI components.
- Framework: Next.js 16 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS 4
- UI Components: Radix UI, shadcn/ui
- State Management: Zustand, TanStack Query (React Query)
- Forms: React Hook Form + Zod validation
- Internationalization: next-intl
- Animations: Framer Motion
- Icons: Lucide React, Tabler Icons
- Rich Text Editor: Tiptap
- HTTP Client: Axios
- Authentication: Better Auth
- Tables: TanStack Table
- Charts: Recharts
client/
├── src/
│ ├── app/ # Next.js App Router
│ │ ├── [locale]/ # Internationalized routes
│ │ │ ├── layout.tsx # Root layout with providers
│ │ │ │ # - Theme provider
│ │ │ │ # - React Query provider
│ │ │ │ # - next-intl provider
│ │ │ │ # - Font loading (Poppins/Cairo)
│ │ │ │
│ │ │ ├── (portfolio)/ # Public portfolio routes (route group)
│ │ │ │ ├── layout.tsx # Portfolio layout (navbar, footer)
│ │ │ │ │
│ │ │ │ ├── (home)/ # Home page route group
│ │ │ │ │ ├── page.tsx # Home page
│ │ │ │ │ └── _components/
│ │ │ │ │ ├── hero-section.tsx
│ │ │ │ │ ├── statistics-section.tsx
│ │ │ │ │ ├── about-section.tsx
│ │ │ │ │ ├── services-section.tsx
│ │ │ │ │ ├── featured-projects-section.tsx
│ │ │ │ │ ├── testimonials-section.tsx
│ │ │ │ │ └── cta-section.tsx
│ │ │ │ │
│ │ │ │ ├── projects/ # Projects pages
│ │ │ │ │ ├── page.tsx # Projects listing
│ │ │ │ │ ├── _components/
│ │ │ │ │ │ └── projects-page-client.tsx
│ │ │ │ │ └── [slug]/ # Dynamic project detail
│ │ │ │ │ ├── page.tsx
│ │ │ │ │ └── _components/
│ │ │ │ │ └── project-details-client.tsx
│ │ │ │ │
│ │ │ │ ├── services/ # Services pages
│ │ │ │ │ ├── page.tsx # Services listing
│ │ │ │ │ ├── _components/
│ │ │ │ │ │ └── services-page-client.tsx
│ │ │ │ │ └── [slug]/ # Dynamic service detail
│ │ │ │ │ ├── page.tsx
│ │ │ │ │ └── _components/
│ │ │ │ │ └── service-detail-client.tsx
│ │ │ │ │
│ │ │ │ └── contact/ # Contact page
│ │ │ │ ├── page.tsx
│ │ │ │ └── _components/
│ │ │ │ └── contact-section.tsx
│ │ │ │
│ │ │ ├── auth/ # Authentication pages
│ │ │ │ ├── layout.tsx # Auth layout
│ │ │ │ ├── login/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── register/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── forget-password/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── reset-password/
│ │ │ │ │ └── page.tsx
│ │ │ │ └── verify-account/
│ │ │ │ └── page.tsx
│ │ │ │
│ │ │ └── dashboard/ # Admin dashboard
│ │ │ ├── layout.tsx # Dashboard layout (sidebar, header)
│ │ │ ├── page.tsx # Dashboard home
│ │ │ │
│ │ │ ├── profile/ # User profile
│ │ │ │ ├── page.tsx
│ │ │ │ └── _components/
│ │ │ │ ├── profile-page-client.tsx
│ │ │ │ ├── overview-tab.tsx
│ │ │ │ ├── edit-profile-tab.tsx
│ │ │ │ └── change-password-tab.tsx
│ │ │ │
│ │ │ ├── projects/ # Projects management
│ │ │ │ ├── page.tsx # Projects list
│ │ │ │ ├── create/
│ │ │ │ │ └── page.tsx
│ │ │ │ ├── [id]/
│ │ │ │ │ ├── page.tsx
│ │ │ │ │ ├── edit/
│ │ │ │ │ │ └── page.tsx
│ │ │ │ │ └── images/
│ │ │ │ │ └── page.tsx
│ │ │ │ └── _components/
│ │ │ │ ├── projects-page-client.tsx
│ │ │ │ ├── project-form.tsx
│ │ │ │ ├── columns.tsx
│ │ │ │ ├── data-table-actions.tsx
│ │ │ │ ├── data-table-toolbar.tsx
│ │ │ │ ├── delete-project-modal.tsx
│ │ │ │ ├── project-images-manager.tsx
│ │ │ │ ├── project-images-upload.tsx
│ │ │ │ ├── project-links-manager.tsx
│ │ │ │ └── thumbnail-upload.tsx
│ │ │ │
│ │ │ ├── services/ # Services management
│ │ │ ├── categories/ # Categories management
│ │ │ ├── technologies/ # Technologies management
│ │ │ ├── testimonials/ # Testimonials management
│ │ │ ├── contacts/ # Contact inquiries
│ │ │ ├── inquiry-types/# Inquiry types
│ │ │ ├── users/ # User management
│ │ │ └── settings/ # Site settings
│ │ │ ├── page.tsx
│ │ │ └── _components/
│ │ │ ├── settings-page-client.tsx
│ │ │ ├── hero-tab.tsx
│ │ │ ├── about-tab.tsx
│ │ │ ├── statistics-tab.tsx
│ │ │ ├── footer-tab.tsx
│ │ │ ├── github-tab.tsx
│ │ │ └── cv-tab.tsx
│ │ │
│ │ ├── globals.css # Global styles
│ │ ├── page.tsx # Root page (redirects to locale)
│ │ ├── error.tsx # Error boundary
│ │ ├── loading.tsx # Loading component
│ │ └── not-found.tsx # 404 page
│ │
│ ├── components/ # Reusable components
│ │ ├── ui/ # shadcn/ui components
│ │ │ # - Button, Input, Dialog, etc.
│ │ │ # - All Radix UI based components
│ │ │
│ │ ├── forms/ # Form components
│ │ │ # - Reusable form wrappers
│ │ │ # - Form field components
│ │ │
│ │ ├── inputs/ # Input components
│ │ │ # - Custom input variants
│ │ │ # - File upload inputs
│ │ │
│ │ ├── buttons/ # Button components
│ │ │ # - Button variants
│ │ │ # - Icon buttons
│ │ │
│ │ ├── auth/ # Auth-related components
│ │ │ ├── auth-guard.tsx # Auth protection wrapper
│ │ │ └── protected-route.tsx
│ │ │
│ │ ├── portfolio/ # Portfolio-specific components
│ │ │ # - Navbar, Footer
│ │ │ # - Project cards
│ │ │ # - Service cards
│ │ │
│ │ ├── projects/ # Project-related components
│ │ │ # - Project display components
│ │ │
│ │ ├── services/ # Service-related components
│ │ │ # - Service display components
│ │ │
│ │ └── shared/ # Shared components
│ │ ├── logo.tsx
│ │ └── other shared components
│ │
│ ├── modules/ # Feature modules (API integration)
│ │ ├── auth/
│ │ │ ├── auth-api.ts # API functions
│ │ │ │ # - login, register, etc.
│ │ │ ├── auth-hook.ts # React Query hooks
│ │ │ │ # - useLogin, useRegister, etc.
│ │ │ └── auth-type.ts # TypeScript types
│ │ │
│ │ ├── projects/
│ │ │ ├── projects-api.ts
│ │ │ ├── projects-hook.ts
│ │ │ └── projects-type.ts
│ │ │
│ │ ├── services/
│ │ ├── categories/
│ │ ├── technologies/
│ │ ├── testimonials/
│ │ ├── contacts/
│ │ ├── inquiry-types/
│ │ ├── site-settings/
│ │ └── users/
│ │
│ ├── lib/ # Utilities and configurations
│ │ ├── axios.ts # Axios instance
│ │ │ # - Base URL configuration
│ │ │ # - Request interceptor (token injection)
│ │ │ # - Response interceptor (token refresh)
│ │ │ # - Error handling
│ │ └── utils.ts # Utility functions
│ │ # - cn() for className merging
│ │ # - Other helper functions
│ │
│ ├── hooks/ # Custom React hooks
│ │ ├── use-debounced-value.ts # Debounce hook
│ │ ├── use-file-upload.ts # File upload hook
│ │ ├── use-mobile.ts # Mobile detection hook
│ │ └── use-query-params.ts # URL query params hook
│ │
│ ├── stores/ # State management (Zustand)
│ │ └── use-auth-store.ts # Auth state store
│ │ # - Access token
│ │ # - Refresh token
│ │ # - User data
│ │ # - Auth actions
│ │
│ ├── providers/ # React context providers
│ │ ├── react-query-provider.tsx
│ │ │ # - TanStack Query provider
│ │ │ # - Query client configuration
│ │ └── theme-provider.tsx
│ │ # - next-themes provider
│ │ # - Dark/light mode
│ │
│ ├── constants/ # Application constants
│ │ ├── routes.ts # Route definitions
│ │ ├── auth.constants.ts # Auth-related constants
│ │ └── site.constants.ts # Site configuration constants
│ │
│ ├── i18n/ # Internationalization config
│ │ ├── routing.ts # Route configuration
│ │ ├── navigation.ts # Navigation helpers
│ │ └── request.ts # Server-side i18n
│ │
│ ├── types/ # TypeScript types
│ │ └── api-type.ts # API response types
│ │
│ └── utils/ # Utility functions
│ ├── dynamic-icon-loader.ts # Dynamic icon loading
│ ├── get-dir.ts # Get text direction (RTL/LTR)
│ ├── get-side.ts # Get sidebar position
│ └── icon-utils.tsx # Icon utility functions
│
├── messages/ # Translation files
│ ├── en.json # English translations
│ ├── ar.json # Arabic translations
│ └── en.d.json.ts # Type-safe translation types
│
├── public/ # Static assets
│ ├── images/ # Image assets
│ │ └── bg-auth.jpg
│ └── Saeed-Altout-CV.pdf # CV file
│
├── next.config.ts # Next.js configuration
├── tailwind.config.ts # Tailwind CSS configuration
├── tsconfig.json # TypeScript configuration
├── components.json # shadcn/ui configuration
└── package.json
Each feature module follows a consistent pattern:
module-name/
├── module-name-api.ts # API functions
│ # - Axios API calls
│ # - Request/response handling
│
├── module-name-hook.ts # React Query hooks
│ # - useQuery hooks for fetching
│ # - useMutation hooks for mutations
│ # - Optimistic updates
│
└── module-name-type.ts # TypeScript types
# - Request types
# - Response types
# - Shared types
- Server Components: Default in Next.js App Router for better performance
- Client Components: Marked with
"use client"for interactivity - Route Groups:
(portfolio),(home)organize routes without affecting URLs - Private Components:
_components/folder for page-specific components
-
Zustand: Client-side auth state
- Access token, refresh token
- User data
- Auth actions (login, logout, etc.)
-
React Query: Server state management
- API data caching
- Automatic refetching
- Optimistic updates
- Loading and error states
- Axios Instance: Configured in
lib/axios.ts- Automatic token injection via request interceptor
- Token refresh on 401 errors
- Request/response transformation
- Error handling and retry logic
- Locale-based Routing:
[locale]dynamic segment/en/...for English/ar/...for Arabic
- Route Groups: Organize routes without URL changes
- Dynamic Routes:
[slug],[id]for dynamic content
- Node.js 18+ and npm
- Backend API running (see server README)
-
Install dependencies
npm install
-
Set up environment variables
Create a
.env.localfile:NEXT_PUBLIC_BACKEND_URL=http://localhost:3000/api NEXT_PUBLIC_SUPABASE_URL=your_supabase_url NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
-
Start development server
npm run dev
The application will be available at
http://localhost:3001
- Home Page: Hero section, statistics, about, services, featured projects, testimonials
- Projects: Browse and view project details with images and descriptions
- Services: View available services with detailed information
- Contact: Contact form with inquiry type selection
- Multi-language: English and Arabic with RTL support
- Responsive Design: Mobile-first, fully responsive
- Dark Mode: Theme switching support
- Authentication: Login, registration, email verification, password reset
- Projects Management: CRUD operations with image galleries
- Services Management: Manage services with icons and descriptions
- Categories Management: Organize projects by categories
- Technologies Management: Manage technology stack
- Testimonials Management: Add and manage client testimonials
- Contact Management: View and reply to contact inquiries
- User Management: Manage users and roles
- Site Settings: Configure site-wide settings
- Profile Management: Update profile, change password, upload avatar
- Server Components: Default for better performance
- Client Components: For interactivity (forms, modals)
- Type Safety: Full TypeScript coverage
- Form Validation: Zod schemas with React Hook Form
- Image Optimization: Next.js Image component
- SEO: Metadata API for each page
- Error Handling: Error boundaries and user-friendly messages
- Loading States: Loading UI for better UX
npm run dev # Start development server
npm run build # Build for production
npm run start # Start production server
npm run lint # Lint code- Styling: Use Tailwind CSS for all styling
- Animations: Use Framer Motion for animations
- Components: Follow component naming conventions
- API Validation: Use Zod for all API endpoint validation
- Types: Export types generated from Zod schemas
- Naming: Use kebab-case for file names
-
Create API module in
src/modules/feature-name/feature-name-api.ts- API functionsfeature-name-hook.ts- React Query hooksfeature-name-type.ts- Types
-
Create components in appropriate location
- Public components in
app/[locale]/(portfolio)/... - Dashboard components in
app/[locale]/dashboard/... - Shared components in
components/
- Public components in
-
Add translations in
messages/en.jsonandmessages/ar.json -
Create pages using Next.js App Router conventions
Server Component Example:
// app/[locale]/page.tsx
export default async function Page() {
const data = await fetchData(); // Server-side data fetching
return <ServerComponent data={data} />;
}Client Component Example:
// components/example.tsx
"use client";
import { useState } from "react";
export function ClientComponent() {
const [state, setState] = useState();
// Client-side interactivity
}This project is private and proprietary.
Built with ❤️ using Next.js