Discover powerful but lesser-known websites that can transform your workflow
Curated tools, resources, and platforms you probably haven't heard of yet.
- 🎯 Curated Collection: Hand-picked powerful websites and tools across 20+ categories
- 🔍 Advanced Search: Full-text search across names, descriptions, URLs, and tags with real-time results
- 🏷️ Smart Filtering: Tag-based filtering with AND logic for precise results
- 🎨 Interactive Cards: Beautiful, responsive website cards with optimized Cloudinary images
- 📱 Responsive Design: Optimized for desktop, tablet, and mobile devices
- ⚡ Performance Optimized: Fast loading with image optimization and lazy loading
- 🎭 Dynamic UI: Particle background animations and smooth transitions
- ♿ Accessibility: ARIA labels, keyboard navigation, and screen reader support
- 🔗 Rich Metadata: Detailed information with source links and contributor attribution
- 🎪 Modal Views: Expandable detailed views with comprehensive website information
- Node.js (version 18 or higher)
- npm or yarn package manager
-
Clone the repository
git clone https://github.com/sayedmahmoud266/powerfulwebsites.space.git cd powerfulwebsites.space -
Install dependencies
npm install
-
Start development server
npm run dev
-
Open your browser Navigate to
http://localhost:5173to view the application
npm run dev- Start development servernpm run build- Build for productionnpm run preview- Preview production buildnpm run lint- Run ESLint
- ⚛️ React 18 - Modern UI library with hooks and concurrent features
- 📘 TypeScript 5 - Type-safe JavaScript for enhanced developer experience
- ⚡ Vite - Lightning-fast build tool and development server
- 🎨 Tailwind CSS - Utility-first CSS framework for rapid styling
- 🎯 Lucide React - Beautiful, customizable SVG icons
- ✨ Custom Animations - Particle background and smooth transitions
- 📱 Responsive Design - Mobile-first approach with breakpoint optimization
- 🎪 Modal System - Custom modal implementation with focus management
- ☁️ Cloudinary - Advanced image optimization and transformation
- 🖼️ Responsive Images - Automatic format selection and sizing
- ⚡ Lazy Loading - Performance-optimized image loading
- 🔍 ESLint - Code linting and quality assurance
- 🎯 TypeScript - Static type checking and IntelliSense
- 📦 Modern Bundling - Tree shaking and code splitting ready
powerfulwebsites.space/
├── 📂 src/
│ ├── 🧩 components/ # Reusable React components
│ │ ├── ParticleBackground.tsx # Animated particle system
│ │ ├── SearchBar.tsx # Real-time search component
│ │ ├── TagFilter.tsx # Multi-select tag filtering
│ │ ├── WebsiteCard.tsx # Website display cards
│ │ └── WebsiteModal.tsx # Detailed website modals
│ ├── 🗃️ data/ # Static data and configuration
│ │ └── websites.json # Curated website database
│ ├── 🔧 hooks/ # Custom React hooks
│ │ └── useViewport.ts # Responsive viewport hook
│ ├── 🛠️ utils/ # Utility functions
│ │ └── cloudinary.ts # Image optimization utilities
│ ├── 📱 App.tsx # Main application component
│ ├── 🚀 main.tsx # Application entry point
│ └── 🎨 index.css # Global styles and fonts
├── 📚 docs/ # Comprehensive documentation
│ ├── api/ # API documentation
│ ├── architecture/ # Architecture guides
│ ├── components/ # Component documentation
│ ├── deployment/ # Deployment guides
│ ├── development/ # Development setup
│ └── user-guide/ # User documentation
├── 🌐 public/ # Static assets
├── 📄 index.html # HTML template
├── 📦 package.json # Dependencies and scripts
├── 🎨 tailwind.config.js # Tailwind CSS configuration
├── ⚡ vite.config.ts # Vite build configuration
└── 📘 tsconfig.json # TypeScript configuration
The main application component that orchestrates:
- State management for websites, search, and filtering
- Layout and responsive design
- Modal management
- Search and filter logic
Displays individual website information:
- Website screenshot/image
- Name, description, and tags
- Metadata (added date, contributor)
- Click-to-expand functionality
- Accessibility features
Provides search functionality:
- Real-time search input
- Search query management
- Responsive design
Enables tag-based filtering:
- Multi-select tag filtering
- Clear all functionality
- Tag management and display
Detailed view component:
- Full website information
- Source links and metadata
- Tag interaction
- Responsive modal design
Animated background component:
- Particle animation system
- Performance optimized
- Customizable parameters
- Full-text search across multiple fields
- Real-time results as you type
- Field-specific matching:
- Website names
- URLs
- Descriptions
- Tags
- Multi-tag selection with AND logic
- Visual tag indicators on cards
- Filter persistence during search
- Clear filters functionality
interface Website {
name: string; // Website name
url: string; // Website URL
icon_url?: string; // Icon image URL
screenshot_url?: string; // Screenshot image URL
tags_list: string[]; // Array of category tags
description: string; // Detailed description
added_at: string; // ISO date string
added_by: { // Contributor information
user_alias: string;
user_link: string;
};
sources: Array<{ // Source information
source_url: string;
url_metadata: {
og_title: string;
og_description: string;
og_image?: string;
};
}>;
}- Dark theme with accent colors
- Orange accent color (#f97316) for branding
- Gradient backgrounds and hover effects
- Glass morphism effects with backdrop blur
- Responsive grid layouts
- Bungee font for headings
- System fonts for body text
- Responsive text sizing
- Smooth transitions on hover and focus
- Scale animations for interactive elements
- Particle background animation
- Loading states and skeleton screens
- React plugin enabled
- Lucide React excluded from dependency optimization
- Standard content paths
- No custom theme extensions
- No additional plugins
- Standard React TypeScript setup
- App and Node configurations
🌐 Visit POWERFULWEBSITES.SPACE - Experience the live application
- Production Build
npm run build
- Preview Build
npm run preview
- Build Analysis
npm run build -- --analyze
- 🔺 Vercel (Current) - Zero-config deployment with automatic previews
- 🌐 Netlify - Static site hosting with form handling
- 📄 GitHub Pages - Free hosting for public repositories
- ☁️ Cloudflare Pages - Global CDN with edge computing
- ⚡ Lighthouse Score: 95+ across all categories
- 📦 Bundle Size: < 500KB gzipped
- 🖼️ Image Optimization: Cloudinary integration
- 📱 Mobile Performance: Optimized for all devices
We welcome contributions! Here's how you can help make POWERFULWEBSITES.SPACE even better:
- ⭐ Star the repository to show your support
- 🍴 Fork the repository to your GitHub account
- 🌿 Create a feature branch (
git checkout -b feature/amazing-feature) - 💾 Commit your changes (
git commit -m 'Add amazing feature') - 📤 Push to the branch (
git push origin feature/amazing-feature) - 🔄 Open a Pull Request with a detailed description
- 📝 Edit
src/data/websites.json - 📋 Follow the data structure:
{ "name": "Website Name", "url": "https://example.com", "icon_url": "https://cloudinary-url/logo.png", "screenshot_url": "https://cloudinary-url/screenshot.jpg", "tags_list": ["Category", "Type"], "description": "Detailed description...", "added_at": "2025-01-01T00:00:00.000Z", "added_by": { "user_alias": "your-username", "user_link": "https://your-website.com" }, "sources": [] } - 🏷️ Use appropriate tags from existing categories
- ✅ Test your addition locally before submitting
- 📘 TypeScript for all new code
- ⚛️ Functional components with React hooks
- 🎨 Tailwind CSS for styling
- ♿ Accessibility features (ARIA labels, keyboard navigation)
- 📱 Mobile-first responsive design
- ⚡ Performance optimization considerations
- 🐛 Found a bug? Open an issue
- 💡 Have an idea? Request a feature
- ❓ Need help? Start a discussion
- Modern browsers (Chrome 88+, Firefox 85+, Safari 14+, Edge 88+)
- Mobile browsers with responsive design
- Accessibility features for screen readers
- Keyboard navigation support
- Content Security Policy ready
- HTTPS deployment recommended
- External link security with rel="noopener noreferrer"
- Image loading with error handling
- Vite for fast development and building
- Lazy loading for images
- Optimized animations with CSS transforms
- Minimal bundle size with tree shaking
- Efficient re-renders with React optimization
Build fails
- Ensure Node.js version 18+
- Clear node_modules and reinstall
Styles not loading
- Check Tailwind CSS installation
- Verify content paths in config
TypeScript errors
- Run
npm run buildto check types - Update TypeScript configuration
Modal not working
- Check React component imports
- Verify modal state management
This project is licensed under the MIT License - see the LICENSE file for details.
- ⚛️ React Team - For the incredible framework that powers modern web development
- ⚡ Vite Team - For the lightning-fast build tool and development experience
- 🎨 Tailwind CSS - For the utility-first CSS framework that makes styling a joy
- 🎯 Lucide React - For the beautiful, consistent icon library
- ☁️ Cloudinary - For powerful image optimization and transformation
- 🌐 Vercel - For seamless deployment and hosting
- 👥 Contributors - For making this project better with every contribution
If you find this project helpful, please consider:
- ⭐ Starring the repository to show your support
- 🍴 Forking and contributing to help it grow
- ☕ Buying me a coffee to fuel development
- 🐦 Sharing it with your network
This project is licensed under the MIT License - see the LICENSE file for details.
