Recreando Linear.app

Live Demo Aqui

Introducción:

Recrear la página de inicio de Linear.app ha sido un desafío emocionante. En este artículo, te guiaré a través del proceso de reconstrucción utilizando Next JS, Tailwind CSS, TypeScript, ESLint, Prettier, Husky y PostCSS. Prepárate mientras exploramos el mundo de las herramientas y técnicas modernas del desarrollo web.

El Stack:

Para este proyecto, opté por Next JS como el framework de React. Sus capacidades de renderizado del lado del servidor y su integración perfecta con TypeScript lo convierten en una excelente elección. Tailwind CSS, con su enfoque basado en utilidades, se encargará del estilo, asegurando que logremos una precisión perfecta en los píxeles. ESLint y Prettier mantendrán nuestro código limpio y libre de errores, mientras que Husky se asegurará de que nuestros commits cumplan con los estándares predefinidos. Por último, PostCSS manejará cualquier necesidad adicional de estilo.

import { Button } from './Button';
import { Container } from './Container';

type FeaturesProps = {
  children: React.ReactNode;
  color: string;
  colorDark: string;
};

export const Features = ({ children, color, colorDark }: FeaturesProps) => {
  const { ref, inView } = useInView({ threshold: 0.2, triggerOnce: false });

El Proceso de desarrollo:

Inicialicé un nuevo proyecto de Next JS e instalé las dependencias necesarias. Con Tailwind CSS configurado y TypeScript listo, creé la estructura básica de la página de inicio.

Descomponer la página de inicio de Linear.app en componentes reutilizables fue crucial. Desde la sección de héroe hasta los aspectos más destacados de las funciones, cada componente fue meticulosamente elaborado para reflejar el diseño original.

export const HeroImage = () => {
 const { ref, inView } = useInView({ threshold: 0.8, triggerOnce: true });
 const [lines, setLines] = useState<Line[]>([]);
 const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);

 const removeLine = (id: string) => {
   setLines((prev) => prev.filter((line) => line.id !== id));
 };

El enfoque basado en utilidades de Tailwind CSS me permitió estilizar los componentes rápidamente. Su amplio conjunto de clases de utilidad facilitó la obtención del diseño y diseño deseados.

Aunque el enfoque era principalmente en el desarrollo frontend, agregar interactividad donde fuera necesario fue esencial. Ya sea animaciones de desplazamiento suaves o menús de navegación receptivos, JavaScript impulsó estas funcionalidades.

ESLint y Prettier jugaron un papel importante en mantener la consistencia del código e identificar posibles problemas desde el principio. Con su ayuda, me aseguré de que la base de código cumpliera con las mejores prácticas y estándares de codificación.

Entonces:

Contáctame para transformar tu sitio web y llevarlo al siguiente nivel.