Как с помощью Cursor AI создать и развернуть производственное приложение за 20 минут

• Cursor - это редактор кода с ИИ, который позволяет создавать приложения без знаний программирования.  

• Видео покажет, как настроить IDE, создать интерфейс, серверную часть, ОС и развернуть онлайн.  

• Приложение будет генерировать эмодзи на основе пользовательских запросов и иметь полный процесс аутентификации.  

• Использование библиотек Next.js и React для упрощения разработки.  

• Использование библиотек компонентов пользовательского интерфейса Shelyn и Tailwind для улучшения читаемости кода.  

• Создание проекта с помощью курсора и настройка Next.js с помощью шасси и Tailwind.  

• Объяснение различных компонентов и их функций: JavaScript, TypeScript, React, Next.js, Chassis, Tailwind.  

• Структура проекта: папка приложения, страница, HTML, библиотека, компоненты.  

• Запуск сервера разработчика с помощью npm run dev.  

• Настройка компонентов с помощью курсора composer.  

• Добавление компонентов в проект с помощью шасси и Tailwind.  

• Рекомендация изучить основы JavaScript для создания веб-приложений.  

• Электронная книга от Hubspot для начинающих в веб-разработке.  

• Создание папки с требованиями и файла markdown для инструкций.  

• Описание проекта и требований к функционалу.  

• Указание на использование моделей и библиотек для создания приложения.  

• Пример проекта: создание веб-приложения для генерации эмодзи на основе пользовательских запросов.  

• Описание функций: генерация эмодзи, анимация, кнопки для загрузки и лайков.  

• Обсуждение библиотеки и требований к функциям.  

• Создание документов и API.  

• Важность правильной файловой структуры.  

• Использование курсора для создания файловой структуры.  

• Правила для новых компонентов и страниц.  

• Возможность добавления макета Figma в проект.  

• Установка необходимых пакетов.  

• Создание нового файла с учетными данными.  

• Использование курсора для настройки проекта.  

• Создание компонентов для генератора эмодзи и отображения.  

• Настройка серверной части для хранения и извлечения эмодзи.  

• Использование курсора для отладки и решения проблем.  

• Настройка надежного источника изображений.  

• Обновление локального хостинга для проверки изменений.  

• Добавление префикса для вызовов внешнего API.  

• Обновление изображений для улучшения качества.  

• Реализация функций загрузки и "нравится" изображения.  

• Тестирование загрузки и "нравится" изображений.  

• Завершение основных функций и обновление локального хостинга.  

• Проверка работы всех функций.  

• Пользователи должны зарегистрироваться для использования приложения.  

• Можно создать кредитную систему для взимания платы с пользователей.  

• Используем платформу Clark для управления аутентификацией.  

• Устанавливаем пакет Clark с помощью npm.  

• Вводим учетные данные в систему.  

• Создаем файл middleware для реализации аутентификации.  

• Добавляем код для проверки аутентификации на каждой странице.  

• Перенаправляем пользователей на страницу входа, если они не зарегистрированы.  

• Возвращаем пользователей на домашнюю страницу после успешного входа.  

• Создаем компонент для отображения кнопки входа и профиля.  

• Импортируем компоненты в макет и активируем Clark.  

• Приложение автоматически перенаправляет на страницу входа при первом доступе.  

• Подключаем базу данных и хранилище к Superbase для отслеживания пользователей.  

• Superbase предлагает полный бэкенд для мобильных и веб-приложений.  

• Альтернатива Firebase и AWS Amplify, не привязанная к конкретным поставщикам.  

• Серверная часть включает аутентификацию базы данных, хранение файлов и векторные встраивания.  

• База данных построена на Postgrad, одной из самых продвинутых реляционных баз данных с открытым исходным кодом.  

• Интерфейс SDK позволяет легко подключаться к внутренним сервисам для различных платформ.  

• Создание базы данных Superbase и нового проекта.  

• Копирование учетных данных в файл app.env.local.  

• Создание таблиц и корзин на основе Superbase.  

• Реализация функций для подключения и создания таблиц профилей, загрузки изображений и обновления эмодзи.  

• Настройка таблицы пользователей с идентификатором пользователя, уровнем, кредитами и идентификаторами Stripe.  

• Создание таблицы эмодзи с идентификатором, URL-адресом изображения, подсказками, количеством лайков и датой создания.  

• Создание хранилища для хранения URL-адресов изображений.  

• Создание инструкции для серверной части с описанием используемых стеков и таблиц.  

• Перечисление функций, таких как создание пользователя, загрузка эмодзи, отображение изображений и синхронизация данных.  

• Завершение настройки серверной части и создание серверной функции на основе инструкции.  

• Создается новый маршрут API для создания и проверки профиля пользователя.  

• Создается компонент user profile initializer для проверки входа пользователя.  

• Компонент добавляется в макет.  

• Проверка модели и устранение ошибок с помощью чата.  

• Установка пакета superbase для успешного запуска приложения.  

• Проверка таблицы профилей и устранение ошибок импорта данных.  

• Синхронизация данных с помощью супербазы.  

• Проверка аутентификации пользователя и фиксация изменений.  

• Добавление Кларка к таблице пользователей superbase.  

• Создание нового маршрута для общего эмодзи с функциональностью загрузки.  

• Обновление компонента генератора эмодзи tsx.  

• Проверка и устранение ошибок с помощью терминала и чата.  

• Создание маршрута для получения всех данных об эмодзи.  

• Обновление компонентов класса эмодзи и генератора эмодзи.  

• Проверка и устранение ошибок с помощью терминала и чата.  

• Создание маршрута для взаимодействия с лайками.  

• Обновление компонентов класса эмодзи и генератора эмодзи.  

• Проверка и устранение ошибок с помощью терминала и чата.  

• Добавление журнала консоли для отладки.  

• Обновление изображения и его отображение на Superbase.  

• Обнаружены проблемы с удалением функций "нравится" и "скачать".  

• Добавление двух кнопок для загрузки и "нравится" при наведении курсора.  

• Отображение количества лайков в таблице эмодзи.  

• Удаление общего количества лайков.  

• Создание новой таблицы для лайков с эмодзи.  

• Обновление кода для корректного отображения количества лайков.  

• Проверка корректности отображения количества лайков в Superbase.  

• Настройка таймаута для предотвращения странного поведения.  

• Добавление реализованной функции "like".  

• Развертывание приложения на Vercel.  

• Настройка переменных окружения и добавление кода в чат.  

• Удаление неиспользуемого импорта и коммитов.  

• Успешное развертывание приложения.  

• Демонстрация функциональности приложения.  

• Призыв к подписке на облачное сообщество для получения дополнительных советов и поддержки.