L'Avenue120 - TikTok Live Payment Platform

EN/FR will follow

A modern and secure web application for managing payments during L'Avenue 120's TikTok live streams, specializing in luxury perfumes.

🚀 Features

• 💳 Complete Stripe integration for secure payments
• 📱 Modern and responsive user interface
• 🔄 3-step payment process with enhanced stepper design
• 🚚 Flexible shipping options (Chronopost Express and Standard)
• 📧 Automatic email notifications with HTML templates
  • Client confirmation email with order details
  • Admin notification with order summary
  • Secure SMTP configuration (Gmail/Workspace)
• 🔒 Enhanced security with HTTPS and data validation
• 🎨 Modern design with smooth animations
• 📊 Real-time order tracking
• 📧 Robust email system with:
  • Payment confirmation triggers
  • Error handling and logging
  • SMTP verification
  • Environment variable validation

🛠️ Tech Stack

• Framework: Next.js 15.3.3
• Language: TypeScript
• Styling: TailwindCSS 4
• Payment: Stripe (v18.2.1)
• UI Components:
  • @stripe/react-stripe-js
  • @stripe/stripe-js
  • lucide-react (icons)
• Fonts: Geist (Sans & Mono)

📋 Prerequisites

• Node.js (recommended version: 18.x or higher)
• npm or yarn
• Stripe account with API keys
• Domain with valid SSL certificate

🔧 Installation

1. Clone the repository:

git clone https://github.com/Mandroso22/lavenuelive.git
cd lavenuelive

2. Install dependencies:

npm install
# or
yarn install

3. Configure environment variables: Create a .env.local file in the root directory with the following variables:

NEXT_PUBLIC_STRIPE_PUBLIC_KEY=your_stripe_public_key
STRIPE_SECRET_KEY=your_stripe_secret_key

4. Start the development server:

npm run dev
# or
yarn dev

The application will be available at http://localhost:3000

🏗️ Project Structure

lavenuelive/
├── app/
│   ├── actions/         # Server actions (Stripe, etc.)
│   ├── api/            # API routes
│   ├── components/     # React components
│   │   └── checkout/   # Payment components
│   ├── lib/           # Utilities and configurations
│   ├── return/        # Payment return page
│   ├── globals.css    # Global styles
│   ├── layout.tsx     # Main layout
│   └── page.tsx       # Home page
├── public/            # Static assets
└── ...config files

🔐 Security

• Server-side data validation
• CSRF protection
• Secure payments via Stripe
• Environment variables for sensitive keys
• HTTPS required in production

🚢 Deployment

The project is optimized for Vercel deployment:

1. Connect your GitHub repository to Vercel
2. Configure environment variables in the Vercel dashboard
3. Deploy!

📝 Development Notes

• Project uses Next.js App Router
• Components are optimized for performance
• Code follows TypeScript best practices
• Tests to be implemented (TODO)
• Email system improvements:
  • Emails sent only after payment confirmation
  • SMTP configuration with port 465 (SSL)
  • Automatic password cleaning for app passwords
  • Detailed error logging and status reporting
  • Support for both Gmail and Workspace email providers

🤝 Contributing

Contributions are welcome! To contribute:

1. Fork the project
2. Create a feature branch
3. Commit your changes
4. Push to the branch
5. Open a Pull Request

📄 License

This project is private and owned by L'Avenue 120. All rights reserved.

👥 Support

For any questions or support:

• Email: adminms@makesocial.me
• Website: makesocial.me

---

Developed with ❤️ by @cerealmilkdev for Makesocial.me

L'Avenue 120 - Plateforme de Paiement TikTok STRIPE

Une application web moderne et sécurisée pour gérer les paiements lors des lives TikTok de L'Avenue 120, spécialisée dans la vente de parfums de luxe.

🚀 Fonctionnalités

• 💳 Intégration complète avec Stripe pour les paiements sécurisés
• 📱 Interface utilisateur moderne et responsive
• 🔄 Processus de paiement en 3 étapes avec design amélioré du stepper
• 🚚 Options de livraison flexibles (Chronopost Express et Standard)
• 📧 Notifications par email automatiques avec templates HTML
  • Email de confirmation client avec détails de la commande
  • Notification admin avec résumé de la commande
  • Configuration SMTP sécurisée (Gmail/Workspace)
• 🔒 Sécurité renforcée avec HTTPS et validation des données
• 🎨 Design moderne avec animations fluides
• 📊 Suivi des commandes en temps réel
• 📧 Système d'email robuste avec :
  • Déclenchement après confirmation du paiement
  • Gestion des erreurs et journalisation
  • Vérification SMTP
  • Validation des variables d'environnement

🛠️ Technologies Utilisées

• Framework: Next.js 15.3.3
• Language: TypeScript
• Styling: TailwindCSS 4
• Paiement: Stripe (v18.2.1)
• UI Components:
  • @stripe/react-stripe-js
  • @stripe/stripe-js
  • lucide-react (icônes)
• Fonts: Geist (Sans & Mono)

📋 Prérequis

• Node.js (version recommandée : 18.x ou supérieure)
• npm ou yarn
• Compte Stripe avec clés API
• Domaine avec certificat SSL valide

🔧 Installation

1. Cloner le repository :

git clone https://github.com/Mandroso22/lavenuelive.git
cd lavenuelive

2. Installer les dépendances :

npm install
# ou
yarn install

3. Configurer les variables d'environnement : Créez un fichier .env.local à la racine du projet avec les variables suivantes :

NEXT_PUBLIC_STRIPE_PUBLIC_KEY=votre_clé_publique_stripe
STRIPE_SECRET_KEY=votre_clé_secrète_stripe

4. Lancer le serveur de développement :

npm run dev
# ou
yarn dev

L'application sera accessible à l'adresse http://localhost:3000

🏗️ Structure du Projet

lavenuelive/
├── app/
│   ├── actions/         # Actions serveur (Stripe, etc.)
│   ├── api/            # Routes API
│   ├── components/     # Composants React
│   │   └── checkout/   # Composants de paiement
│   ├── lib/           # Utilitaires et configurations
│   ├── return/        # Page de retour après paiement
│   ├── globals.css    # Styles globaux
│   ├── layout.tsx     # Layout principal
│   └── page.tsx       # Page d'accueil
├── public/            # Assets statiques
└── ...config files

🔐 Sécurité

• Validation des données côté serveur
• Protection CSRF
• Paiements sécurisés via Stripe
• Variables d'environnement pour les clés sensibles
• HTTPS obligatoire en production

🚢 Déploiement

Le projet est optimisé pour un déploiement sur Vercel :

1. Connectez votre repository GitHub à Vercel
2. Configurez les variables d'environnement dans le dashboard Vercel
3. Déployez !

📝 Notes de Développement

• Le projet utilise l'App Router de Next.js
• Les composants sont optimisés pour les performances
• Le code suit les meilleures pratiques TypeScript
• Les tests sont à implémenter (TODO)
• Améliorations du système d'email :
  • Emails envoyés uniquement après confirmation du paiement
  • Configuration SMTP avec port 465 (SSL)
  • Nettoyage automatique des mots de passe d'application
  • Journalisation détaillée des erreurs et rapports de statut
  • Support des fournisseurs d'email Gmail et Workspace

🤝 Contribution

Les contributions sont les bienvenues ! Pour contribuer :

1. Fork le projet
2. Créez une branche pour votre fonctionnalité
3. Committez vos changements
4. Poussez vers la branche
5. Ouvrez une Pull Request

📄 Licence

Ce projet est privé et propriété de L'Avenue 120. Tous droits réservés.

---

Développé avec ❤️ par Makesocial.me