🎬 KTOUR - Kosmos Media Production

A fully production-ready, modern, responsive website for KTOUR Media Production, specializing in Google 360° virtual tours, 360° photos, 360° videos, and media creation services.

✨ Features

🌐 Public Website

Home Page with 360° video hero background
About Page with company story, mission, vision, and timeline
Services Page with detailed service offerings
Portfolio/Albums Gallery with 360° media viewer
Contact Page with working contact form
Get a Quote Modal accessible throughout the site
Fully responsive design (mobile, tablet, desktop)
Smooth animations with Framer Motion
Glassmorphism UI effects

🔐 Admin Dashboard

Secure Firebase Authentication (Email: ktour@world.com, Password: ktour@58575)
Dashboard Overview with statistics
Album Management:
- Create albums with title and thumbnail
- Edit album details
- Delete albums
- Upload multiple 360° images and videos to albums
- View and manage all media in albums
Contact Requests Management with status tracking
Quote Requests Management with status tracking
Modern, intuitive admin interface

📧 Email Notifications

Automatic email notifications to ktour58575@gmail.com for:
- Contact form submissions
- Quote requests
Professional HTML email templates

🎥 360° Media Features

Interactive 360° image viewer using PhotoSphere Viewer
360° video playback support
Fullscreen viewer with navigation
Drag and gyroscope support

🚀 Tech Stack

Frontend: Next.js 15 (App Router)
Styling: Tailwind CSS v4
Animations: Framer Motion
UI Components: Shadcn/UI
Backend: Firebase
- Authentication
- Firestore Database
- Storage
Email: Nodemailer
360° Viewer: Photo Sphere Viewer
Form Validation: React Hook Form + Zod

📦 Installation

Clone the repository

git clone <repository-url>
cd ktour-website

Install dependencies
```
npm install
```

Configure environment variables

The .env.local file has been created with placeholders. Update it with your Firebase and email credentials:

# Firebase Configuration
NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key_here
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_project_id.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_project_id.appspot.com
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id

# Email Configuration
EMAIL_USER=ktour58575@gmail.com
EMAIL_PASS=your_gmail_app_password_here

# Admin Email for Notifications
ADMIN_EMAIL=ktour58575@gmail.com

🔥 Firebase Setup

1. Create a Firebase Project

Go to Firebase Console
Click "Add Project"
Follow the setup wizard

2. Enable Authentication

In Firebase Console, go to Authentication
Click "Get Started"
Enable Email/Password sign-in method
Create an admin user:
- Email: ktour@world.com
- Password: ktour@58575

3. Setup Firestore Database

Go to Firestore Database
Click "Create Database"
Choose Production mode (or Test mode for development)
Select your region

The following collections will be created automatically:

albums - Stores album information
media - Stores 360° images and videos
contactRequests - Stores contact form submissions
quoteRequests - Stores quote form submissions

4. Setup Firebase Storage

Go to Storage
Click "Get Started"
Choose security rules (start in test mode for development)

The app will create these folders automatically:

thumbnails/ - Album thumbnails
images/ - 360° images
videos/ - 360° videos

5. Get Firebase Configuration

Go to Project Settings (gear icon)
Scroll down to "Your apps"
Click the web icon (</>)
Register your app
Copy the configuration values to your .env.local file

📧 Email Setup (Gmail)

1. Enable 2-Factor Authentication

Go to your Google Account settings
Enable 2-Factor Authentication

2. Generate App Password

Go to Google App Passwords
Select "Mail" and "Other (Custom name)"
Name it "KTOUR Website"
Copy the generated 16-character password
Add it to .env.local as EMAIL_PASS

🏃 Running the Project

Development Mode

npm run dev

Open http://localhost:3000 in your browser.

Production Build

npm run build
npm start

📁 Project Structure

ktour-website/
├── src/
│   ├── app/
│   │   ├── page.tsx                 # Home page
│   │   ├── about/page.tsx           # About page
│   │   ├── services/page.tsx        # Services page
│   │   ├── portfolio/
│   │   │   ├── page.tsx             # Portfolio gallery
│   │   │   └── [id]/page.tsx        # Single album viewer
│   │   ├── contact/page.tsx         # Contact page
│   │   ├── admin/
│   │   │   ├── page.tsx             # Admin dashboard
│   │   │   ├── login/page.tsx       # Admin login
│   │   │   ├── albums/page.tsx      # Album management
│   │   │   ├── contacts/page.tsx    # Contact requests
│   │   │   └── quotes/page.tsx      # Quote requests
│   │   ├── api/
│   │   │   ├── send-contact-email/  # Contact email API
│   │   │   └── send-quote-email/    # Quote email API
│   │   ├── layout.tsx               # Root layout
│   │   └── globals.css              # Global styles
│   ├── components/
│   │   ├── Navigation.tsx           # Main navigation
│   │   ├── Footer.tsx               # Footer component
│   │   ├── GetQuoteModal.tsx        # Quote modal
│   │   ├── Viewer360.tsx            # 360° viewer
│   │   └── ui/                      # Shadcn UI components
│   ├── contexts/
│   │   └── AuthContext.tsx          # Firebase auth context
│   └── lib/
│       └── firebase.ts              # Firebase configuration
├── .env.local                       # Environment variables
└── package.json

🎯 Key Features Usage

Admin Dashboard

Login: Navigate to /admin/login
- Email: ktour@world.com
- Password: ktour@58575
Create Album:
- Go to Albums page
- Click "Add Album"
- Enter title and select thumbnail
- Click "Create Album"
Upload Media to Album:
- Click "Media" button on any album
- Select multiple 360° images or videos
- Click "Upload Files"
Manage Requests:
- View contact requests in Contacts page
- View quote requests in Quotes page
- Update status: New → In Progress → Closed

Public Website

Browse portfolio at /portfolio
Click any album to view 360° media
Click individual media items for fullscreen 360° viewer
Use "Get a Quote" button to request services
Fill contact form on /contact page

🔒 Security

Admin routes are protected with Firebase Authentication
All form submissions are validated with Zod schemas
Email credentials are stored in environment variables
Firebase Security Rules should be configured appropriately

🚀 Deployment

Vercel (Recommended)

Push your code to GitHub
Connect your repository to Vercel
Add environment variables in Vercel dashboard
Deploy!

Other Platforms

The app can be deployed to any platform that supports Next.js:

Netlify
AWS Amplify
Google Cloud
Azure

Remember to set all environment variables on your hosting platform.

📝 Environment Variables Summary

Variable	Description	Example
`NEXT_PUBLIC_FIREBASE_API_KEY`	Firebase API Key	`AIza...`
`NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN`	Firebase Auth Domain	`project.firebaseapp.com`
`NEXT_PUBLIC_FIREBASE_PROJECT_ID`	Firebase Project ID	`my-project`
`NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET`	Firebase Storage Bucket	`project.appspot.com`
`NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID`	Firebase Messaging Sender ID	`123456789`
`NEXT_PUBLIC_FIREBASE_APP_ID`	Firebase App ID	`1:123...`
`EMAIL_USER`	Gmail address for sending emails	`ktour58575@gmail.com`
`EMAIL_PASS`	Gmail app password	`abcd efgh ijkl mnop`
`ADMIN_EMAIL`	Email to receive notifications	`ktour58575@gmail.com`

🐛 Troubleshooting

Firebase Connection Issues

Verify all Firebase environment variables are correct
Check Firebase project settings
Ensure Firestore and Storage are enabled

Email Not Sending

Verify Gmail app password is correct
Check Gmail 2FA is enabled
Verify EMAIL_USER and EMAIL_PASS in .env.local

360° Viewer Not Loading

Check media URL is accessible
Verify file format (JPEG/PNG for images, MP4 for videos)
Check browser console for errors

Admin Login Issues

Verify admin user exists in Firebase Authentication
Check credentials: ktour@world.com / ktour@58575
Clear browser cache and try again

📞 Support

For support or questions:

Email: ktour58575@gmail.com
Admin Login: ktour@world.com

📄 License

Built with ❤️ for KTOUR Media Production

Name		Name	Last commit message	Last commit date
Latest commit History 3 Commits
public		public
src		src
.env.local		.env.local
.gitignore		.gitignore
EMAIL_SETUP_GUIDE.md		EMAIL_SETUP_GUIDE.md
FIREBASE_RULES_SETUP.md		FIREBASE_RULES_SETUP.md
PORTFOLIO_SETUP_GUIDE.md		PORTFOLIO_SETUP_GUIDE.md
README.md		README.md
UPLOAD_FIX_GUIDE.md		UPLOAD_FIX_GUIDE.md
bun.lock		bun.lock
components.json		components.json
eslint.config.mjs		eslint.config.mjs
firestore.rules		firestore.rules
next-env.d.ts		next-env.d.ts
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
storage.rules		storage.rules
tsconfig.json		tsconfig.json

Folders and files

Latest commit

History

Repository files navigation

🎬 KTOUR - Kosmos Media Production

✨ Features

🌐 Public Website

🔐 Admin Dashboard

📧 Email Notifications

🎥 360° Media Features

🚀 Tech Stack

📦 Installation

🔥 Firebase Setup

1. Create a Firebase Project

2. Enable Authentication

3. Setup Firestore Database

4. Setup Firebase Storage

5. Get Firebase Configuration

📧 Email Setup (Gmail)

1. Enable 2-Factor Authentication

2. Generate App Password

🏃 Running the Project

Development Mode

Production Build

📁 Project Structure

🎯 Key Features Usage

Admin Dashboard

Public Website

🔒 Security

🚀 Deployment

Vercel (Recommended)

Other Platforms

📝 Environment Variables Summary

🐛 Troubleshooting

Firebase Connection Issues

Email Not Sending

360° Viewer Not Loading

Admin Login Issues

📞 Support

📄 License

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages