Esempi del Mondo Reale / Sat Jul 20 2024

Creare un sito web di portfolio da zero con NextJS, TailwindCSS e Metricalp (2024)

I siti web di portfolio sono essenziali per mostrare il tuo lavoro e attirare potenziali clienti. In questo post, creeremo un sito web di portfolio da zero con NextJS 14, TailwindCSS e Metricalp. Tratteremo tutto ciò che serve per configurare il sito web e come puoi utilizzare Metricalp per aumentare le tue conversioni.

Introduzione

In questo post, creeremo un sito web portfolio con NextJS, TailwindCSS e Metricalp. Tratteremo anche come tracciare i comportamenti degli utenti e come prendere decisioni basate sui dati con Metricalp, che può potenziare la tua crescita personale. Il sito avrà due pagine: una homepage e una pagina progetti. Le persone possono lasciare le loro email sulla homepage, così possiamo contattarle. Inoltre, potranno vedere e scoprire i nostri progetti recenti nella pagina progetti. Cominciamo con uno sguardo alla vista finale 🚀

Screenshot di esempio dell'app portfolio 1

Screenshot di esempio dei progetti dell'app portfolio

Va bene, basta parlare, andiamo a costruirlo 🚀

Configurazione del Progetto

Per prima cosa, dobbiamo creare un nuovo progetto NextJS:

BASH

npx create-next-app@latest

Grazie ai contributori e al team di NextJS, hanno un ottimo installatore CLI. Ti chiederà tutte le tue preferenze e configurerà il progetto.

Ecco tutte le impostazioni che ho scelto mentre stavo avviando questo progetto:

Abbiamo selezionato TailwindCSS e TypeScript, il CLI installerà tutte le dipendenze e configurerà il progetto per noi.

Installeremo Metricalp inoltre per completare il processo di installazione:

BASH

npm install metricalp

Creeremo alcune cartelle/file. Voglio condividere l'aspetto finale della struttura del progetto che spiegheremo ciascun file di seguito.

Abbiamo detto che abbiamo una homepage con un form per inviare email e una pagina progetti. Diciamo che vogliamo raccogliere due cose con Metricalp, submit_email che verrà attivato ogni volta che un visitatore clicca sul pulsante di invio nella homepage. view_project_details che verrà attivato ogni volta che un visitatore clicca sul pulsante dettagli di un progetto nella schermata progetti. Queste metriche ci possono aiutare a capire quale progetto sta ricevendo più attenzione dai visitatori. O ancora meglio, possiamo vedere quale visitatore da quale paese/browser sta prestando più attenzione a quale progetto. Può sicuramente influire sulla nostra strategia di marketing. Rendiamolo più interessante. Questo è solo un sito web portfolio di base, quindi non abbiamo un database/backend ecc. Allora come raccoglieremo le email? Oh, aspetta. Stiamo raccogliendo eventi submit_email e in Metricalp puoi allegare proprietà personalizzate agli eventi, quindi che succede se alleghiamo l'input del testo (email) agli eventi submit_email? Allora useremmo Metricalp non solo come un provider di Analytics ma anche come un database di base? Wow, è fantastico. Sì, lo sappiamo. Questa è la bellezza di Metricalp, ci sono milioni di scenari di utilizzo.

Va bene, vediamo qualche codice. Facciamo un portfolio bello, semplice e raggiungiamo i nostri potenziali clienti.

Creiamo una cartella utils all'interno della cartella src. Ci saranno due file all'interno di questa cartella. Uno è metricalp-events.ts e l'altro è constants.ts

File src/utils/metricalp-events.ts:

tsx

export const MetricalpEvents = {
  SubmitEmail: 'submit_email',
  ViewProjectDetails: 'view_project_details',
};

File src/utils/constants.ts:

export const METRICALP_TID = 'mam48'; // Sostituisci con il tuo TID Metricalp

Ora, configureremo Metricalp e creeremo il nostro layout principale. Modifica il file con percorso e nome src/app/layout.tsx:

tsx

import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import './globals.css';
import { MetricalpReactProvider } from '@metricalp/react';
import Link from 'next/link';
import { METRICALP_TID } from '@/utils/constants';

const inter = Inter({ subsets: ['latin'] });

export const metadata: Metadata = {
  title: 'Melanie | Sviluppatrice Full-stack',
  description:
    'Sono Melanie, una sviluppatrice full-stack con una passione per la creazione di siti web belli e funzionali.',
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="it">
      <body className={inter.className}>
        <MetricalpReactProvider allowLocalhost tid={METRICALP_TID}>
          <div className="h-full p-4 md:p-0 my-4">
            <div className="w-full container mx-auto">
              <div className="w-full flex items-center justify-between">
                <a
                  className="flex items-center text-indigo-400 no-underline hover:no-underline font-bold text-2xl lg:text-4xl"
                  href="#"
                >
                  <span className="bg-clip-text text-transparent bg-gradient-to-r from-green-400 via-pink-500 to-purple-500">
                    Melanie&lsquo;s
                  </span>
                </a>

                <div className="flex w-1/2 justify-end content-center space-x-4">
                  <Link href="/">
                    <span className="bg-clip-text text-lg text-transparent bg-gradient-to-r from-green-400 via-pink-500 to-purple-500">
                      Home
                    </span>
                  </Link>
                  <Link href="/projects">
                    <span className="bg-clip-text text-lg text-transparent bg-gradient-to-r from-green-400 via-pink-500 to-purple-500">
                      Progetti
                    </span>
                  </Link>
                </div>
              </div>
            </div>
            {children}
          </div>
        </MetricalpReactProvider>
      </body>
    </html>
  );
}

Abbiamo configurato il provider Metricalp e stiamo avvolgendo tutta la nostra applicazione con esso. Stiamo anche usando le classi di TailwindCSS per rendere il nostro layout più bello. Stiamo usando il font Inter di Google Fonts. Stiamo anche usando la funzionalità dei metadati di NextJS per impostare il titolo e la descrizione del nostro sito web. Stiamo anche usando il componente Link di NextJS per navigare tra le pagine.

Abbiamo una barra di navigazione in alto, con il logo (come testo) a sinistra e due link di navigazione alla homepage e alla pagina progetti a destra.

Stiamo usando l'ultima versione di NextJS quindi ci sono componenti server e componenti client. Fondamentalmente, i componenti interattivi saranno componenti client e tutti gli altri saranno componenti server. Continuiamo con quello più semplice. Crea un file con percorso e nome src/components/shared/Button.tsx

tsx

'use client';

import { ReactNode } from 'react';

type Props = {
  content: ReactNode;
  onClick: () => void;
};

export const Button = ({ content, onClick }: Props) => {
  return (
    <button
      onClick={onClick}
      className="bg-gradient-to-r from-purple-800 to-green-500 hover:from-pink-500 hover:to-green-500 text-white font-bold py-2 px-4 rounded focus:ring transform transition hover:scale-105 duration-300 ease-in-out"
      type="button"
    >
      {content}
    </button>
  );
};

Inizia con 'use client' perché sta prendendo/pasando una funzione come prop (onClick). A parte questo, è solo un pulsante di base. Ma, per avere un aspetto elegante, abbiamo classi TailwindCSS che danno al nostro pulsante un bellissimo aspetto a gradiente. Infine, stiamo prendendo il contenuto come ReactNode, il che significa che può essere un testo semplice o un componente React, rendendo il nostro pulsante più personalizzabile. Questo è il nostro componente pulsante di base quindi si trova nella cartella condivisa. Altri posti useranno questo pulsante con personalizzazione.

Va bene, creiamo un modulo di invio email che sarà nella nostra homepage. Crea un file con percorso e nome src/components/route-specific/homepage/MailSubmitForm.tsx:

tsx

'use client';

import { Button } from '@/components/shared/Button';
import { MetricalpEvents } from '@/utils/metricalp-events';
import { metricalpEvent } from '@metricalp/react';
import { useState } from 'react';

export const MailSubmitForm = () => {
  const [email, setEmail] = useState('');
  return (
    <form className="bg-gray-900 opacity-75 w-full shadow-lg rounded-lg px-8 pt-6 pb-8 mb-4">
      <div className="mb-4">
        <label
          className="block text-blue-300 py-2 font-bold mb-2"
          htmlFor="emailaddress"
        >
          Lascia il tuo email per contattarci
        </label>
        <input
          className="shadow appearance-none border rounded w-full p-3 text-gray-700 leading-tight focus:ring transform transition hover:scale-105 duration-300 ease-in-out"
          id="emailaddress"
          type="text"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          placeholder="[email protected]"
        />
      </div>

      <div className="flex items-center justify-between pt-4">
        <Button
          content="Invia"
          onClick={() => {
            metricalpEvent({ type: MetricalpEvents.SubmitEmail, email });
            alert('Inviato');
          }}
        />
      </div>
    </form>
  );
};

Di nuovo, è un componente client perché è interattivo. Fondamentalmente c'è un campo di input e un pulsante di invio (il nostro componente Button). Quando l'utente clicca su invio, stiamo attivando un evento Metricalp, Metricalp.SubmitEmail e stiamo anche passando l'email come prop a questo evento.

Abbiamo mantenuto il testo digitato in stato e abbiamo applicato lo stile con le classi TailwindCSS.

Ora vediamo il nostro ultimo componente client, src/components/route-specific/projects/ProjectDetailsButton.tsx:

tsx

'use client';
import { Button } from '@/components/shared/Button';
import { MetricalpEvents } from '@/utils/metricalp-events';
import { metricalpEvent } from '@metricalp/react';

type Props = {
  projectTitle: string;
};
export const ProjectDetailsButton = ({ projectTitle }: Props) => {
  return (
    <Button
      content="Dettagli"
      onClick={() => {
        metricalpEvent({
          type: MetricalpEvents.ViewProjectDetails,
          projectTitle,
        });
        alert('Dettagli');
      }}
    />
  );
};

Quindi, ogni volta che un visitatore clicca sul pulsante dettagli di un progetto, stiamo attivando l'evento Metricalp.ViewProjectDetails e passando il titolo del progetto come prop. Questo è un esempio base ma puoi passare più proprietà a questo evento.

Va bene, ora svilupperemo la homepage che non sarà difficile, tutti i componenti funzionali sono già pronti.

Modifica il file con percorso e nome src/app/page.tsx:

tsx

import { MailSubmitForm } from '@/components/route-specific/homepage/MailSubmitForm';
import Image from 'next/image';

export default function Home() {
  return (
    <div className="container pt-24 md:pt-36 mx-auto flex flex-wrap flex-col md:flex-row items-center">
      <div className="flex flex-col w-full xl:w-2/5 justify-center lg:items-start overflow-y-hidden">
        <h1 className="my-4 text-3xl md:text-5xl text-white opacity-75 font-bold leading-tight text-center md:text-left">
          Ehi, 
          <span className="bg-clip-text text-transparent bg-gradient-to-r from-green-400 via-pink-500 to-purple-500">
            cambiamo il mondo
          </span> 
          insieme
        </h1>
        <p className="leading-normal text-base md:text-2xl mb-8 text-center md:text-left">
          Sono Melanie, una sviluppatrice full-stack con la passione per la creazione
          di siti web belli e funzionali.
        </p>
        <MailSubmitForm />
      </div>

      <div className="w-full xl:w-3/5 p-12 overflow-hidden">
        <Image
          className="mx-auto w-full md:w-4/5 transform -rotate-6 transition hover:scale-105 duration-700 ease-in-out hover:rotate-6"
          src="/cover.png"
          alt="Immagine di copertina"
          width={1080}
          height={1080}
        />
      </div>
    </div>
  );
}

Abbiamo il nostro testo principale, immagine di copertina e il form di invio email. Questo è un componente server quindi non abbiamo aggiunto 'use client' in alto. Abbiamo applicato le classi TailwindCSS per avere un bell'aspetto.

Ora, rimane solo una pagina. Pagina progetti. Creiamola. Crea il file con percorso e nome src/app/projects/page.tsx:

tsx

import { ProjectDetailsButton } from '@/components/route-specific/projects/ProjectDetailsButton';
import Image from 'next/image';
const projects = [
  {
    title: 'App ToDo',
    description: 'Una semplice app di lista di cose da fare costruita con React Native',
    image: 'https://cdn.metricalp.com/web/assets/images/rn-app-example-1.png',
  },
  {
    title: 'Sito Web Metricalp',
    description: 'Il sito web di marketing per Metricalp',
    image: 'https://cdn.metricalp.com/web/assets/images/hero-v4-light.webp',
  },
];

export default function Projects() {
  return (
    <div className="p-8 flex justify-center flex-col items-center space-y-8">
      {projects.map((project) => (
        <div
          key={project.title}
          className="block rounded-lg bg-white shadow-secondary-1 text-black"
        >
          <div className="relative overflow-hidden bg-cover bg-no-repeat max-h-96">
            <Image
              className="rounded-t-lg"
              src={project.image}
              width={800}
              height={400}
              alt={project.title}
            />
          </div>
          <div className="p-6 text-surface ">
            <h5 className="mb-2 text-xl font-medium leading-tight">
              {project.title}
            </h5>
            <p className="mb-4 text-base">{project.description}</p>
            <ProjectDetailsButton projectTitle={project.title} />
          </div>
        </div>
      ))}
    </div>
  );
}

Abbiamo una matrice di progetti che contiene i nostri progetti. Stiamo mappando questa matrice e creando una carta per ogni progetto. Ogni carta ha un'immagine, un titolo, una descrizione e un pulsante dettagli. Quando l'utente clicca sul pulsante dettagli, stiamo attivando l'evento Metricalp.ViewProjectDetails e passando il titolo del progetto come prop.

Semplice, vero? Abbiamo creato un sito web portfolio dall'aspetto gradevole, robusto e completamente ottimizzato per SEO con NextJS, TailwindCSS e Metricalp. Abbiamo anche aggiunto eventi Metricalp per tracciare i comportamenti degli utenti e prendere decisioni basate sui dati. Abbiamo anche usato Metricalp come un database di base per raccogliere email. Questo è solo un esempio base, puoi fare di più con Metricalp. Puoi tracciare ogni comportamento dell'utente, puoi raccogliere ogni dato che desideri. Puoi rendere il tuo sito web più personalizzato e più facile da usare. Puoi aumentare le tue conversioni. Puoi raggiungere i tuoi clienti potenziali. Puoi cambiare il mondo. 🚀

Metricalp ascolterà automaticamente gli eventi di visita, quanti visitatori unici hanno visitato da quali paesi, ecc. Abbiamo anche aggiunto alcuni eventi personalizzati come submit_email e view_project_details.

Ma per le proprietà personalizzate allegate, abbiamo usato alias come email e titolo del progetto. Dobbiamo configurarlo nel dashboard Metricalp nelle impostazioni del tracker - scheda generale. Facciamolo come passaggio finale.

Alias delle proprietà personalizzate dell'app portfolio

Bene, abbiamo impostato l'email come alias di proprietà personalizzata 1 per l'evento submit_email e il titolo del progetto come alias di proprietà personalizzata 1 per l'evento view_project_details. Ora possiamo attivare e visualizzare queste proprietà personalizzate in modo sicuro nel dashboard Metricalp.

Bene, stiamo raccogliendo quante persone hanno visitato il nostro portfolio. Da dove provengono, qual è il loro sistema operativo, browser, dispositivo (mobile o desktop), ecc. Ma oltre a questi dati analitici standard, stiamo raccogliendo quanti visitatori unici ci hanno lasciato la loro email. Ma ancora meglio, stiamo anche raccogliendo le loro email qui. Non abbiamo nemmeno bisogno di un database separato. Pazzo e fantastico. Inoltre, stiamo raccogliendo tutti gli eventi di visualizzazione dei dettagli dei progetti. Possiamo vedere quale progetto sta ricevendo più attenzione. Possiamo vedere quale progetto sta ricevendo più attenzione da quale paese, browser, dispositivo, ecc. Questo può dare forma alla nostra futura carriera, strategia di marketing, ecc. Questo è il potere di Metricalp 🚀 Siamo orgogliosi del nostro prodotto per aiutare a ottenere questi risultati in modo facile.

Ma ehi, hai letto tutto l'articolo, siamo orgogliosi anche di te. Spero che tu possa avere il miglior sito web portfolio e raggiungere i tuoi clienti potenziali. Se hai domande, feedback o qualsiasi altra cosa, non esitare a contattarci. Siamo sempre qui per aiutarti. 💜 🤝

Ti è piaciuto Metricalp? Inizia a provarlo gratuitamente oggi.

Inizia Caratteristiche

Azienda

Risorse

Creare un sito web di portfolio da zero con NextJS, TailwindCSS e Metricalp (2024)

Introduzione

Configurazione del Progetto

Ti è piaciuto Metricalp? Inizia a provarlo gratuitamente oggi.