Frequently Asked Questions

Common questions and answers about the AI Store application.

General

What is AI Store?

AI Store is a modern Next.js application that provides access to 59+ AI-powered applications across 11 different categories. It's built with performance, security, and user experience in mind.

What technologies does it use?

• Next.js 16 (App Router)
• React 19.2.0
• TypeScript
• Tailwind CSS

Is it open source?

[Answer based on your project's license]

Installation & Setup

How do I install the project?

git clone <repository-url>
cd Server-December-AIStore
npm install
npm run dev

What are the system requirements?

• Node.js 18+
• npm or yarn
• Modern browser (Chrome, Firefox, Safari, Edge)

How do I configure environment variables?

Create a .env.local file in the root directory:

NEXT_PUBLIC_SITE_URL=https://your-domain.com

See Configuration Guide for more details.

Development

How do I add a new page?

Create a file in app/ directory:

// app/my-page/page.tsx
export default function MyPage() {
  return <div>My Page</div>;
}

How do I add a new component?

Create a file in components/ directory:

// components/MyComponent.tsx
export default function MyComponent() {
  return <div>My Component</div>;
}

How do I use TypeScript?

The project is fully TypeScript. All files use .ts or .tsx extensions. See TypeScript documentation.

How do I add internationalization?

import { useI18n } from '@/hooks/useI18n';

function MyComponent() {
  const { t } = useI18n();
  return <p>{t('common.loading')}</p>;
}

See i18n Guide for details.

Components

How do I use the Modal component?

import Modal from '@/components/Modal';

const [isOpen, setIsOpen] = useState(false);

<Modal isOpen={isOpen} onClose={() => setIsOpen(false)} title="Title">
  Content
</Modal>

See Modal Documentation for details.

How do I use the Form hook?

import { useForm } from '@/hooks/useForm';

const { values, handleChange, handleSubmit } = useForm({
  initialValues: { email: '' },
  onSubmit: async (values) => {
    // Handle submission
  },
});

See useForm Documentation for details.

How do I show notifications?

import { notifications } from '@/lib/notifications';

notifications.success('Success!', 'Operation completed');

See Notifications Guide for details.

Performance

How do I optimize images?

Use the Next.js Image component:

import Image from 'next/image';

<Image src="/image.jpg" width={800} height={600} alt="Description" />

See Performance Guide for details.

How do I enable caching?

import { advancedCache } from '@/lib/advanced-cache';

const data = await advancedCache.get('key', fetcher, {
  strategy: 'cache-first',
  ttl: 60000,
});

See Caching Guide for details.

How do I monitor performance?

import { usePerformance } from '@/hooks/usePerformance';

const { recordMetric } = usePerformance();
recordMetric('custom_metric', 150);

See Performance Guide for details.

Security

How do I validate user input?

import { validateInput } from '@/lib/security-advanced';

const result = validateInput(input, {
  required: true,
  minLength: 3,
});

See Security Guide for details.

How do I prevent XSS attacks?

React automatically escapes content. For HTML, use sanitization:

import { sanitizeHTML } from '@/lib/security-advanced';

const safe = sanitizeHTML(userInput);

See Security Guide for details.

How do I implement rate limiting?

import { rateLimiter } from '@/lib/rate-limit';

const result = rateLimiter.check('user-id', 100, 60000);

See Security Guide for details.

Deployment

How do I deploy to Vercel?

npm i -g vercel
vercel

See Deployment Guide for details.

How do I deploy to production?

1. Build the project: npm run build
2. Start the server: npm start
3. Configure environment variables
4. Set up monitoring

See Deployment Guide for details.

What environment variables do I need?

• NEXT_PUBLIC_SITE_URL: Your site URL

See Configuration Guide for details.

Troubleshooting

Build fails with TypeScript errors

1. Check TypeScript version
2. Clear .next directory
3. Run npx tsc --noEmit

See Troubleshooting Guide for details.

"window is not defined" error

Use browser checks or move to client component:

if (typeof window !== 'undefined') {
  // Browser code
}

See Troubleshooting Guide for details.

Modal not closing

Check isOpen state and onClose handler:

const [isOpen, setIsOpen] = useState(false);
<Modal isOpen={isOpen} onClose={() => setIsOpen(false)} />

See Troubleshooting Guide for details.

Testing

How do I run tests?

npm test

See Testing Guide for details.

How do I write tests?

import { render, screen } from '@testing-library/react';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('renders correctly', () => {
    render(<MyComponent />);
    expect(screen.getByText('Hello')).toBeInTheDocument();
  });
});

See Testing Guide for details.

Contributing

How do I contribute?

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request

See Contributing Guide for details.

What's the code style?

• Follow TypeScript best practices
• Use ESLint configuration
• Format with Prettier

See Contributing Guide for details.

Features

How do I enable feature flags?

import { useFeatureFlag } from '@/hooks/useFeatureFlag';

const enabled = useFeatureFlag('my-feature');

See Configuration Guide for details.

How do I add keyboard shortcuts?

import { useKeyboardShortcut } from '@/hooks/useKeyboardShortcut';

useKeyboardShortcut({
  key: 'k',
  ctrl: true,
  action: () => {
    // Handle shortcut
  },
});

See Keyboard Shortcuts Guide for details.

How do I use the search feature?

import { searchApps } from '@/lib/search';

const results = searchApps(apps, query, {
  threshold: 0.3,
  fuzzy: true,
});

See Search Guide for details.

PWA

How do I test PWA features?

1. Build the project
2. Serve over HTTPS
3. Open in browser
4. Check install prompt

See PWA Configuration for details.

How do I update the Service Worker?

The Service Worker is in public/sw.js. Update and rebuild.

Analytics

How do I track events?

import { advancedAnalytics } from '@/lib/analytics-advanced';

advancedAnalytics.trackEvent({
  name: 'button_click',
  category: 'interaction',
});

See Analytics Guide for details.

Still Have Questions?

• Check the Documentation Index
• Review Troubleshooting Guide
• Open an issue on GitHub
• Contact support