A dynamic web application that tracks and visualizes artificial intelligence developments on an interactive timeline. Created by palamut62 and deployed at umutcelik.online.
- Full support for both Turkish and English languages
- Real-time language switching without page reload
- Synchronized content in both languages
- Automated fetching of AI developments using Google's Gemini AI
- Smart filtering and verification of developments
- Comprehensive coverage of:
- New AI model launches and updates
- Important research papers and findings
- AI announcements from major tech companies
- AI regulations and ethical developments
- AI safety and risk management
- Smooth scrolling timeline interface
- Drag and scroll functionality with momentum
- Sound effects synchronized with movement
- Visual feedback with spinning animations
- Color-coded events for better visualization
- Responsive design for both desktop and mobile
- Year indicators and navigation controls
- Automatic refresh functionality
- Progress indicators during updates
- Real-time log display in sidebar
- Update notifications and summaries
- Dark/Light theme support
- Responsive design for all screen sizes
- Beautiful animations and transitions
- Blur effects and modern aesthetics
- Accessibility features
- Supabase database integration
- Real-time data synchronization
- Efficient caching and loading
- Automatic data validation
- Interactive sound effects during timeline navigation
- Speed-based sound modulation
- Smooth volume transitions
- Touch-responsive audio feedback
- Frontend: Next.js, TypeScript, Tailwind CSS
- AI: Google Gemini AI API
- Database: Supabase
- Animation: Framer Motion
- Styling: Tailwind CSS, shadcn/ui
- State Management: React Hooks
- Version Control: Git
- Clone the repository:
git clone https://github.com/palamut62/ai-timeline-news.git- Install dependencies:
npm install- Set up environment variables:
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_key
NEXT_PUBLIC_GEMINI_API_KEY=your_gemini_api_key- Run the development server:
npm run dev- Language Toggle: Click the language icon to switch between Turkish and English
- Timeline Navigation:
- Drag the timeline left/right
- Use arrow buttons for precise navigation
- Click on events for detailed information
- Updates:
- Click the refresh icon to fetch new developments
- View update logs in the sidebar
- Monitor real-time changes
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
Created by palamut62
Website: umutcelik.online
- Google Gemini AI for providing the AI capabilities
- Supabase for the robust backend infrastructure
- The Next.js team for the amazing framework
- All contributors and users of the application
CREATE TABLE ai_developments (
id BIGINT PRIMARY KEY GENERATED ALWAYS AS IDENTITY,
event_date DATE NOT NULL,
short_description TEXT NOT NULL,
long_description TEXT NOT NULL,
short_description_en TEXT NOT NULL,
long_description_en TEXT NOT NULL,
source_url TEXT,
created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);
-- Enable Row Level Security (RLS)
ALTER TABLE ai_developments ENABLE ROW LEVEL SECURITY;
-- Create policy for anonymous access
CREATE POLICY "Allow anonymous access to ai_developments"
ON ai_developments
FOR SELECT
TO anon
USING (true);
-- Create indexes for better performance
CREATE INDEX idx_ai_developments_event_date ON ai_developments(event_date DESC);
CREATE INDEX idx_ai_developments_created_at ON ai_developments(created_at DESC);CREATE TABLE ai_logs (
id BIGINT PRIMARY KEY GENERATED ALWAYS AS IDENTITY,
title TEXT NOT NULL,
title_en TEXT NOT NULL,
description TEXT NOT NULL,
description_en TEXT NOT NULL,
event_date TIMESTAMP WITH TIME ZONE NOT NULL,
created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);
-- Enable Row Level Security (RLS)
ALTER TABLE ai_logs ENABLE ROW LEVEL SECURITY;
-- Create policy for anonymous access
CREATE POLICY "Allow anonymous access to ai_logs"
ON ai_logs
FOR ALL
TO anon
USING (true)
WITH CHECK (true);
-- Create index for faster queries
CREATE INDEX idx_ai_logs_created_at ON ai_logs(created_at DESC);
-- Create realtime publication
DROP PUBLICATION IF EXISTS ai_logs_publication;
CREATE PUBLICATION ai_logs_publication FOR TABLE ai_logs;CREATE TABLE ai_updates (
id BIGINT PRIMARY KEY GENERATED ALWAYS AS IDENTITY,
success_count INTEGER NOT NULL,
update_time TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);
-- Enable Row Level Security (RLS)
ALTER TABLE ai_updates ENABLE ROW LEVEL SECURITY;
-- Create policy for anonymous access
CREATE POLICY "Allow anonymous access to ai_updates"
ON ai_updates
FOR SELECT
TO anon
USING (true);
-- Create index for faster queries
CREATE INDEX idx_ai_updates_update_time ON ai_updates(update_time DESC);-
ai_developments: Main table storing AI development events
- Stores both Turkish and English descriptions
- Tracks event dates and source URLs
- Used for timeline visualization
-
ai_logs: Logging table for update operations
- Records successful updates and changes
- Provides real-time update notifications
- Displayed in the sidebar
-
ai_updates: Update tracking table
- Tracks successful update counts
- Records last update timestamps
- Used for refresh status display
- Create a new project in Supabase
- Execute the SQL queries above to create tables
- Set up the following environment variables:
NEXT_PUBLIC_SUPABASE_URL=https://your-project-id.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key-
Enable realtime functionality:
- Go to Database → Replication
- Enable replication for the
ai_logstable - Verify the publication is created
-
Configure RLS policies:
- Verify policies are created for each table
- Test anonymous access
- Monitor access patterns