OneStopShop

Onestopshop

AVERTISSEMENT Cette application est un travail en cours et ne devrait pas être considéré comme prêt de la production. Il utilise de nouvelles technologies qui n'ont pas encore été stables telles que les actions du serveur et la bruine ORM.

À propos

Marketplace en ligne construit à l'aide du routeur d'application Next.js, qui permet aux utilisateurs d'acheter des produits, de s'inscrire et de répertorier leurs propres produits à vendre. Les utilisateurs peuvent créer un profil de vendeur, gérer les produits et percevoir le paiement.

Caractéristiques clés:

• Routeur d'application suivante.
• Itinéraires interceptés (avec routage parallèle) pour la vue rapide du produit et la création de nouveaux produits dans l'administrateur
• Actions du serveur pour les mutations
• Base de données PlanetScale MySQL avec Slizzle Orm
• Téléchargement pour les téléchargements de fichiers de typesafe (par exemple, images de produits)
• Authentification des utilisateurs avec le greffier
• Intégration Stripe Connect pour les paiements sur le marché (y compris les frais de plate-forme et les paiements des vendeurs)

Démo

Pour faire une démonstration de l'expérience de paiement, paiement avec un numéro de carte de test tel que 4242 4242 4242 4242 et utiliser toute date future pour l'expiration et les 3 chiffres pour le CVC. Vous ne pourrez vérifier que des produits de vendeurs qui ont un compte Stripe connecté à leur magasin (comme Tim's Toys). Vous pouvez également créer votre propre compte vendeur et le connecter à Stripe pour l'expérience complète.

Page d'accueil

Éditeur de page de produit administrateur

Exécution de l'application

Suivez les étapes ci-dessous pour exécuter l'application localement:

1. Créez une base de données MySQL.
2. Créez un fichier .env local avec les variables selon le fichier .env.example .
3. Exécutez npm install .
4. Générez une migration avec npx drizzle-kit generate:mysql . Cela crée un nouveau dossier appelé migrations-folder dans la racine qui contient les requêtes SQL pour créer les tables de base de données. Les migrations sont automatiquement synchronisées avec la base de données via la fonction de migration dans db.ts Alternativement, vous pouvez exécuter les requêtes SQL générées à partir de la migration manuellement via la console de l'échelle de planètes et supprimer la fonction de migration dans db.ts
5. Exécutez npm run dev pour ouvrir l'application en mode développement.

C'est ça. Vous devriez maintenant pouvoir accéder à l'application sur http://localhost:3000 .

Notes

• Lors de la génération de la migration pour la première fois avec de la bruine, assurez-vous que les migrations-folder dans la racine sont vides ou n'existent pas.

Livre de contes

Le livre de contes a été ajouté à cette application, cependant, n'a pas été activement travaillé depuis la création initiale de l'application. Quoi qu'il en soit, il peut être exécuté en utilisant les commandes suivantes:

1. Exécutez le script Build Tailwind pour créer un fichier de sortie pour les classes de vent arrière (une fois exécuté et terminé, vous devrez peut-être «tuer» le terminal (c'est-à-dire ctrl + c ) pour arrêter le processus s'il ne s'arrête pas automatiquement).

   Commande: npm run tailwind

2. Exécutez Storybook (cela utilisera le fichier de sortie du vent arrière créé à l'étape précédente et s'exécutera sur http://localhost:6006 ).

   Commande: npm run storybook

Dépannage

Si vous voyez une erreur relative à un tableau qui ne figure pas dans PlanetScale (probablement jeté dans app/(storefront)/(main)/page.tsx car il s'agit de la première utilisation de la base de données), cela est dû à la synchronisation de la base de données. Revisitez les étapes «exécution de l'application» ci-dessus et vérifiez l'onglet «Insights» en échelle PlanetS pour vérifier que les requêtes de création de table ont exécuté.

Contributif

N'hésitez pas à faire des problèmes et des relations publiques pour de nouvelles fonctionnalités / correctifs