Sample Blog

A modern, responsive blog application built with React and Vite. Features a clean design with dark/light theme support, blog post management, contact forms, and responsive navigation.

Features

• Modern React Architecture: Built with React 19, React Router DOM for navigation
• Responsive Design: Mobile-first design with Tailwind CSS
• Blog Management: Full blog system with categories, tags, search, and filtering
• Contact System: Integrated contact form with EmailJS
• SEO Friendly: Proper meta tags and semantic HTML structure
• Performance Optimized: Fast loading with Vite build tool
• Accessibility: ARIA labels, keyboard navigation, and screen reader support

Tech Stack

• Frontend: React 19.1.0
• Routing: React Router DOM 7.5.3
• Styling: Tailwind CSS 4.1.5
• Build Tool: Vite 6.3.5
• Email Service: EmailJS Browser 4.4.1
• Linting: ESLint 9.25.0

Project Structure

src/
├── components/
│   ├── blog/
│   │   ├── BlogCard.jsx
│   │   ├── BlogDetails.jsx
│   │   ├── BlogImageGallery.jsx
│   │   └── BlogList.jsx
│   ├── layout/
│   │   ├── Footer.jsx
│   │   ├── Header.jsx
│   │   └── Layout.jsx
│   └── ui/
│       ├── BackToTop.jsx
│       ├── Button.jsx
│       ├── Card.jsx
│       ├── Gallery.jsx
│       ├── ReadingProgressBar.jsx
│       └── TableOfContents.jsx
├── data/
│   └── blogs.js
├── pages/
│   ├── About.jsx
│   ├── Blog.jsx
│   ├── BlogPost.jsx
│   ├── Contact.jsx
│   └── Home.jsx
├── styles/
│   └── index.css
├── utils/
│   └── dateFormatter.js
├── App.jsx
└── main.jsx

Getting Started

Prerequisites

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

Installation

1. Clone the repository:

git clone <repository-url>
cd blog2

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

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

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

Configuration

Email Setup (Contact Form)

To enable the contact form functionality, update the EmailJS configuration in src/pages/Contact.jsx:

const response = await emailjs.send(
  "YOUR_SERVICE_ID", // Replace with your EmailJS service ID
  "YOUR_TEMPLATE_ID", // Replace with your EmailJS template ID
  templateParams,
  "YOUR_PUBLIC_KEY" // Replace with your EmailJS public key
);

Customization

1. Personal Information: Replace placeholder values in:

   • src/pages/About.jsx - Personal bio and details
   • src/pages/Contact.jsx - Contact information
   • src/components/layout/Header.jsx - Site title
   • src/components/layout/Footer.jsx - Copyright and social links

2. Blog Content: Edit src/data/blogs.js to add your own blog posts

3. Styling: Customize colors and design in Tailwind CSS classes

Blog System

Blog Post Structure

Each blog post in src/data/blogs.js contains:

{
  id: 1,
  slug: 'post-slug',
  title: 'Post Title',
  excerpt: 'Short description...',
  coverImage: 'image-url',
  author: {
    name: 'Author Name',
    avatar: 'avatar-url',
    bio: 'Author bio...',
    social: {
      twitter: 'url',
      github: 'url'
    }
  },
  publishedDate: '2025-01-15T09:00:00Z',
  updatedDate: null,
  readTime: 8,
  category: 'category-name',
  tags: ['tag1', 'tag2'],
  content: 'HTML content...'
}

Features

• Search: Full-text search across titles, excerpts, categories, and tags
• Filtering: Filter by categories and tags
• Sorting: Sort by date (newest/oldest) or alphabetically
• Responsive Grid: Adaptive layout for different screen sizes
• Reading Progress: Progress bar for blog posts
• Table of Contents: Auto-generated for blog posts
• Back to Top: Smooth scroll functionality

Components

Layout Components

• Header: Responsive navigation with mobile menu
• Footer: Site information and newsletter signup
• Layout: Main layout wrapper

Blog Components

• BlogCard: Individual blog post preview card
• BlogList: Grid layout for multiple blog posts
• BlogDetails: Full blog post view with reading features
• BlogImageGallery: Image gallery for blog posts

UI Components

• Button: Reusable button component with variants
• Card: Generic card container
• Gallery: Image gallery component
• ReadingProgressBar: Progress indicator for long content
• TableOfContents: Navigation for blog sections
• BackToTop: Scroll-to-top functionality

Pages

• Home: Landing page with featured posts and categories
• Blog: Blog listing with search and filters
• BlogPost: Individual blog post view
• About: Personal/company information
• Contact: Contact form and information

Deployment

Build for Production

npm run build

The built files will be in the dist/ directory.

Deploy to Netlify

1. Build the project: npm run build
2. Upload the dist/ folder to Netlify
3. Configure redirects in netlify.toml (already included)

Deploy to Vercel

npm run build
vercel --prod

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)