Marketplace Cabanes green school UX


Le code que je vous ai fourni est bien du ReactJS moderne, structuré comme un composant fonctionnel.

🔎 Caractéristiques :

  • ReactJS (frontend JavaScript) → utilisé pour construire l’interface utilisateur.
  • Syntaxe JSX (mélange de HTML et JS).
  • Gestion d’état avec useState (hook de React).
  • UI basée sur TailwindCSS (classes utilitaires comme bg-green-600, rounded-2xl, etc.).
  • Composants issus de la librairie shadcn/ui (Card, Button, Input, Textarea), qui apportent une esthétique claire et moderne.
  • Icônes provenant de lucide-react (Users, Search, Plus).

👉 Donc c’est un prototype de web app React :

  • Frontend uniquement (pas encore connecté à une base de données ni à un backend).
  • Facile à tester dans un environnement React (ex. Vite, Next.js ou Create React App).
  • Peut ensuite être relié à un ERP (comme Odoo via API) ou à une base MongoDB/Postgres.

Marketplace Cabanes· typescript

import { useState } from "react";

setProjects([

...projects,

{

id: projects.length + 1,

title: newProject.title,

description: newProject.description,

competences,

members: 1,

level: newProject.level,

},

]);

setNewProject({ title: "", description: "", competences: "", level: "Primaire" });

setShowForm(false);

};


return (

<div className="p-6 max-w-6xl mx-auto space-y-6">

<h1 className="text-2xl font-bold">🌍 Marketplace des Projets Green</h1>

<p className="text-gray-600">

Choisissez un projet écologique adapté à votre niveau (primaire, collège, lycée), rejoignez une équipe ou proposez le vôtre.

</p>


{/* Search bar */}

<div className="flex items-center gap-2">

<Search className="text-gray-500" />

<Input

placeholder="Rechercher un projet..."

value={search}

onChange={(e) => setSearch(e.target.value)}

/>

<Button

onClick={() => setShowForm(!showForm)}

className="ml-auto bg-green-600 text-white hover:bg-green-700"

>

<Plus className="mr-2 h-4 w-4" /> Créer un projet

</Button>

</div>


{/* Formulaire de création */}

{showForm && (

<Card className="p-4 bg-gray-50">

<h2 className="text-lg font-semibold mb-2">Nouveau Projet Green</h2>

<div className="space-y-3">

<Input

placeholder="Titre du projet"

value={newProject.title}

onChange={(e) => setNewProject({ ...newProject, title: e.target.value })}

/>

<Textarea

placeholder="Description du projet"

value={newProject.description}

onChange={(e) => setNewProject({ ...newProject, description: e.target.value })}

/>

<Input

placeholder="Compétences recherchées (séparées par des virgules)"

value={newProject.competences}

onChange={(e) => setNewProject({ ...newProject, competences: e.target.value })}

/>

<select

className="w-full border rounded p-2"

value={newProject.level}

onChange={(e) => setNewProject({ ...newProject, level: e.target.value })}

>

<option>Primaire</option>

<option>Collège</option>

<option>Lycée</option>

</select>

<Button onClick={handleCreate} className="bg-indigo-600 text-white hover:bg-indigo-700">

Enregistrer le projet

</Button>

</div>

</Card>

)}


{/* Cards */}

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

{filtered.map((project) => (

<Card key={project.id} className="rounded-2xl shadow-md hover:shadow-lg transition">

<CardHeader>

<h2 className="text-lg font-semibold">{project.title}</h2>

<p className="text-sm text-gray-500">Niveau : {project.level}</p>

</CardHeader>

<CardContent className="space-y-2">

<p className="text-sm text-gray-600">{project.description}</p>

<div className="flex flex-wrap gap-2">

{project.competences.map((comp, idx) => (

<span

key={idx}

className="px-2 py-1 text-xs bg-blue-100 text-blue-700 rounded-full"

>

{comp}

</span>

))}

</div>

<div className="flex items-center justify-between mt-3">

<span className="flex items-center text-gray-500 text-sm">

<Users className="mr-1 h-4 w-4" /> {project.members} membres

</span>

<Button size="sm" className="bg-indigo-600 text-white hover:bg-indigo-700">

Rejoindre

</Button>

</div>

</CardContent>

</Card>

))}

</div>

</div>

);

}


J’ai adapté la maquette en Marketplace des Projets Green 🌍 :

  • Les projets sont classés par niveau (Primaire, Collège, Lycée).
  • Chaque carte indique le niveau, les compétences recherchées et les membres.
  • Le formulaire permet de créer un nouveau projet avec choix du niveau.

UX : autre look



En savoir plus