# ConnectX Solutions - Premium Digital Agency Website A modern, full-stack digital agency website built with Next.js 16, MongoDB, and NextAuth for authentication. ## Features - **Public Pages**: Home, Portfolio, Services, About, and Contact pages - **Admin Dashboard**: Manage projects, services, testimonials, and contact messages - **Authentication**: Google OAuth via NextAuth.js - **Database**: MongoDB integration with server actions - **Design**: Dark theme with blue gradients and Framer Motion animations - **Responsive**: Mobile-first design with Tailwind CSS - **Type-Safe**: Full TypeScript support ## Tech Stack - **Frontend**: Next.js 16, React 19, Tailwind CSS - **Backend**: Next.js Server Actions, Node.js - **Database**: MongoDB - **Authentication**: NextAuth.js with Google OAuth - **Animations**: Framer Motion - **Styling**: Tailwind CSS v4 - **UI Components**: shadcn/ui ## Getting Started ### Prerequisites - Node.js 18+ - MongoDB Atlas account (or local MongoDB) - Google OAuth credentials ### Environment Variables Create a `.env.local` file with the following variables: ``` MONGODB_URI=mongodb+srv://username:password@cluster.mongodb.net/connectx NEXTAUTH_SECRET=generate-with-openssl-rand-base64-32 NEXTAUTH_URL=http://localhost:3000 GOOGLE_CLIENT_ID=your-google-client-id GOOGLE_CLIENT_SECRET=your-google-client-secret NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=your-cloudinary-cloud-name ``` ### Installation ```bash # Install dependencies pnpm install # Run development server pnpm dev ``` Open [http://localhost:3000](http://localhost:3000) in your browser. ## Project Structure ``` ├── app/ │ ├── (public pages) │ ├── admin/ # Admin dashboard │ ├── api/ # API routes and server actions │ ├── actions.ts # Server actions for CRUD │ └── layout.tsx # Root layout ├── components/ │ ├── ui/ # shadcn/ui components │ ├── navigation.tsx # Main navbar │ ├── hero.tsx # Hero section │ └── ... ├── lib/ │ ├── mongodb.ts # MongoDB connection │ ├── auth.ts # NextAuth configuration │ └── types.ts # TypeScript types └── public/ # Static assets ``` ## Key Routes ### Public - `/` - Home page - `/portfolio` - Portfolio listing - `/portfolio/[id]` - Project details - `/about` - About page - `/contact` - Contact form - `/login` - Authentication ### Admin (Protected) - `/admin` - Dashboard - `/admin/projects` - Manage projects - `/admin/projects/new` - Create project - `/admin/projects/[id]` - Edit project - `/admin/services` - Manage services - `/admin/services/new` - Create service - `/admin/testimonials` - Manage testimonials - `/admin/testimonials/new` - Create testimonial - `/admin/messages` - View contact messages ## Database Collections ### Projects ```typescript { title: string description: string content: string image: string (optional) tags: string[] client: string (optional) published: boolean createdAt: Date updatedAt: Date } ``` ### Services ```typescript { title: string description: string icon: string (optional) createdAt: Date updatedAt: Date } ``` ### Testimonials ```typescript { author: string role: string (optional) text: string rating: number (1-5) createdAt: Date updatedAt: Date } ``` ### Contact Messages ```typescript { name: string email: string subject: string message: string read: boolean createdAt: Date } ``` ## Deployment ### Vercel (Recommended) 1. Push code to GitHub 2. Connect to Vercel 3. Add environment variables in Vercel dashboard 4. Deploy ```bash git push origin main ``` ### Self-Hosted 1. Set up Node.js server 2. Configure MongoDB connection 3. Set environment variables 4. Run build and start: ```bash pnpm build pnpm start ``` ## Authentication Setup ### Google OAuth 1. Go to [Google Cloud Console](https://console.cloud.google.com/) 2. Create a new project 3. Enable Google+ API 4. Create OAuth 2.0 credentials (Web application) 5. Add authorized redirect URIs: - `http://localhost:3000/api/auth/callback/google` (development) - `https://yourdomain.com/api/auth/callback/google` (production) 6. Copy Client ID and Client Secret to `.env.local` ## Development ### Creating Components Components are located in `/components`. Use shadcn/ui for UI elements: ```bash pnpm dlx shadcn-ui@latest add button ``` ### Database Operations Use server actions in `/app/actions.ts` for database operations: ```typescript export async function createProject(formData: FormData) { // Validation and database logic } ``` ### API Routes Create API routes in `/app/api/` for REST endpoints: ```typescript export async function GET(req: Request) { // API logic } ``` ## Performance Optimization - Image optimization with Next.js Image component - Code splitting with dynamic imports - Server-side rendering for SEO - Caching with Next.js Cache API ## Security - HTTPS only in production - CSRF protection via NextAuth - Input validation and sanitization - SQL injection prevention (using MongoDB) - Secure session management ## Troubleshooting ### MongoDB Connection Issues - Verify MongoDB URI is correct - Check IP whitelist in MongoDB Atlas - Ensure network connectivity ### Authentication Not Working - Verify Google OAuth credentials - Check NEXTAUTH_SECRET is set - Ensure NEXTAUTH_URL matches deployment URL ### Build Errors - Clear `.next` folder: `rm -rf .next` - Reinstall dependencies: `pnpm install` - Check Node.js version compatibility ## Contributing 1. Create a feature branch 2. Make changes 3. Test locally 4. Submit pull request ## License Proprietary - All rights reserved ConnectX Solutions ## Support For support, email: support@connectx.com # connectx-solutions