AI X Network

A modern Next.js website for AI X Network featuring a sleek design, contact forms, and user authentication.

🚀 Features

• Modern Design: Clean, professional interface with responsive design
• Contact Forms: Multiple contact forms with database storage
• User Authentication: NextAuth.js integration for secure user management
• Email Integration: Resend API for email notifications
• Database: PostgreSQL database for data persistence
• Responsive: Mobile-first design that works on all devices

🛠️ Tech Stack

• Frontend: Next.js 14, React, TypeScript
• Styling: Tailwind CSS
• Authentication: NextAuth.js
• Database: PostgreSQL
• Email: Resend API
• Deployment: Vercel/Netlify ready

📋 Prerequisites

Before you begin, ensure you have:

• Node.js 18+ installed
• npm or yarn package manager
• PostgreSQL database (or use the provided connection)
• Resend API key (for email functionality)

🔧 Local Development Setup

1. Clone the repository

   git clone <your-repo-url>
   cd aixnetwork

2. Navigate to the app directory

3. Install dependencies

   npm install
   # or
   yarn install

4. Set up environment variables

   Copy the .env.example to .env and update the values:

   Required environment variables:

   # Database Configuration
   DATABASE_URL="your_postgresql_connection_string"
   
   # Email Configuration (Resend API)
   RESEND_API_KEY="your_resend_api_key"
   SALES_EMAIL="sales@yourdomain.com"
   FROM_EMAIL="noreply@yourdomain.com"
   
   # NextAuth Configuration
   NEXTAUTH_SECRET="your_secure_random_string"
   NEXTAUTH_URL="http://localhost:3000"  # For local development

5. Run the development server

   npm run dev
   # or
   yarn dev

6. Open your browser

   Navigate to http://localhost:3000 to see the application.

🌍 Environment Variables Guide

Required Variables

Getting API Keys

1. Resend API Key:

   • Sign up at resend.com
   • Go to API Keys section
   • Create a new API key
   • Add your domain for email sending

2. NextAuth Secret:

   • Generate a secure random string
   • You can use: openssl rand -base64 32

🚀 Deployment Guide

Option 1: Vercel (Recommended)

1. Push your code to GitHub (see GitHub Setup section below)

2. Deploy to Vercel:

   • Go to vercel.com
   • Click "New Project"
   • Import your GitHub repository
   • Set the root directory to app
   • Add environment variables in Vercel dashboard
   • Deploy!

3. Configure Environment Variables in Vercel:

   • Go to your project settings
   • Navigate to "Environment Variables"
   • Add all required variables from your .env file
   • Update NEXTAUTH_URL to your Vercel domain

Option 2: Netlify

1. Push your code to GitHub

2. Deploy to Netlify:

   • Go to netlify.com
   • Click "New site from Git"
   • Choose your GitHub repository
   • Set build directory to app
   • Set build command to npm run build
   • Set publish directory to app/.next
   • Add environment variables
   • Deploy!

Option 3: GitHub Pages (Static Export)

For static deployment without server-side features:

1. Configure Next.js for static export (in app/next.config.js):

   /** @type {import('next').NextConfig} */
   const nextConfig = {
     output: 'export',
     trailingSlash: true,
     images: {
       unoptimized: true
     }
   }
   module.exports = nextConfig

2. Build and export:

3. Deploy the out folder to GitHub Pages

📚 GitHub Setup Instructions

1. Create GitHub Repository

1. Go to github.com and sign in
2. Click the "+" icon in the top right corner
3. Select "New repository"
4. Choose a repository name (e.g., ai-x-network)
5. Add a description: "AI X Network - Modern Next.js website"
6. Choose visibility:
   • Public: Anyone can see this repository
   • Private: Only you and collaborators can see it
7. Don't initialize with README, .gitignore, or license (we already have these)
8. Click "Create repository"

2. Push Your Code to GitHub

After creating the repository, run these commands in your project root:

# Add the GitHub repository as remote origin
git remote add origin https://github.com/YOUR_USERNAME/YOUR_REPOSITORY_NAME.git

# Push your code to GitHub
git branch -M main
git push -u origin main

Replace YOUR_USERNAME and YOUR_REPOSITORY_NAME with your actual GitHub username and repository name.

3. Verify Upload

• Go to your GitHub repository page
• You should see all your project files
• Check that the .env file is NOT uploaded (it should be in .gitignore)

🔒 Security Notes

• Never commit .env files to version control
• Always use environment variables for sensitive data
• Generate strong secrets for production
• Use HTTPS in production
• Keep dependencies updated regularly

🧪 Testing Your Deployment

After deployment, test these features:

1. Homepage loads correctly
2. Navigation works on all pages
3. Contact forms submit (check database)
4. Email notifications work (if configured)
5. Authentication flows work properly
6. Responsive design on mobile devices

📁 Project Structure

aixnetwork/
├── app/                    # Next.js application
│   ├── components/         # React components
│   ├── pages/             # Next.js pages
│   ├── styles/            # CSS and styling
│   ├── public/            # Static assets
│   ├── .env               # Environment variables (not in git)
│   ├── package.json       # Dependencies
│   └── next.config.js     # Next.js configuration
├── .gitignore             # Git ignore rules
├── README.md              # This file
└── DEPLOYMENT.md          # Detailed deployment guide

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🆘 Support

If you encounter any issues:

1. Check the Issues page
2. Create a new issue with detailed description
3. Include error messages and steps to reproduce

🔗 Links

• Live Site: [Your deployed URL]
• Documentation: [Link to detailed docs]
• API Reference: [Link to API docs if applicable]

Made with ❤️ for AI X Network