Créer un site web de portfolio à partir de zéro avec NextJS, TailwindCSS et Metricalp (2024)

Introduction

Dans cet article, nous allons créer un site web de portfolio avec NextJS, TailwindCSS et Metricalp. Nous aborderons également comment suivre les comportements des utilisateurs et comment prendre des décisions basées sur les données avec Metricalp, ce qui peut booster votre croissance personnelle. Le site web aura deux pages : une page d'accueil et une page de projets. Les gens pourront laisser leurs e-mails sur la page d'accueil pour que nous puissions les contacter. Ils verront également nos projets récents sur la page des projets. Commençons par regarder la vue finale 🚀

Ça suffit de parler, allons le construire 🚀

Configuration du Projet

Tout d'abord, nous devons créer un nouveau projet NextJS :

npx create-next-app@latest

Grâce aux contributeurs et à l'équipe de NextJS, ils ont un excellent installateur CLI. Il vous posera toutes vos préférences et configurera le projet.

Voici toutes les configurations que j'ai choisies lors de la création de ce projet :

Nous avons sélectionné TailwindCSS et TypeScript, le CLI installera toutes les dépendances et configurera le projet pour nous.

Nous allons installer Metricalp en plus pour terminer le processus d'installation :

npm install metricalp

Nous allons créer quelques dossiers/fichiers. Je veux partager l'apparence finale de la structure du projet que nous expliquerons chaque fichier ci-dessous.

Nous avons dit que nous avons une page d'accueil avec un formulaire de soumission d'e-mails, et une page de projets. Disons que nous voulons collecter deux choses avec Metricalp, submit_email qui sera déclenché chaque fois qu'un visiteur clique sur le bouton d'envoi sur la page d'accueil. view_project_details qui sera déclenché chaque fois qu'un visiteur clique sur le bouton détails d'un projet sur l'écran des projets. Ces métriques peuvent nous aider à savoir quel projet reçoit plus d'attention de la part des visiteurs. Ou encore mieux, nous pouvons voir que les visiteurs de quel pays/navigateur prêtent plus d'attention à quel projet. Cela peut certainement affecter notre stratégie marketing. Rendons cela plus fou. Ce n'est qu'un site web de portfolio de base, donc nous n'avons pas de base de données/backend etc. Alors comment allons-nous collecter des e-mails? Oh, attendez. Nous collectons des événements submit_email et dans Metricalp vous pouvez attacher des propriétés personnalisées aux événements, alors que se passe-t-il si nous attachons le texte saisi (email) aux événements submit_email. Alors nous utiliserons Metricalp non seulement comme un fournisseur d'Analytics mais aussi comme une base de données basique? Wow c'est génial. Oui, nous savons. C'est la beauté de Metricalp, il y a des millions de scénarios d'utilisation.

Bien, voyons du code. Faisons un portfolio génial, simpliste et atteignons nos clients potentiels.

Créons un dossier utils dans le dossier src. Il y aura deux fichiers dans ce dossier. L'un est metricalp-events.ts et l'autre est constants.ts

Fichier src/utils/metricalp-events.ts :

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

Fichier src/utils/constants.ts :

export const METRICALP_TID = 'mam48'; // Remplacez par votre TID Metricalp

Maintenant, nous allons configurer Metricalp et créer notre layout principal. Modifiez le fichier dans le chemin et le nom src/app/layout.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 | Développeuse Full-stack',
  description:
    'Je suis Melanie, une développeuse full-stack passionnée par la création de sites web beaux et fonctionnels.',
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="fr">
      <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">
                      Accueil
                    </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">
                      Projets
                    </span>
                  </Link>
                </div>
              </div>
            </div>
            {children}
          </div>
        </MetricalpReactProvider>
      </body>
    </html>
  );
}

Nous avons configuré le fournisseur Metricalp et nous enveloppons toute notre application avec. Nous utilisons également les classes TailwindCSS pour rendre notre layout plus attrayant. Nous utilisons la police Inter de Google Fonts. Nous utilisons également la fonction des métadonnées de NextJS pour définir le titre et la description de notre site web. Nous utilisons également le composant Link de NextJS pour naviguer entre les pages.

Nous avons une barre de navigation en haut, avec le logo (comme texte) à gauche et deux liens de navigation vers la page d'accueil et la page des projets à droite.

Nous utilisons la dernière version de NextJS donc il y a des composants serveurs et des composants clients. Fondamentalement, les composants interactifs seront des composants clients et tous les autres seront des composants serveurs. Continuons avec le plus basique. Créez un fichier dans le chemin et le nom src/components/shared/Button.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>
  );
};

Il commence par 'use client' car il prend/passe une fonction comme prop (onClick). En dehors de cela, c'est juste un bouton de base. Mais, pour avoir un look fantaisie, nous avons des classes TailwindCSS qui donnent à notre bouton une belle vue de gradient. Enfin, nous prenons le contenu comme ReactNode ce qui signifie qu'il peut s'agir d'un texte simple ou d'un composant React, rendant ainsi notre bouton plus personnalisable. C'est notre composant bouton de base donc il est dans le dossier partagé. D'autres endroits utiliseront ce bouton avec personnalisation.

Très bien, créons un formulaire de soumission de mails qui sera placé sur notre page d'accueil. Créez un fichier dans le chemin et le nom src/components/route-specific/homepage/MailSubmitForm.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"
        >
          Laissez votre email pour nous contacter
        </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="Envoyer"
          onClick={() => {
            metricalpEvent({ type: MetricalpEvents.SubmitEmail, email });
            alert('Envoyé');
          }}
        />
      </div>
    </form>
  );
};

Encore une fois, c'est un composant client car il est interactif. Fondamentalement, il y a un champ de saisie et un bouton d'envoi (notre composant Button). Lorsque l'utilisateur clique sur envoyer, nous déclenchons un événement Metricalp, Metricalp.SubmitEmail et nous passons également l'e-mail en tant que prop à cet événement.

Nous avons gardé le texte tapé dans l'état et nous avons appliqué le style avec des classes TailwindCSS encore une fois.

Voyons maintenant notre dernier composant client, src/components/route-specific/projects/ProjectDetailsButton.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="Détails"
      onClick={() => {
        metricalpEvent({
          type: MetricalpEvents.ViewProjectDetails,
          projectTitle,
        });
        alert('Détails');
      }}
    />
  );
};

Donc, chaque fois qu'un visiteur clique sur le bouton détails d'un projet, nous déclenchons l'événement Metricalp.ViewProjectDetails et passons le titre du projet en tant que prop. C'est un exemple de base mais vous pouvez passer plus de propriétés à cet événement.

Bien, maintenant nous allons développer la page d'accueil qui ne sera pas difficile, tous les composants fonctionnels sont déjà prêts.

Modifiez le fichier avec chemin et nom src/app/page.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">
          Hé, 
          <span className="bg-clip-text text-transparent bg-gradient-to-r from-green-400 via-pink-500 to-purple-500">
            changeons le monde
          </span> 
          ensemble
        </h1>
        <p className="leading-normal text-base md:text-2xl mb-8 text-center md:text-left">
          Je suis Melanie, une développeuse full-stack avec une passion pour construire
          des sites web beaux et fonctionnels.
        </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="Image de couverture"
          width={1080}
          height={1080}
        />
      </div>
    </div>
  );
}

Nous avons notre texte principal, image de couverture et le formulaire de soumission de mails. C'est un composant serveur donc nous n'avons pas ajouté 'use client' en haut. Nous avons appliqué les classes TailwindCSS pour avoir une belle apparence.

Maintenant, il ne reste qu'une page. Page des projets. Créons-la. Créez le fichier avec chemin et nom src/app/projects/page.tsx:

import { ProjectDetailsButton } from '@/components/route-specific/projects/ProjectDetailsButton';
import Image from 'next/image';
const projects = [
  {
    title: 'App ToDo',
    description: 'Une simple app de liste de tâches construite avec React Native',
    image: 'https://cdn.metricalp.com/web/assets/images/rn-app-example-1.png',
  },
  {
    title: 'Site Web Metricalp',
    description: 'Le site web marketing pour 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>
  );
}
        

Nous avons un tableau de projets qui contient nos projets. Nous mappons ce tableau et créons une carte pour chaque projet. Chaque carte a une image, un titre, une description et un bouton détails. Lorsque l'utilisateur clique sur le bouton détails, nous déclenchons l'événement Metricalp.ViewProjectDetails et passons le titre du projet comme prop.

Simple, n'est-ce pas? Nous avons créé un site web de portfolio attrayant, robuste et entièrement optimisé pour le SEO avec NextJS, TailwindCSS et Metricalp. Nous avons également ajouté des événements Metricalp pour suivre les comportements des utilisateurs et prendre des décisions basées sur les données. Nous avons également utilisé Metricalp comme une base de données basique pour collecter des e-mails. C'est juste un exemple basique, vous pouvez faire plus avec Metricalp. Vous pouvez suivre chaque comportement d'utilisateur, vous pouvez collecter chaque donnée que vous voulez. Vous pouvez rendre votre site web plus personnalisé et plus convivial. Vous pouvez augmenter vos conversions. Vous pouvez atteindre vos clients potentiels. Vous pouvez changer le monde. 🚀

Metricalp va écouter automatiquement les événements de visite, combien de visiteurs uniques ont visité depuis quels pays, etc. Nous avons également ajouté quelques événements personnalisés comme submit_email et view_project_details.

Mais pour les propriétés personnalisées attachées, nous avons utilisé des alias comme email et titre du projet. Nous devons configurer cela dans le tableau de bord Metricalp dans les paramètres du tracker - onglet général. Faisons-le comme étape finale.

Eh bien, nous avons défini l'email comme alias de propriété personnalisée 1 pour l'événement submit_email et le titre du projet comme alias de propriété personnalisée 1 pour l'événement view_project_details. Maintenant, nous pouvons activer et voir ces propriétés personnalisées en toute sécurité dans le tableau de bord Metricalp.

Eh bien, nous collectons combien de personnes ont visité notre portfolio. D'où viennent-ils, quel est leur système d'exploitation, navigateur, appareil (mobile ou de bureau), etc. Mais en plus de ces données analytiques standard, nous collectons combien de visiteurs uniques nous ont laissé leur email. Mais encore mieux, nous collectons également leurs emails ici. Nous n'avons même pas besoin d'une base de données séparée. Fou et génial. De plus, nous collectons tous les événements de vue des détails des projets. Nous pouvons voir quel projet reçoit plus d'attention. Nous pouvons voir quel projet reçoit plus d'attention de quel pays, navigateur, appareil, etc. Cela peut façonner notre future carrière, stratégie de marketing, etc. C'est le pouvoir de Metricalp 🚀 Nous sommes fiers de notre produit pour aider à atteindre cela de manière facile.

Mais hé, vous avez lu tout l'article, nous sommes également fiers de vous. J'espère que vous allez avoir le meilleur site web de portfolio et atteindre vos clients potentiels. Si vous avez des questions, des commentaires ou autre chose, n'hésitez pas à nous contacter. Nous sommes toujours là pour vous aider. 💜 🤝