Stars Fork GitHub commits Pull requests

demo

License Top Language Contributors Release PRs

Демо проекта: 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

Используемые технологии

Чтобы запустить проект в вашей среде разработки, следуйте нижеописанной пошаговой инструкции.

Для локального запуска, вам необходимо установить на вашем локальном компьютере следующие программы:

• Node.js
• NPM
• Git

Шаг 0:

Примечание !!️ приложение использует Clerk для аутентификации и управления пользователями, вам необходимо создать учетную запись Clerk здесь и установить переменные окружения CLERK_PUBLISHABLE_KEY и CLERK_SECRET_KEY в файле .env.

Примечание !!️ приложение использует базу данных MongoDB, необходимо создать базу данных и подключить ее к приложению, для этого измените переменную окружения MONGODB_URL в файле .env, расположенном в папке server.

Примечание !!️ приложение использует TinyMCE, необходимо создать учетную запись TinyMCE здесь и установить переменную окружения NEXT_PUBLIC_TINYMCE_API_KEY в файле .env.

Примечание !!️ приложение использует OpenAI API для генерации ответов, необходимо создать учетную запись OpenAI здесь и установить переменную окружения 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. Вот список всех скриптов:

Переменные окружения используются для конфигурирования приложения.

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

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.

Развертывание на Vercel

Вы также можете развернуть это Next.js приложение с помощью Netlify.

Развертывание на Netlify

Ознакомтесь с Next.js документацией для получения более подробной информации.

Совместная разработка

Совместная работа - это то, что делает open-source сообщество таким замечательным местом для обучения, вдохновения и творчества. Я высоко ценю любой ваш вклад.

Чтобы исправить ошибку или улучшить существующий модуль, выполните следующие действия:

1. Форкните репозиторий
2. Создайте новую ветку (git checkout -b improve-feature)
3. Внесите соответствующие изменения в файлы
4. Зафиксируйте свои изменения (git commit -am 'Improve feature')
5. Запуште в ветку (git push origin improve-feature)
6. Создайте pull request 🎉

Если вы обнаружили ошибку (неспособность модуля выполнять предназначенную функцию), пожалуйста, откройте запрос здесь указав проблему с заголовком и четким описанием.

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

Я хотел бы выразить свою благодарность следующим людям, которые помогли мне с этим проектом и сделали его возможным:

• Clerk
• MongoDB
• Mongoose
• Zod
• Shadcn
• Tailwind CSS
• Svix
• TinyMCE
• OpenAI API
• Vercel
• JavaScript Mastery

JSMastery. Ultimate Next.js 14 Course | Become a top 1% Next.js 14 developer.

Telegram

devOverflow — это программное обеспечение с открытым исходным кодом, лицензированное MIT, его можно использовать бесплатно - более подробную информацию смотрите в разделе ЛИЦЕНЗИЯ.