pisa-dev / pisa.dev

Source code for pisa.dev website!

---

Getting started

How to execute the stack locally:

• Clone the repo in a local directory:

git clone [email protected]:pisa-dev/pisa.dev.git

• Navigate to the folder
• Run:

npm install

• Install Docker

Refer to Docker's official documentation

• Install mysql image

docker pull mysql

• Launch mysql locally inside a docker container:

docker run --name mysql -e MYSQL_ROOT_PASSWORD=secret -p 3306:3306 -d mysql

• Copy the .env.example file content in your .env file
• Set the variable DATABASE_URL = 'mysql://root:[email protected]:3306/pisadev' in your .env file
• Run to initialize an empty database:

npx prisma db push

If Prisma is not installed automatically, refer to Prisma's official documentation

• Run to execute Next.js locally:

npm run dev

• Navigate to http://localhost:3000

Contributing

To contribute follow the guidelines and don't hesitate to ask for help or guidance.

---

This is an app bootstrapped according to the init.tips stack, also known as the T3-Stack.

pisa.dev's Issues

OG (opengraph) images

Quando condividiamo un link sui social sarebbe molto più bello se mostrasse un'anteprima.

Vercel recentemente ha rilasciato una libreria che sembra fare al caso nostro: https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation

In questo modo dovremmo essere in grado di generare dinamicamente dei banner per gli eventi.

DoD:

• seguire la doc linkata e gli esempi per aggiungere un endpoint che genera immagini per gli eventi (può prendere i parametri in chiaro)
• aggiungere i metatag di opengraph alle pagine degli eventi

feat: speakers page

DoD:

• aggiungere un campo "slug" all'entità Speaker dentro schema.prisma (lanciare npx prisma db push per applicare i cambiamenti, poi riavviare npm run dev perché l'hot reloading non funziona in questo caso)
• creare un nuovo router tRPC src/server/router/speakers.ts (per esempio ispirarsi a events.ts) con un query che faccia il listing di tutti gli speaker, e un'altra query che faccia "get" di uno specifico speaker a partire da uno slug
• registrare il nuovo router su src/server/router/index.ts
• creare una nuova pagina https://pisa.dev/speakers dove mostrare l'elenco di persone che hanno partecipato come speaker agli eventi (passati e futuri) di pisa.dev
• creare una nuova pagina https://pisa.dev/speakers/ come "pagina del profilo" di un certo speaker, elenco tutti i suoi eventi passati

Note:
È accettabile anche una pagina "senza stile" che contenga tutti i dati richiesti, per poi aggiungerci le classi CSS necessarie in seguito in una PR separata.

bug: survey button doing nothing

Un utente ha segnalato che dopo aver inserito un messaggio in una textbox di una survey non riusciva a cliccare "Continua" (cliccando non succedeva nulla).
Cancellando il messaggio e facendo "Salta" invece poteva proseguire.

Bisognerebbe riuscire a replicare il problema prima di tutto, e poi capire perché succede.

bug: job offers tags

Una JobOffer contiene dei tag:

pisa.dev/prisma/schema.prisma

Line 158 in c4702fd

model JobOfferTags {

I tag sono inseriti dall'utente separati da virgole (,).

Il dato crudo dell'utente viene memorizzato nella colonna tagPretty:

pisa.dev/prisma/schema.prisma

Line 161 in c4702fd

tagPretty String

Il tagPretty viene passato a una semplice funzione di normalizzazione

pisa.dev/src/server/router/jobs.ts

Line 38 in c4702fd

const normalizedTags = tags.map((t) => normalizeTag(t));

Questa funzione non gestisce spazi e altri caratteri speciali, che andrebbero cancellati.

C'è un altro piccolo bug nella funzione che genera il messaggio specifico per Telegram:

pisa.dev/src/server/router/jobs.ts

Lines 139 to 140 in c4702fd

	const renderJobOfferTags = (tags: JobOfferTags[]): string =>
	tags.map((t) => "#" + t.tagPretty).join(" ");

Viene utilizzata la versione "pretty" ma in realtà anche qui andrebbero gestiti gli spazi e gli altri caratteri speciali:

Andrebbe deciso se in questo caso usare direttamente la versione normalizzata invece di quella pretty.

docs: istruzioni per sviluppo in locale

In questo momento il README.md è vuoto, mentre invece dovrebbe contenere le informazioni necessarie per chiunque voglia eseguire tutto lo stack in locale.

Sostanzialmente si tratta di:

• clonare la repo
• lanciare npm install
• lanciare un mysql in locale con docker: docker run --name mysql -e MYSQL_ROOT_PASSWORD=secret -p 3309:3309 -d mysql
• copiare .env.example in .env
• editare .env e settare la variabile DATABASE_URL = 'mysql://[email protected]:3309/pisadev'
• lanciare npx prisma db push per inizializzare un db vuoto
• eseguire npm run dev per eseguire Next.js in locale (l'app sarà disponibile su http://localhost:3000)

DoD:

• assicurarsi che le istruzioni scritte sopra funzionino
• modificare il file README.md per includerle (magari scritte in un modo più carino)

feat: jobs page

Al momento le offerte di lavoro possono essere visualizzate solamente sul canale Telegram https://pisajobs.t.me.

DoD:

• modificare src/server/router/jobs.ts per aggiungere una query tRPC che elenchi tutte le offerte di lavoro, ordinate per data di pubblicazione (decrescente). Esempio
• creare una pagina https://pisa.dev/jobs (file: src/pages/jobs/index.tsx) dove elencare le offerte di lavoro ricevute dalla query tRPC (usare const q = trpc.useQuery(["jobs.get-all"]) per effettuare la query)

È accettabile anche una pagina "senza stile" che contenga tutti i dati richiesti, per poi aggiungerci le classi CSS necessarie in seguito in una PR separata.

dx: creare script di seeding per il database

DoD:

• leggere https://www.prisma.io/docs/guides/database/seed-database (in particolare guardare lo script di esempio cliccando Expand to view example seed script)
• creare uno script di seeding simile

Lo script di seeding mi aspetto che crei un po' di entità che permettano di testare tutta l'app, quindi:

• un evento nel futuro
• due eventi nel passato
• tre/quattro speaker in modo da avere un evento con almeno due speaker (così proviamo la UI in diverse condizioni)
• una Survey con alcune domande obbligatorie e altre no, e includendo tutti i tipi possibili di questions (starts, singlechoice, ...)
• un paio di job offers (lasciare vuoti i campi relativi a telegram)