notion clone

? Понятие клон

Создать и редактировать заметки, как в понятии

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

? Живая демонстрация: intision-clone.kmuenster.com

? Средняя статья: Как построить текстовый редактор, как понятие

---

---

Функции

• Команды SLASH (введите / чтобы превратить блок в разные типы контента)
• Поддержка HTML (используйте обычные теги HTML, такие как <a> в текстовых блоках)
• Поддержка изображения (загрузить изображения с помощью команды /image )
• Перетащите и выпадайте (легко заправляется закуски при перетаскивании)
• Редактирование гостей (любой может создавать общественные страницы и поделиться ими по ссылке)
• Управление пользователями (создайте учетную запись для создания частных страниц)
• Запланированные задания (автоматически удалить неактивные страницы и учетные записи)

Технический стек

Фронтан построен с помощью next.js и полностью отображаемой на стороне сервера. На бэкэнде API REST обрабатывает сохранение пользовательского контента и управления пользователями.

Внешний интерфейс

Next.js · React.js · scss/sass

Бэкэнд

Express.js · MongoDB с Mongoose · Nodemailer · jwt (на основе печенья)

Установка

1. Клонировать проект

    git clone https://github.com/konstantinmuenster/notion-clone.git
    cd notion-clone

2. Добавить переменные среды

   Бэкэнд: Создайте файл .env в справочнике backend :

    FRONTEND_URL="http://localhost:3000"
   DOMAIN="localhost"
   JWT_KEY="yourSecretForTokenGeneration"
   PORT=8080
   MONGO_URI="mongodb+srv://username:[email protected]/database?retryWrites=true&w=majority"
   MAIL_HOST="smtp.sendgrid.net"
   MAIL_PORT=465
   MAIL_USER="apiKey"
   MAIL_SENDER="Your Name <[email protected]>"
   MAIL_PASSWORD="yourSendGridApiKey"
   

   Frontend: Создайте файл .env.local в каталоге frontend :

    NEXT_PUBLIC_API="http://localhost:8080" // references your Backend API endpoint
   

3. Установить и запустить Backend (http: // localhost: 8080)

    cd backend
   npm install
   npm start

4. Установите и запустите Frontend (http: // localhost: 3000)

    cd frontend
   npm install
   npm run dev

Хостинг

Вы можете разместить приложение практически на любом поставщике, который поддерживает приложения узлов и пользовательские домены. Я решил разместить фронт на Vercel.com и бэкэнд на Heroku.com. Но вы можете размещать обоих, Frontend и Backend, на одного поставщика, если хотите.

Mongodb Atlas

Вы должны создать новый кластер MongoDB заранее. Он будет хранить все ваши страницы и блокировать данные. Вы можете создать один бесплатно на Mongodb Atlas.

Убедитесь , что вы создаете следующие коллекции:

• страницы
• пользователи

Убедитесь , что вы разрешаете сеть доступ ко всем (из -за Героку).

Бэкэнд

Если вы хотите развернуть бэкэнд на Heroku.com, создайте новое приложение в предпочтительном регионе на Heroku.com.

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

Убедитесь , что вы добавляете пользовательский домен для вашего бэкэнд API. Поскольку в приложении используется аутентификация на основе файлов cookie, мы должны запустить бэкэнд и фронт на том же домене. Я, например, запускаю фронт на www.notion-clone.kmuenster.com и бэкэнд на api.notion-clone.kmuenster.com .

Хотите запустить запланированные задания? Чтобы удалить неактивные страницы и пользователей, я часто запускаю запланированные задания. Если вам также нужна эта функция, вы должны добавить больше Dynos в ваше приложение и запустить задание $ node jobs/index.js через планировщик Heroku.

Наконец, вы можете развернуть свое приложение с помощью Heroku Git.

Убедитесь , что, когда вы толкаете бэкэнд к Heroku, вы делаете подделка GIT, так как notion-clone -это моно-репо, содержащий бэкэнд и фронт. Так что запустите git subtree push --prefix backend heroku master вместо git push heroku master . Таким образом, мы только толкаем бэкэнд.

Внешний интерфейс

Если вы хотите развернуть Frontend на Vercel.com, вы можете так легко использовать CLI Vercel.

С помощью CLI Vercel нам не нужно делать нажатие поддерево, вместо этого мы можем просто переключиться на папку Frontend и запустить команду vercel для развертывания:

 cd frontend
vercel

Это приведет вас через Руководство по настройке для вашего приложения. После этого приложение должно быть успешно развернуто.

Убедитесь , что вы добавляете бэкэнд -конечную точку API в качестве производственной переменной окружающей среды на Vercel.com.

Убедитесь , что вы добавляете пользовательский домен для вашего фронта (который в идеале соответствует домену, который вы указали в ваших бэкэнд -переменных окружающей среды)

О

Константин Мюнстер - konstantin.digital

Распределено по лицензии MIT. Смотрите LICENSE для получения дополнительной информации.

https://github.com/konstantinmuenster