Демо проекта: devOverflow
devOverflow это платформа вопросов и ответов, позволяющая разработчикам задавать вопросы, делиться знаниями и учиться друг у друга. Она построена с использованием Next.js, Tailwind CSS, Clerk, MongoDB и многого другого.
Структура папок
devoverflow/
├───app
│ ├───(auth)
│ │ ├───sign-in
│ │ │ └───[[...sign-in]]
│ │ └───sign-up
│ │ └───[[...sign-up]]
│ ├───(root)
│ │ ├───(home)
│ │ │ └───ask-question
│ │ ├───collection
│ │ ├───community
│ │ ├───jobs
│ │ ├───profile
│ │ │ ├───edit
│ │ │ └───[id]
│ │ ├───question
│ │ │ ├───edit
│ │ │ │ └───[id]
│ │ │ └───[id]
│ │ └───tags
│ │ └───[id]
│ └───api
│ ├───chatgpt
│ ├───trudvsem
│ └───webhook
├───components
│ ├───cards
│ ├───forms
│ ├───home
│ ├───jobs
│ ├───layout
│ ├───profile
│ ├───shared
│ │ ├───filters
│ │ ├───navbar
│ │ ├───search
│ │ ├───sidebar
│ │ └───ui
│ └───ui
├───constants
├───content
├───context
├───database
├───lib
│ └───actions
├───public
│ └───assets
│ ├───icons
│ └───images
├───styles
└───typesОглавление
devOverflow разработан с использованием следующих технологий:
- TypeScript: TypeScript - это типизированный JavaScript.
- Next.js: Next.js - это фреймворк React для создания веб-приложений, статически генерирующих страницу на стороне сервера.
- Tailwind CSS: Tailwind CSS - это CSS-фреймворк для быстрой верстки пользовательских интерфейсов.
- ESLint: ESLint - это инструмент статического анализа кода для выявления проблем в JavaScript коде.
- Prettier: Prettier - это настраиваемый форматировщик кода.
- Clerk: Clerk - это API аутентификации для разработчиков, который обрабатывает всю логику регистрации пользователя, входа в систему.
- Shadcn-UI: Shadcn UI - это библиотека пользовательского интерфейса React, которая помогает разработчикам быстро создавать современные веб-приложения.
- TinyMCE: TinyMCE - самая популярная в мире библиотека для редактирования текста.
- MongoDB: MongoDB - это нереляционная, основанная на документах распределенная база данных, созданная для разработки современных приложений.
- Mongoose: Mongoose - это инструмент моделирования объектов MongoDB, предназначенный для работы в асинхронной среде.
- Prism.js: Prism - это легкий, расширяемый парсер синтаксиса.
- Query String: Парсер строки запроса URL.
- Svix: Svix - это прокси-сервер webhook, который позволяет получать веб-хуки локально.
- Zod: Zod - это TypeScript библиотека для валидации данных.
- Vercel: Vercel - это облачная платформа для разработчиков, предоставляющая инфраструктуру для быстрого развертывания веб-приложения.
Чтобы запустить проект в вашей среде разработки, следуйте нижеописанной пошаговой инструкции.
Для локального запуска, вам необходимо установить на вашем локальном компьютере следующие программы:
Шаг 0:
Примечание CLERK_PUBLISHABLE_KEY и CLERK_SECRET_KEY в файле .env.
Примечание MONGODB_URL в файле .env, расположенном в папке server.
Примечание NEXT_PUBLIC_TINYMCE_API_KEY в файле .env.
Примечание OPENAI_API_KEY в файле .env (не является обязательным).
После выполнения всех приведенных выше инструкций, необходимо создать новый webhook на Clerk. Для этого перейдите в Панель управления Clerk, во вкладку "Webhooks", а затем нажмите "Add Endpoint". В качестве URL введите http://<ССЫЛКА-НА-ВАШ-САЙТ>/api/webhook/clerk. Для событий выберите "user". Затем нажмите "Create", чтобы создать webhook. Получите секретный ключ и установите его как переменную окружения CLERK_WEBHOOK_SECRET в файле .env.
Шаг 1:
Загрузите или клонируйте это репозиторий, воспользовавшись командой ниже:
git clone https://github.com/athead/devoverflow.gitШаг 2:
Выполните следующую команду в корневом каталоге загруженного репозитория, чтобы установить все зависимости:
npm installШаг 3:
Выполните следующую команду, чтобы запустить логальный сервер разработки:
npm run devШаг 4:
Откройте http://localhost:3000 с помощью вашего браузера, чтобы увидеть результат.
Все скрипты описны в файле package.json. Вот список всех скриптов:
| Скрипт | Действие |
|---|---|
npm install |
Установка зависимостей |
npm run dev |
Запуск локального сервера по адресу localhost:3000 |
npm run build |
Сборка в production режиме в ./dist/ |
npm run start |
Локальный запуск production сборки |
npm run lint |
Запуск ESLint |
npm run analyze |
Запуск Bundle analyzer |
npm run structure |
Генерация структуры папок |
Переменные окружения используются для конфигурирования приложения.
Переменные окружения — это переменные, которые задаются в операционной системе или оболочке, обычно используемые для настройки программ.
devOverflow использует Clerk, TinyMCE, OpenAI API и MongoDB как внешние службы. Вам необходимо создать учетную запись в каждой из этих служб и получить учетные данные (ключи API) для запуска приложения.
Создайте файл .env в корневом каталоге проекта и добавьте следующие переменные окружения:
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=<CLERK_PUBLISHABLE_KEY>
CLERK_SECRET_KEY=<CLERK_SECRET_KEY>
NEXT_CLERK_WEBHOOK_SECRET=<CLERK_WEBHOOK_SECRET>
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/onboarding
NEXT_PUBLIC_TINY_MCE_API_KEY=<YOUR_TINY_MCE_API_KEY>
MONGODB_URL=<YOUR_MONGODB_URL>
NEXT_PUBLIC_SERVER_URL=<YOUR_SERVER_URL>
OPENAI_API_KEY=<YOUR_OPENAI_API_KEY>Вы можете создать оптимизированную рабочую сборку с помощью следующей команды:
npm run buildСамый простой способ развернуть это Next.js приложение - использовать платформу Vercel.
Вы также можете развернуть это Next.js приложение с помощью Netlify.
Ознакомтесь с Next.js документацией для получения более подробной информации.
Совместная работа - это то, что делает open-source сообщество таким замечательным местом для обучения, вдохновения и творчества. Я высоко ценю любой ваш вклад.
Чтобы исправить ошибку или улучшить существующий модуль, выполните следующие действия:
- Форкните репозиторий
- Создайте новую ветку (
git checkout -b improve-feature) - Внесите соответствующие изменения в файлы
- Зафиксируйте свои изменения (
git commit -am 'Improve feature') - Запуште в ветку (
git push origin improve-feature) - Создайте pull request 🎉
Если вы обнаружили ошибку (неспособность модуля выполнять предназначенную функцию), пожалуйста, откройте запрос здесь указав проблему с заголовком и четким описанием.
Если вы хотите запросить новую функцию, не стесняйтесь сделать это, открыв запрос здесь. Пожалуйста, укажите примеры запросов и соответствующие им результаты.
Я хотел бы выразить свою благодарность следующим людям, которые помогли мне с этим проектом и сделали его возможным:
JSMastery. Ultimate Next.js 14 Course | Become a top 1% Next.js 14 developer.
devOverflow — это программное обеспечение с открытым исходным кодом, лицензированное MIT, его можно использовать бесплатно - более подробную информацию смотрите в разделе ЛИЦЕНЗИЯ.