A self-hosted service for creating and managing company greeting walls, perfect for end-of-year wishes and celebrations.

📝 See RELEASE_NOTES.md for detailed version history and features

• Dynamic company-specific greeting walls
• Rich text editor for messages with formatting options
• LinkedIn company integration and logo fetching
• Responsive design with mobile support
• Interactive animations and effects:
  • Message drop-in animations
  • Firework particle effects
  • Candy crush-style bubble pop effects
  • Theme customization with gradient backgrounds
• Message management (create, delete, view)

Company-specific greeting wall with interactive messages and animations

Rich text editor for adding personalized wishes

Responsive mobile interface with optimized interactions

• Automatic LinkedIn company profile detection
• Company logo fetching and display
• Company information validation
• Custom URL generation based on company name

• Rich text editor with formatting options
• Anonymous or signed messages
• Message moderation capabilities
• Expandable message view
• Delete functionality for administrators

• Dynamic particle animations
• Firework effects on new messages
• Confetti celebrations
• Star field background
• Smooth message reveal animations
• Theme switching (Aurora, Midnight, Sunset)

• Fully responsive design
• Touch-optimized interactions
• Mobile-first animations
• Adaptive layout for different screen sizes
• Native share integration

• Direct LinkedIn company profile links
• Social media sharing (Twitter, Facebook)
• Native share API integration
• Message permalinks
• Embeddable message views

• Row Level Security (RLS)
• API route protection
• Rate limiting
• Optimized image loading
• Lazy-loaded components
• Error boundaries for stability

• Loading states with spinners
• Error handling with user feedback
• Smooth transitions
• Keyboard accessibility
• Cross-browser compatibility

• Frontend Framework: Next.js (React)
• Database: Supabase
• Styling: Tailwind CSS
• Rich Text Editor: React Quill
• Icons: Lucide React
• HTML Parsing: Cheerio
• Type Safety: TypeScript
• Testing: Jest
• Development Tools:
  • Aider - AI pair programming assistant used for code generation and refactoring

• Node.js (v14 or higher)
• npm or yarn
• Supabase account
• Git

1. Clone the repository:

git clone https://github.com/yourusername/greeting-wall.git
cd greeting-wall

2. Install dependencies:

npm install

3. Configure environment variables:

   • Copy .env.example to .env.local
   • Fill in your Supabase credentials and other configuration

4. Initialize Supabase:

npm run supabase:init

5. Start the development server:

npm run dev

L'application est hébergée sur une infrastructure moderne et évolutive :

• Hébergement : Instance Hostinger VPS
• Orchestration : Coolify v4.0.0 pour le déploiement et la gestion des conteneurs
• Base de données : Instance Supabase dédiée
• Monitoring : Intégré via Coolify dashboard
• Backups : Automatisés quotidiens via Hostinger VPS Snapshots

graph TD
    A[Client Browser] -->|HTTP Request| B[Next.js Pages]
    B -->|API Call| C[Next.js API Routes]
    C -->|Supabase Client| D[Supabase Database]
    C -->|Service Role Key| D
    E[Coolify] -->|Deploy & Monitor| B
    E -->|Deploy & Monitor| C

L'architecture du projet utilise une approche sécurisée où :

• Les pages Next.js ne communiquent jamais directement avec la base de données
• Toutes les requêtes passent par l'API Next.js qui :
  • Valide les données
  • Gère les autorisations
  • Utilise une clé de service sécurisée pour Supabase
  • Applique les règles métier
• La base de données Supabase est protégée par :
  • Row Level Security (RLS)
  • Politiques d'accès granulaires
  • Clés d'API distinctes pour le client et le serveur

greeting-wall/
├── components/               # React components
│   ├── company-greeting-wall.tsx    # Main greeting wall component
│   ├── ErrorBoundary.tsx    # Error handling component
│   └── LoadingSpinner.tsx   # Loading indicator
├── pages/                   # Next.js pages
│   ├── api/                 # API routes
│   ├── _app.tsx            # App wrapper
│   ├── index.tsx           # Home page
│   └── [companyUrl].tsx    # Dynamic company page
├── services/               # Service layer
│   └── supabaseService.ts  # Supabase integration
├── styles/                 # Global styles
├── utils/                  # Utility functions
└── public/                 # Static assets

Required environment variables (see .env.example):

• NEXT_PUBLIC_SUPABASE_URL: Your Supabase project URL
• NEXT_PUBLIC_SUPABASE_ANON_KEY: Supabase anonymous key
• NEXT_PUBLIC_SUPABASE_SERVICE_ROLE_KEY: Supabase service role key
• SUPABASE_PROJECT_ID: Project identifier
• SUPABASE_API_PORT: API port (default: 54321)
• SUPABASE_DB_PORT: Database port (default: 54322)
• SUPABASE_STUDIO_PORT: Studio port (default: 54323)
• SUPABASE_INBUCKET_PORT: Email testing port (default: 54324)
• OPENAI_API_KEY: For AI-powered features
• Additional configuration for storage, auth, and email settings

• @supabase/supabase-js: Supabase client library
• react-quill: Rich text editor
• cheerio: HTML parsing for LinkedIn integration
• lucide-react: Icon library
• tailwindcss: Utility-first CSS framework

The main table structure in Supabase:

messages (
  id: number (primary key)
  text: string
  signature: string
  created_at: timestamp
  company_url: string
  linkedin_url: string
  company_linkedin_url: string
)

• RLS (Row Level Security) policies implemented in Supabase
• Environment variables for sensitive data
• API route protection
• Error boundary implementation

1. Create a new branch for features:

git checkout -b feature/your-feature-name

2. Run development server:

npm run dev

3. Access the application:

http://localhost:3000

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

👋 Want to contribute? We'd love your help! Pick any item from this roadmap and submit a PR. Check our Contributing Guidelines to get started.

• Implement pagination for messages (10 messages per page)
• Add Redis caching layer for frequently accessed data
• Optimize image loading and storage
• Implement service worker for offline support
• Add server-side caching with Next.js ISR

• Add search functionality for messages
• Implement filters (date, author, content type)
• Add advanced search with Elasticsearch
• Add message tagging system

• Add company authentication system
• Implement role-based access control
• Add email verification for company accounts
• Add 2FA support
• Implement audit logging

• Add multiple layout options:
  • Grid view (current)
  • List view
  • Timeline view
  • Carousel view
• Add customizable themes
• Support for dark/light mode
• Add print-friendly view
• Add fullscreen presentation mode

• Add export options (PDF, CSV)
• Add social media sharing integrations
• Add API documentation
• Implement webhook system
• Add analytics dashboard

This project is licensed under the MIT License - see the LICENSE file for details.