Getting Started Tutorial

Complete step-by-step tutorial for new users.

Welcome!

This tutorial will guide you through setting up and using the AI Store application.

Prerequisites

Before starting, ensure you have:

• Node.js 18+ installed
• npm or yarn package manager
• Git installed
• Code editor (VS Code recommended)

Step 1: Installation

Clone the Repository

git clone <repository-url>
cd Server-December-AIStore

Install Dependencies

npm install

This will install all required packages.

Verify Installation

npm run build

If the build succeeds, you're ready to go!

Step 2: Configuration

Create Environment File

cp env.sample .env.local

Configure Environment Variables

Edit .env.local:

NEXT_PUBLIC_SITE_URL=http://localhost:3000

Start Development Server

npm run dev

Visit http://localhost:3000

Step 3: Explore the Application

Homepage

1. Open the homepage
2. Browse featured applications
3. Try the search functionality
4. Explore categories

Application Pages

1. Click on an application card
2. View application details
3. Read description and features
4. Check tags and ratings

Search

1. Use the search bar
2. Try different search terms
3. Use filters (if available)
4. Explore search results

Step 4: Your First Customization

Add a New Page

1. Create app/my-page/page.tsx:

export default function MyPage() {
  return (
    <div>
      <h1>My Custom Page</h1>
      <p>This is my first custom page!</p>
    </div>
  );
}

2. Visit /my-page in your browser

Add a Component

1. Create components/MyComponent.tsx:

export default function MyComponent() {
  return (
    <div>
      <h2>My Component</h2>
      <p>This is my first component!</p>
    </div>
  );
}

2. Use it in a page:

import MyComponent from '@/components/MyComponent';

export default function Page() {
  return <MyComponent />;
}

Step 5: Using Features

Forms

1. Create a form using useForm:

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

function MyForm() {
  const { values, handleChange, handleSubmit } = useForm({
    initialValues: { name: '' },
    onSubmit: async (values) => {
      console.log('Submitted:', values);
    },
  });

  return (
    <form onSubmit={handleSubmit}>
      <input
        name="name"
        value={values.name}
        onChange={handleChange}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

Modals

1. Add a modal:

import Modal from '@/components/Modal';
import { useState } from 'react';

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

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Open Modal</button>
      <Modal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        title="My Modal"
      >
        Modal content
      </Modal>
    </>
  );
}

Notifications

1. Show notifications:

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

function MyComponent() {
  const handleClick = () => {
    notifications.success('Success!', 'Operation completed');
  };

  return <button onClick={handleClick}>Click me</button>;
}

Step 6: Internationalization

Add Translations

1. Use the i18n hook:

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

function MyComponent() {
  const { t, changeLocale } = useI18n();

  return (
    <div>
      <p>{t('common.loading')}</p>
      <button onClick={() => changeLocale('de')}>
        Switch to German
      </button>
    </div>
  );
}

Step 7: Data Fetching

Fetch Data

1. Use the data fetch hook:

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

function DataComponent() {
  const { data, isLoading, error } = useDataFetch('/api/data');

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return <div>{JSON.stringify(data)}</div>;
}

Step 8: Styling

Use Tailwind CSS

<div className="container mx-auto p-4">
  <h1 className="text-2xl font-bold">Title</h1>
  <p className="text-gray-600">Content</p>
</div>

Custom Styles

Add to app/globals.css:

.my-custom-class {
  /* Your styles */
}

Step 9: Testing

Write a Test

1. Create __tests__/MyComponent.test.tsx:

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

test('renders component', () => {
  render(<MyComponent />);
  expect(screen.getByText('My Component')).toBeInTheDocument();
});

2. Run tests:

npm test

Step 10: Deployment

Build for Production

npm run build

Deploy

Follow the Deployment Guide for deployment instructions.

Next Steps

Learn More

• API Reference
• Components Guide
• Hooks Reference
• Guides

Build Something

• Create a custom page
• Add a new component
• Integrate an API
• Customize the design

Contribute

• Contributing Guide
• Code Style
• Best Practices

Common First Tasks

1. Customize Homepage

Edit app/page.tsx to customize the homepage.

2. Add New Route

Create a new file in app/ directory.

3. Modify Header

Edit components/Header.tsx.

4. Change Colors

Update CSS variables in app/globals.css.

Troubleshooting

Issues?

• Check Troubleshooting Guide
• Review FAQ
• Search Known Issues

Resources

• Quick Start
• Documentation Index
• Examples
• Support

Congratulations!

You've completed the getting started tutorial! You now know how to:

• Set up the project
• Create pages and components
• Use features and hooks
• Style your application
• Test your code
• Deploy your application

Happy coding! 🎉