Denis A. M. Portfolio - Inicio del proyecto

Inicio la secció amb aquest article dedicat al que probablement serà el meu primer desenvolupament públic. Aquests articles no pretenen ser guies per ensenyar res a ningú, més aviat és un diari del procés de desenvolupament.

Cada projecte el començaré dividint les idees i analitzant les necessitats. Intentaré plasmar la feina el més detallada possible i segurament si després veig que cal fer canvis o actualitzacions en el codi que influeixin en aquest article intentaré afegir referències.

El meu objectiu

El que pretenc és barallar-me amb React per aprendre’l millor juntament amb TypeScript creant una aplicació des de zero i utilitzant tecnologies modernes. La idea neix simplement de la necessitat, ja que a la feina estic intentant diversificar el meu perfil perquè fins ara porto 4 anys amb Power Apps, uns pocs mesos en la solució d’errors d’estils en projectes ja en producció amb React i en el meu propi lloc desenvolupat amb Astro. Finalment necessito omplir el meu portfolio amb algun projecte així que si aquest projecte té èxit podria ser el primer.

Ja de pas, també aquest projecte em dona contingut per donar-li una mica de vida al meu portfolio i crear alguna cosa que tenia ganes de fer des de fa molt de temps, un jardí digital. Un lloc on deixar les meves idees, descobriments o progressos en el desenvolupament.

En el transcurs de desenvolupament d’aquest projecte, StarDraw ✨😎 no busco només clonar funcionalitats, sinó ja de pas entendre el “com” funcionen algunes coses per darrere i aportar algunes idees pròpies que facin la meva eina més útil del que a mi m’ofereix Excalidraw. El projecte serà FOSS i es publicarà a GitHub perquè qualsevol pugui usar-lo o contribuir-hi. A més, sospesaré la idea de mantenir-la en producció si no es disparen els costos.

Arribats a aquest punt, les tecnologies que estan decidides són:

React 19 + Vite + TypeScript

I les alternatives en respectives tecnologies que em plantejo investigar són:

Konva o Fabric.js
Overwatch o Zustand
SortableJS o React DnD

La idea

Mentre aprenc, vull construir un clon d’Excalidraw però personalitzat al meu gust, tant en disseny com en funcionalitats, amb alguns extres donat que trobo a faltar coses en l’eina original.

Millor control dels colors en mode fosc.
Guardar/exportar directament una imatge PNG/JPG de qualsevol element seleccionat del canvas.
Ajust de quadrícula per als elements.
Més opcions de tipografia per als textos.
Millor gestió de mides de text.
Millor gestió de colors de text.
Suport per a diagrames tipus de nodes o bases de dades.

Parts importants que vull mantenir són la filosofia “local first” i la possibilitat d’exportar els projectes en un format que més tard es pugui carregar i continuar editant.

Stack Tecnològic

1. React 19 + Vite + TypeScript

No he treballat gaire en projectes des de zero amb React, però per tot el que tinc llegit fins ara sé que és una tecnologia madura, de llarg recorregut i amb moltes biblioteques que li donen suport que faciliten fer molta varietat de coses, i per això la trio. Però el més important, com he mencionat, tinc en concret la necessitat d’aprendre’l bé per la meva feina juntament amb TypeScript així que això està decidit des de l’inici.

2. Biblioteca de canvas

Aquesta seria la peça més important del projecte, òbviament és una cosa que no construiré de zero, avui no 🤣, i com no tinc ni idea de com desenvolupar aquest tipus d’aplicació li pregunto a Gemini 3 a veure què em recomana usar i la seva resposta és Konva. Segons em diu, Konva és una biblioteca per al maneig del canvas.

“Treballar directament amb l’API de Canvas del navegador és verbós i complex de mantenir. Konva ens ofereix una abstracció orientada a objectes (capes, grups, formes) i react-konva ens permet manejar-ho de forma declarativa, integrant-se perfectament amb el cicle de vida de React.”

Bé, i com no em quedaré amb la primera opció segueixo buscant alternatives, i pel camí descobreixo Fabric.js, que també és una biblioteca per al maneig del canvas força utilitzada. Davant la indecisió i com soc una mica fanàtic del rendiment busco documentació al respecte i trobo un article recent.

Konva.js vs Fabric.js: In-depth Technical Comparison and Use Case Analysis

La conclusió que es treu és que Konva ofereix un millor rendiment quan s’enfronta a molta càrrega. En el cas de Fabric.js, no és mala biblioteca en absolut, el seu avantatge és que és més fàcil d’utilitzar a canvi de menor rendiment.

És difícil decidir, el que penso és que és probable que el rendiment que ofereix Konva no l’arribi a aprofitar mai ja que expliquen que està orientat a la creació de jocs, i això és dir molt. Fabric.js pel seu costat és probable que m’ajudi a no escalfar-me massa el cap i per tant a no perdre massa temps… i escolta! si canvio d’opinió crec que mai és tard per refactoritzar i provar amb Konva un cop el projecte estigui acabat. Així que per ara crec que provaré amb Fabric.js.

3. Maneig d’estats globals

Això ho tinc bastant clar. Zustand és una biblioteca lleugera i molt utilitzada. No és l’única opció, i pel camí llegeixo sobre un nou competidor que té molt millor rendiment, Overwatch TS, però em quedo amb Zustand perquè tampoc és pla de complicar-me. M’apunto el d’Overwatch per a algun futur projecte. Aquí la meta és aprendre React i per això no m’he de complicar massa, a més aquesta filosofia és la correcta si no vull acabar abandonant el projecte, necessito trencar la barrera i publicar el meu primer projecte.

Us deixo amb un article que compara dues de les principals biblioteques de maneig d’estats globals i Overwatch TS. O sigui, de veritat, si és cert el d’Overwatch TS sembla que els passa la mà per la cara. Però és una mica el mateix cas de Konva ¿val la pena per a projectes petits de baixes exigències?

Redux Toolkit vs Zustand vs Overwatch: Who wins the performance benchmark?

4. Eines auxiliars

Vaig preguntar a Gemini 3 algunes coses respecte a si Fabric.js o Konva oferien funcionalitats per organitzar capes o elements de la UI fàcilment amb Drag & Drop i em va recomanar utilitzar SortableJS.

Suposo que més endavant quan arribi al tema ho investigaré millor, però per ara vaig veure aquest altre article que compara tres biblioteques per manejar drag & drop en React.

react-dnd, sortablejs, vuedraggable

Finalment, mentre feia proves vaig començar a usar les icones lucide-react així que en aquest projecte les seguiré usant.

Primers passos del desenvolupament

El bàsic, creo el projecte amb Vite i un template de React amb TypeScript. Després, instal·lar Fabric.js, Zustand, Tailwind i lucide-react.

bash

npm create vite@latest -- --template react-ts
npm install fabric zustand tailwindcss lucide-react

npm create vite@latest -- --template react-ts
npm install fabric zustand tailwindcss lucide-react

pnpm create vite@latest -- --template react-ts
pnpm add fabric zustand tailwindcss lucide-react

pnpm create vite@latest -- --template react-ts
pnpm add fabric zustand tailwindcss lucide-react

yarn create vite --template react-ts
yarn add fabric zustand tailwindcss lucide-react

yarn create vite --template react-ts
yarn add fabric zustand tailwindcss lucide-react

Respecte a Tailwind, explicaré un moment els següents passos. Des de la versió 4 Tailwind s’integra amb Vite mitjançant un plugin, un cop instal·lat tailwindcss, on abans calia inicialitzar-lo ara cal instal·lar el plugin. Executarem aquest comandament per instal·lar-lo com a dependència de desenvolupament amb -D.

bash

npm install -D @tailwindcss/vite

npm install -D @tailwindcss/vite

pnpm add -D @tailwindcss/vite

pnpm add -D @tailwindcss/vite

yarn add -D @tailwindcss/vite

yarn add -D @tailwindcss/vite

Un cop instal·lat el plugin, cal afegir-lo a l’arxiu de configuració de Vite fent l’import de tailwind i afegint-lo com a plugin.

import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [tailwindcss(), ...],
});

import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [tailwindcss(), ...],
});

El resultat en l’actualitat és una cosa com aquesta:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite' // Importem el plugin

export default defineConfig({
plugins: [
  react(),
  tailwindcss(),  // I l'afegim aquí. Plugins que modifiquen el 
                  // build (com React o Tailwind) van aquí.
],
})

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite' // Importem el plugin

export default defineConfig({
plugins: [
  react(),
  tailwindcss(),  // I l'afegim aquí. Plugins que modifiquen el 
                  // build (com React o Tailwind) van aquí.
],
})

I ara reemplaça el contingut d’index.css pel següent import:

css

@import "tailwindcss"

@import "tailwindcss"

Ja arribem als últims passos, cal netejar una mica el codi per defecte que genera la plantilla de Vite. Només hem d’eliminar l’arxiu src/App.css, netejar l’arxiu src/App.tsx i assegurar-nos que src/main.tsx contingui el bàsic.

tsx

function App() {
  return (
    <div>
      <h1 className="text-3xl font-bold underline">Star Draw</h1>
    </div>
  )
}

export default App

function App() {
  return (
    <div>
      <h1 className="text-3xl font-bold underline">Star Draw</h1>
    </div>
  )
}

export default App

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'

createRoot(document.getElementById('root')!).render(

<StrictMode>
  <App />
</StrictMode>,
)

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'

createRoot(document.getElementById('root')!).render(

<StrictMode>
  <App />
</StrictMode>,
)

Esborraré també els arxius assets/react.svg i assets/vite.svg.

Ara, idealment, cada vegada que completem una peça de codi, canvi o característica el seu és guardar canvis a git amb un commit, però no tenim repositori inicialitzat, per la qual cosa l’inicialitzarem creant el repositori de git local i després el pujarem a GitHub.

bash

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/hunkstalker/stardraw
git push -u origin main

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/hunkstalker/stardraw
git push -u origin main

Recordatori:

git init: Inicialitza el repositori de git local.
git add .: La paraula add serveix per afegir canvis a l’stage (preparació) i el punt . selecciona tots els arxius.
git commit -m "Initial commit": Crea el primer commit. El flag -m permet afegir el missatge del commit directament.
git branch -M main: Renombra la branca actual a main.

Nota: Això és útil si la teva configuració per defecte crea la branca com a master.
git remote add origin ...: Vincula el repositori local amb el remot. origin és l’àlies que usarem per referir-nos a la URL del repositori (https://github.com/hunkstalker/stardraw).
git push -u origin main: Puja els canvis a GitHub. El flag -u vincula la teva branca local main amb la remota origin/main, permetent-te usar simplement git push en el futur.

Al final de cada article tractaré de deixar l’enllaç al commit a GitHub concret perquè es pugui veure com va quedar el codi exacte en aquest punt.

Codi final - Initial commit

Bé! I amb això tinc tot el procés inicial de crear un projecte a Vite + React deixant-lo completament net. I el tenim pujat a GitHub. Aquí quedarà per quan qualsevol vulgui consultar-lo. Això no és una guia, però podeu aprendre amb mi.

En la pròxima entrada em posaré amb l’estructura del projecte creant les carpetes i arxius principals i creant el Canvas amb Fabric.js.

Més Recents

Notes

DevLogs

Més Recents

Notes

Undo Last Commit

Flujo de trabajo intermedio con Git

Smart Prefetching: Equilibrio entre Velocidad y Recursos

Comandos básicos de Git para iniciar proyecto

JavaScript: ¿Map o ForEach?

Scope CSS: Astro vs Frameworks JS

DevLogs

Game Dev amb Godot

Fonaments de TypeScript

StarDraw ✨

Inicio del proyecto

El meu objectiu

La idea

Stack Tecnològic

1. React 19 + Vite + TypeScript

2. Biblioteca de canvas

3. Maneig d’estats globals

4. Eines auxiliars

Primers passos del desenvolupament