Fusion Fry Blog Website

Fusion Fry is a technology blog focused on the latest tech trends, tools, and innovations. The platform is designed for sharing insights, tutorials, and news about the world of technology. It features a modern UI, dark mode, and a robust admin dashboard for easy content management.

Tech Stack & Architecture

• Frontend: React (with TypeScript) for building a fast, interactive, and component-driven UI.
• Styling: Tailwind CSS for utility-first, responsive, and easily customizable design.
• Build Tool: Vite for lightning-fast development and optimized builds.
• Backend/Data: Supabase for authentication, user management, and blog data storage.
• Admin Dashboard: Secure admin pages for blog creation, editing, and management, including:
  • Blog post editor with rich text support
  • Category and tag management
  • Real-time user statistics
  • Dark mode and theme toggles
• SEO & Performance: Lazy image loading, SEO meta tags, and sitemap support.

Features

• ⚡ Fast, responsive, and mobile-friendly UI
• 🌙 Dark mode and theme toggle everywhere
• 📝 Blog posts, categories, and tags
• 🔒 Admin dashboard for secure blog creation, editing, and management
• 🖼️ Lazy image loading and SEO support
• 🦾 Supabase backend for authentication and data

Getting Started

1. Install dependencies:

   npm install

2. Start the development server:

   npm run dev

3. Open your browser: Visit http://localhost:5173

Or see the live site at: https://fusionfry.vercel.app/

Project Structure

• src/ — Main source code
  • components/ — Reusable UI components (Header, Footer, BlogCard, etc.)
  • pages/ — Page components (Home, About, Admin, etc.)
  • lib/ — Utilities and Supabase client
  • services/ — API and business logic
• public/ — Static assets
• supabase/ — Database migrations

Scripts

• npm run dev — Start development server
• npm run build — Build for production
• npm run preview — Preview production build

Customization

• Edit tailwind.config.js for theme and design
• Update Supabase settings in src/lib/supabase.ts
• Add or edit pages in src/pages/

Deployment

Deploy easily to Vercel, Netlify, or your favorite platform. See vercel.json for Vercel configuration.

Live Demo: https://fusionfry.vercel.app/

License

MIT. See LICENSE file.

---

Made with ❤️ using React, Vite, and Supabase.