Comment créer une landing page avec Pinkary en quelques étapes

Pinkary est une application open-source conçue pour créer des pages de destination (landing pages) centralisant vos liens. Développé en Laravel, Livewire et Tailwind CSS, Pinkary est une plateforme moderne permettant aux utilisateurs de connecter leurs contenus et d’interagir avec une communauté en ligne. Créé en seulement 15 heures, Pinkary a rapidement pris de l’ampleur avec plus de 1000 utilisateurs, prouvant son utilité et sa simplicité.

Contexte et historique de Pinkary

Pinkary est un projet open-source initié par Nuno Maduro, membre de l’équipe Laravel et créateur de la librairie de test Pest. Cette plateforme vise à permettre aux utilisateurs de partager facilement leurs contenus dans une interface conviviale et légère. Pinkary se distingue par sa simplicité et son intégration rapide, offrant aux utilisateurs un moyen facile de créer des pages de liens sans l’encombrement habituel des réseaux sociaux.

pinkarmy, assemble! we’re proud to announce that @PinkaryProject is fully open source 🤌🏻 pic.twitter.com/YjuQ6L6BbL

— Nuno Maduro ☁️ 🦹 (@enunomaduro) August 27, 2024

Depuis sa mise à disposition en tant que projet open-source, Pinkary a attiré des contributions de la communauté, avec plus de 400 pull requests acceptées, démontrant ainsi son adoption rapide et son potentiel pour la collaboration.

Fonctionnalités principales

Pinkary offre plusieurs fonctionnalités clés qui le rendent particulièrement attrayant pour les utilisateurs cherchant à créer des landing pages de liens :

• Centralisation des liens : Les utilisateurs peuvent créer une page où tous leurs liens sont regroupés. Que ce soit des liens vers des réseaux sociaux, des blogs, des projets, ou d’autres plateformes, Pinkary permet de les organiser de manière esthétique et fonctionnelle.
• Personnalisation de la page : Grâce à Tailwind CSS, chaque utilisateur peut personnaliser sa page avec des styles modernes et minimalistes.
• Interaction communautaire : Les utilisateurs peuvent interagir avec d’autres, échanger des contenus, poser des questions ou laisser des commentaires sur les pages.
• Utilisation d’une base de données SQLite : Pour faciliter le déploiement et la légèreté du projet, Pinkary utilise SQLite pour stocker les données de l’application, les sessions, les queues et les caches. Cela permet une configuration rapide tout en maintenant une bonne performance.
• Exploration des liens : Les utilisateurs peuvent naviguer dans les contenus d’autres personnes et découvrir des liens partagés par d’autres membres de la communauté.

Technologies utilisées

Pinkary est construit avec les technologies suivantes :

• Laravel 11 : Le framework PHP reconnu pour sa simplicité et sa robustesse dans le développement d’applications web.
• Livewire : Un framework utilisé pour construire des interfaces réactives côté serveur sans avoir à écrire de code JavaScript.
• Tailwind CSS : Un framework CSS utilitaire, permettant de styliser rapidement et efficacement les composants front-end.

Ces technologies, combinées, permettent à Pinkary d’être à la fois performant et facile à maintenir.

Installation de Pinkary

L’installation de Pinkary est simple et ne demande que quelques étapes. Voici comment configurer le projet en local :

Prérequis :

• PHP 8.3 ou supérieur avec les extensions nécessaires (SQLite, GD, etc.)
• Node.js 16+ pour la compilation des assets front-end

Étapes d’installation :

1. Clonez le dépôt GitHub :

   git clone https://github.com/pinkary-project/pinkary.com.git
   cd pinkary.com

2. Installez les dépendances PHP avec Composer et celles de Node.js avec npm :

   composer install
   npm install

3. Copiez le fichier d’exemple .env et générez la clé d’application Laravel :

   cp .env.example .env
   php artisan key:generate

4. Préparez la base de données SQLite et exécutez les migrations pour créer les tables nécessaires :

   touch database/database.sqlite
   php artisan migrate

5. Lancez le serveur de développement Laravel et compilez les assets avec npm :

   npm run dev
   php artisan serve

En suivant ces étapes, vous aurez une instance de Pinkary fonctionnelle sur votre machine. Vous pourrez ainsi commencer à personnaliser vos pages et explorer l’architecture de l’application pour contribuer au projet.

Utilisation de Pinkary dans des projets réels

Pinkary peut être utilisé pour plusieurs scénarios dans des projets réels, notamment pour un créateur de contenu souhaitant partager plusieurs liens vers vos réseaux sociaux, un développeur voulant centraliser les ressources de différents projets personnels, ou encore une entreprise cherchant à offrir une page de destination simple pour diriger ses utilisateurs vers des services spécifiques. La plateforme permet également de créer des liens directs vers des produits, des articles de blog ou des portfolios, tout en assurant une navigation claire et intuitive pour les visiteurs.

En tant qu’application open-source basée sur Laravel, elle est non seulement flexible mais aussi facilement extensible pour ajouter des fonctionnalités personnalisées.

Analyse technique

Dans Pinkary, plusieurs composants utilisent Livewire pour rendre l’application réactive sans nécessiter de JavaScript côté client. Voici un exemple simple de composant Livewire utilisé dans Pinkary pour afficher une liste de liens d’un utilisateur.

Exemple de composant Livewire

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Link;

class LinkList extends Component
{
    public $links;

    public function mount()
    {
        $this->links = Link::all();
    }

    public function render()
    {
        return view('livewire.link-list', [
            'links' => $this->links
        ]);
    }
}

Dans cet exemple, la méthode mount() récupère tous les liens d’un utilisateur et les passe à la vue correspondante. La simplicité et l’efficacité de Livewire permettent de rendre ce genre de composant dynamique sans avoir à recharger la page.

Vue associée avec Tailwind CSS

<div>
    <ul>
        @foreach ($links as $link)
            <li class="text-blue-500 hover:underline">
                <a href="{{ $link->url }}">{{ $link->title }}</a>
            </li>
        @endforeach
    </ul>
</div>

Grâce à Tailwind CSS, le frontend reste minimaliste, mais fonctionnel et élégant, garantissant une expérience utilisateur agréable.

Contribution à la communauté

L’un des aspects les plus intéressants de Pinkary est son modèle open-source. Si vous souhaitez contribuer au projet, il est possible d’ajouter de nouvelles fonctionnalités, de corriger des bugs ou d’améliorer la documentation. Voici les étapes pour contribuer :

1. Forker le dépôt sur GitHub.
2. Créer une branche pour vos modifications.
3. Apportez vos modifications et soumettez une pull request.

Exemple de Workflow Git

git checkout -b feature/new-feature
# Modifications de code
git commit -am "Ajout d'une nouvelle fonctionnalité"
git push origin feature/new-feature

Une fois la pull request envoyée, elle sera examinée et fusionnée dans la branche principale si elle est approuvée.

Déploiement de Pinkary

Bien que Pinkary soit conçu pour être léger avec SQLite, il peut aussi être déployé sur des serveurs plus robustes avec des bases de données MySQL ou PostgreSQL. Le processus de déploiement suit les étapes standards de Laravel :

1. Préparer l’environnement serveur (PHP, Nginx, etc.).
2. Configurer une base de données MySQL/PostgreSQL.
3. Installer les dépendances avec Composer et npm.
4. Configurer les migrations pour la base de données.
5. Déployer l’application via Laravel Forge ou manuellement.

Pinkary est un excellent exemple d’application Laravel moderne, combinant simplicité et efficacité. Que vous soyez un développeur cherchant à apprendre ou un utilisateur souhaitant centraliser ses liens, Pinkary est un projet qui offre une réelle valeur tout en étant soutenu par une communauté active et accueillante.