AI Updates Newsletter

🚀 Live Demo

📖 About

AI Updates Newsletter is a modern, beautifully designed newsletter subscription application that provides subscribers with the latest insights, trends, and developments in artificial intelligence. Built with React and Vite, featuring a stunning glass-morphism UI and powered by Supabase for secure data storage.

✨ Features

• ✅ Stunning UI/UX - Glass-morphism design with smooth animations
• ✅ Real-time Database - Secure storage with Supabase
• ✅ Form Validation - Client-side and server-side validation
• ✅ Responsive Design - Works perfectly on all devices
• ✅ Loading States - Visual feedback during operations
• ✅ Error Handling - Detailed error messages with user-friendly UI
• ✅ Welcome Animation - Engaging on-load experience
• ✅ Custom Favicon - Professional branding
• ✅ GitHub Integration - Easy social connection

🤖 Automated Newsletter Workflow

This project features intelligent automation using n8n:

Workflow Architecture:

1. User subscribes via React frontend
2. Data stored in Supabase with timezone information
3. n8n workflow triggers daily at scheduled time
4. Workflow fetches all subscribers from Supabase
5. AI-generated content is personalized based on subscriber data
6. Automated emails sent to all subscribers
7. Delivery tracking and error handling

n8n Integration:

• Automated daily trigger for newsletter distribution
• Supabase database integration for subscriber retrieval
• Email service integration for delivery
• Error handling and retry logic
• Timezone-aware scheduling

This eliminates manual newsletter management and ensures consistent, timely delivery of AI insights to all subscribers.

🎁 What Subscribers Get

By subscribing to our AI Updates Newsletter, you'll receive:

• 🤖 Latest AI Trends - Stay ahead with cutting-edge insights
• 📚 Educational Content - In-depth analysis of AI technologies
• 🌐 Industry News - Updates on major AI advancements
• 🔥 Exclusive Resources - Access to curated AI tools and resources
• 💡 Practical Applications - Real-world AI use cases and implementations
• 🗓️ Daily Updates - Regular newsletter delivery to your inbox

🛠️ Tech Stack

Technology	Description
React	JavaScript library for building user interfaces
Vite	Next-generation frontend build tool
Supabase	Open-source Firebase alternative with PostgreSQL
CSS3	Styling with modern CSS features
JavaScript	Programming language for interactive web development

Dependencies

• @supabase/supabase-js - Official Supabase client library

Dev Dependencies

• @vitejs/plugin-react - Vite plugin for React projects
• eslint - JavaScript linting tool
• vite - Build tool for modern web projects

🚀 Getting Started

Prerequisites

• Node.js (v16 or higher)
• npm or yarn package manager

Installation

1. Clone the repository:

git clone https://github.com/your-username/ai-newsletter.git

2. Navigate to the project directory:

cd ai-newsletter

3. Install dependencies:

npm install
# or
yarn install

4. Create a .env file in the root directory and add your Supabase credentials:

VITE_SUPABASE_URL=your-supabase-project-url
VITE_SUPABASE_ANON_KEY=your-supabase-anon-key

5. Start the development server:

npm run dev

6. Open your browser and navigate to http://localhost:5173

🔐 Environment Variables

To run this project, you need to add the following environment variables to your .env file:

VITE_SUPABASE_URL - Your Supabase project URL (get from your Supabase dashboard) VITE_SUPABASE_ANON_KEY - Your Supabase anon key (get from your Supabase dashboard)

Setting up Supabase

1. Create a Supabase account at supabase.com
2. Create a new project in your Supabase dashboard
3. Get your Project URL and Anonymous Key under Project Settings → API
4. Run the following SQL in your SQL Editor to create the database table:

CREATE TABLE newsletter_subscribers (
  id SERIAL PRIMARY KEY,
  name TEXT NOT NULL,
  email TEXT NOT NULL UNIQUE,
  timezone TEXT,  -- Store timezone as string (e.g., "Asia/Karachi", "America/New_York")
  created_at TIMESTAMP WITH TIME ZONE DEFAULT TIMEZONE('utc'::text, NOW()) NOT NULL
);

-- Enable Row Level Security
ALTER TABLE newsletter_subscribers ENABLE ROW LEVEL SECURITY;

-- Create a policy to allow public insertions
CREATE POLICY "Allow public insertions" ON newsletter_subscribers
FOR INSERT TO authenticated, anon
WITH CHECK (true);

🚀 Deployment

Deploy to Vercel

Manual Deployment

1. Build the project:

npm run build

2. The build files will be available in the dist directory
3. Deploy the dist directory to your preferred hosting platform

🤝 Contributing

Contributions are welcome! Here's how you can contribute:

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

Distributed under the MIT License. See LICENSE for more information.

💬 Contact

MuhammadUsmanGM - muhammadusman5965etc@gmail.com

Project Link: https://github.com/your-username/ai-newsletter

📊 Stats

---

Made with ❤️ using React, Vite, and Supabase

📧 Newsletter Sample

This is the type of mail you will get