notion clone

? Noción clon

Crear y editar notas como en la noción

Este clon intenta replicar algunas de las excelentes características de toma de notas que tiene la noción. Si aún no conoce la noción. ¡Sin embargo, le recomiendo verlo!

? Demo en vivo: noción-clone.kmuenster.com

? Artículo mediano: Cómo construir un editor de texto como la noción

---

---

Características

• Comandos de corte (escriba / para convertir el bloque en diferentes tipos de contenido)
• Soporte HTML (use etiquetas HTML regulares como <a> en bloques de texto)
• Soporte de imagen (cargar imágenes usando el comando /image )
• Arrastrar y soltar (reordenar los bloques fácilmente por arrastrar y soltar)
• Edición de invitados (cualquiera puede crear páginas públicas y compartirlas a través de Link)
• Gestión de usuarios (cree una cuenta para crear páginas privadas)
• Trabajos programados (eliminar páginas y cuentas inactivas automáticamente)

Pila de tecnología

El frontend está construido con Next.js y completamente reproducido. En el backend, una API REST maneja el guardia de contenido del usuario y administración de usuarios.

Interfaz

Next.js · react.js · scss/sass

Backend

Express.js · MongoDB con Mongoose · Nodemailer · JWT (basado en cookies)

Instalación

1. Clon el proyecto

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

2. Agregar variables de entorno

   Backend: cree un archivo .env en el directorio 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: cree un archivo .env.local en el directorio frontend :

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

3. Instalar y ejecutar backend (http: // localhost: 8080)

    cd backend
   npm install
   npm start

4. Instalar y ejecutar frontend (http: // localhost: 3000)

    cd frontend
   npm install
   npm run dev

Alojamiento

Puede alojar la aplicación en casi cualquier proveedor que admita aplicaciones de nodos y dominios personalizados. Decidí organizar el frontend en Vercel.com y el backend en Heroku.com. Pero puede alojar ambos, frontend y backend, en el mismo proveedor si lo desea.

MongoDB Atlas

Tienes que crear un nuevo clúster MongoDB por adelantado. Almacenará toda su página y bloqueará los datos. Puede crear uno gratis en MongoDB Atlas.

Asegúrese de crear las siguientes colecciones:

• páginas
• usuarios

Asegúrese de permitir el acceso a la red a todos (debido a Heroku).

Backend

Si desea implementar el backend en Heroku.com, cree una nueva aplicación en su región preferida en Heroku.com.

Asegúrese de agregar todas las variables ambientales de producción para el backend. Puede ver qué variables se necesitan en la parte de instalación de este ReadMe.

Asegúrese de agregar un dominio personalizado para su API de backend. Dado que la aplicación utiliza una autenticación basada en cookies, tenemos que ejecutar backend y frontend en el mismo dominio. Yo, por ejemplo, ejecuto el frontend en www.notion-clone.kmuenster.com y el backend en api.notion-clone.kmuenster.com .

¿Quieres ejecutar trabajos programados? Para eliminar páginas y usuarios inactivos, ejecuto trabajos programados con frecuencia. Si también desea esta función, debe agregar más dinamómetro a su aplicación y ejecutar el trabajo $ node jobs/index.js a través de Heroku Scheduler.

Por último, puede implementar su aplicación usando Heroku Git.

Asegúrese de que cuando empuje el backend a Heroku, haga un empuje de subárbol git ya que notion-clone es un mono-repetición que contiene backend y frontend. Así que ejecuta git subtree push --prefix backend heroku master en lugar de git push heroku master . Por lo tanto, solo empujamos la parte del backend.

Interfaz

Si desea implementar el frontend en Vercelio.com, puede usar fácilmente la CLI Vercel.

Con el Vercel CLI, no tenemos que hacer un sugerente, en su lugar, solo podemos cambiar a la carpeta frontend y ejecutar el comando vercel para implementar:

 cd frontend
vercel

Esto lo llevará a través de la guía de configuración para su aplicación frontend. Luego, la aplicación debe implementarse con éxito.

Asegúrese de agregar el punto final de la API de backend como una variable ambiental de producción en Vercel.com.

Asegúrese de agregar un dominio personalizado para su interfaz (que idealmente coincide con el dominio que ha especificado en sus variables ambientales de backend)

Acerca de

Konstantin Münster - Konstantin.digital

Distribuido bajo la licencia MIT. Vea LICENSE para más información.

https://github.com/konstantinmuenster