Creación de LinkSnatch: una aplicación de marcadores con Next.js y Tailwind CSS

Creación de LinkSnatch: una aplicación de marcadores con Next.js y Tailwind CSS - Amit Merchant: un blog sobre PHP, JavaScript y más

 

Durante mucho tiempo quise aprender Next.js y Tailwind CSS. Y la mejor manera, lo sé, de aprender algo es construir algo con ello. Así que decidí construir algo que usaría en mi vida diaria.

Siempre he querido algo donde pueda anotar todas las conexiones que encuentro en mi vida cotidiana. Y probé muchas aplicaciones de marcadores, pero ninguna de ellas funcionó realmente para mí. Así que decidí construir el mío propio.

Se llama LinkSnatch.

Me di algunas restricciones durante su construcción:

  • La aplicación debe ser mínima y sin distracciones.
  • Debería ser rápido.
  • La interfaz de usuario debe ser hermosa.
  • Características mínimas.

Con eso en mente, comencé a construirlo.

Índice
  1. La pila de tecnología
  2. La interfaz de usuario
  3. Alojamiento
  4. Comida para llevar

La pila de tecnología

decidí construir LinkSnatch utilizando Next.js y Tailwind CSS. Nunca antes había usado Next.js, pero he oído muchas cosas buenas al respecto. Lo mismo ocurre con Tailwind CSS.

Así que elegí estas dos tecnologías para construir LinkSnatch.

Para comenzar, utilicé create-next-app para iniciar el proyecto.

Instalé Tailwind CSS usando la guía oficial de Tailwind CSS con Next.js.

A continuación, quería usar componentes listos para usar para la interfaz de usuario. Para cosas como un menú receptivo y un modo oscuro. Así que decidí usar Preline, que es una colección de hermosos componentes de interfaz de usuario creados con Tailwind CSS. Así que lo instalé también.

Usé React Hot Toast para mostrar notificaciones de tostadas. Así que lo instalé también.

Por último, para todo el gran trabajo relacionado con SEO, utilicé Next SEO, que parece ser el paquete de SEO más popular para Next.js en este momento.

Con eso, el proyecto estaba prácticamente listo para funcionar.

La interfaz de usuario

La aplicación consta principalmente de dos páginas.

  • Una página de inicio donde puede agregar nuevos enlaces y buscar enlaces existentes.
  • Una página acerca de donde puede leer más sobre la aplicación.

Con Next.js, puede crear páginas en el pages directorio telefónico. Así que creé dos páginas en el pages directorio con nombres index.js Y about.js. Lo que me gusta de Next.js es que crea automáticamente rutas para estas páginas. Así, la página de inicio estaría disponible en / y la página acerca de estaría disponible en /about.

Por lo tanto, quería que la interfaz de usuario fuera mínima y sin distracciones donde solo hubiera un campo de entrada y una lista de enlaces dispuestos en una cuadrícula. El campo de entrada se usaría para agregar nuevos enlaces, así como para buscar enlaces existentes.

Cuando el usuario pega un enlace, el campo de entrada le dice al usuario que ahora está listo para guardar el enlace. Y cuando el usuario hace clic en el botón Guardar o presiona Intro, el enlace se valida, extrae los metadatos de la URL mediante jsonlink.io y los guarda en el almacenamiento local del navegador como una matriz de objetos.

Así es como se vería la matriz de objetos.

[
    {
        "id":"7s3wdmup",
        "title":"Apple",
        "url":"https://apple.com/",
        "timestamp":1677252014
    },
    {
        "id":"307tvwyv",
        "title":"Pixar Animation Studios",
        "url":"https://pixar.com/",
        "timestamp":1677252020
    }
]

El enlace agregado se mostraría en una cuadrícula. La cuadrícula muestra el nombre de dominio y el título del enlace. También habría un botón de eliminación para eliminar el enlace y un botón de copia para copiar la URL en el portapapeles.

Actualmente, la aplicación guarda todo en el almacenamiento local del navegador. Entonces, si el usuario borra el almacenamiento local del navegador, todos los enlaces desaparecerán. Planeo agregar un backend a la aplicación en el futuro para que los enlaces se puedan sincronizar entre dispositivos. Pero esa es una historia para otro día.

Y eso es más o menos lo que hace. Es una aplicación muerta simple.

Aquí está todo en acción.

LinkSnatch en acción

La aplicación es de código abierto y puede encontrar el código fuente en GitHub.

Alojamiento

Una vez que la aplicación estuvo lista, quise alojarla en algún lugar. Uso Cloudflare Pages para alojar mi blog. Así que decidí usarlo para hospedaje. LinkSnatch como ya lo conocía.

Seguí la guía del sitio Implementar un Next.js de Cloudflare para comenzar. Y fue bastante simple.

Y en cuestión de minutos, LinkSnatch estaba listo y funcionando.

Comida para llevar

me gustaba construir LinkSnatch. Fue una gran experiencia de aprendizaje para mí. Aprendí mucho sobre Next.js y Tailwind CSS. Me había dado un plazo de 5 días para construirlo con un perímetro ajustado. Y pude construirlo a tiempo. Así que estoy bastante contento con el resultado.

Si quieres conocer otros artículos parecidos a Creación de LinkSnatch: una aplicación de marcadores con Next.js y Tailwind CSS puedes visitar la categoría Código.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas