Blog AI App

Modern React single-page application scaffolded with Vite. It provides a content-rich blog/news/products/resources experience with client-side routing, responsive UI, SCSS modules, Tailwind CSS v4, and motion-powered interactions.

Badges

---

Table of Contents

• Overview
• Tech Stack
• Getting Started
  • Prerequisites
  • Installation
  • Available Scripts
• Usage
• Features
• Configuration
• Folder Structure
• Testing
• Deployment
• Contributing
• License
• Acknowledgements

---

Overview

Blog AI App is a frontend SPA that organizes content into Home, News, Products (podcasts), Resources (reports/whitepapers), and Blog detail pages. It uses react-router-dom for nested routes, SCSS modules for component-level styling, and Tailwind CSS v4 for utility styles. Media assets (images/videos) are shipped locally for an offline-friendly dev experience.

Tech Stack

• React 19 + React DOM
• Vite 7 (dev server, build, preview)
• React Router DOM 7
• Tailwind CSS v4 (via @tailwindcss/vite)
• SCSS / CSS Modules
• Motion (animations) and React Icons
• ESLint 9 (with React Hooks and React Refresh configs)

---

Getting Started

Prerequisites

• Node.js >= 18 and npm >= 9
• Git (optional, for version control)

Check versions:

node -v
npm -v

Installation

# Clone the repository
git clone <your-repo-url> blog-AI-app
cd blog-AI-app

# Install dependencies
npm install

Available Scripts

# Start the dev server with HMR on http://localhost:5173
npm run dev

# Production build (outputs to ./dist)
npm run build

# Preview the production build locally
npm run preview

# Lint the codebase
npm run lint

---

Usage

Start the development server:

npm run dev

Open the app at http://localhost:5173.

Client-side routes are declared in src/routes/AppRoutes.jsx. Example navigation using React Router:

// src/App.jsx
import { BrowserRouter } from "react-router-dom";
import AppRoutes from "./routes/AppRoutes";

export default function App() {
  return (
    <BrowserRouter>
      <AppRoutes />
    </BrowserRouter>
  );
}

// src/routes/AppRoutes.jsx (high level)
<Routes>
  <Route path="/" element={<Layout />}>
    <Route index element={<Home />} />
    <Route path="news" element={<News />} />
    <Route path="products" element={<Products />} />
    <Route path="resources" element={<Resources />} />
    <Route path="/blogs/:slug" element={<Blog />} />
  </Route>
  <Route path="*" element={<NotFound />} />
  </Routes>

Tailwind v4 utilities are available globally (see src/styles/index.css). SCSS modules are used for component-scoped styles under src/components/**/**/*.module.scss.

---

Features

• Modern tooling: Vite dev server with instant HMR and optimized production builds
• Routing: Nested routes with react-router-dom
• Styling: Tailwind CSS v4 utilities + SCSS Modules for encapsulated styles
• Media-rich UI: Local images and videos for posts, podcasts, and resources
• Animations: Smooth transitions with motion
• Linting: ESLint 9 with React Hooks and Refresh rules

---

Configuration

• Environment variables: None required by default. If you introduce API calls, add a .env file and access variables via import.meta.env per Vite conventions (e.g. VITE_API_BASE_URL).
• Vite config: vite.config.js enables React and Tailwind v4 via @tailwindcss/vite.
• ESLint: See eslint.config.js for rules and ignores.

---

Folder Structure

blog-AI-app/
├─ public/
│  ├─ images/           # Static images used across pages
│  ├─ videos/           # Static videos used in news/products sections
│  └─ files/            # Downloadable assets (e.g., PDFs)
├─ src/
│  ├─ assets/           # App-bundled images/videos
│  ├─ components/       # Reusable UI components (home, news, posts, products, resources, etc.)
│  ├─ constants/        # Static data (links, cards, filters)
│  ├─ Layouts/          # Layout wrapper(s) and shared shells
│  ├─ pages/            # Route-level pages (Home, News, Products, Resources, Blog)
│  ├─ routes/           # Route definitions (AppRoutes)
│  ├─ styles/           # Global styles (Tailwind entry, variables, base)
│  └─ utils/            # Small utilities (e.g., like/heart handlers)
├─ index.html           # App entry HTML
├─ vite.config.js       # Vite build/dev configuration
├─ eslint.config.js     # Linting rules
├─ package.json         # Scripts and dependencies
└─ README.md            # This file

---

Testing

No tests are included by default. To add unit testing with Vitest and React Testing Library:

npm i -D vitest @vitest/ui @testing-library/react @testing-library/jest-dom jsdom

Then configure a vitest.config.ts and add scripts like:

{
  "scripts": {
    "test": "vitest",
    "test:ui": "vitest --ui"
  }
}

---

Deployment

This is a static SPA and can be deployed to any static host:

1. Build the production bundle:

   npm run build

2. Preview locally (optional):

   npm run preview

3. Deploy the dist/ folder to your host of choice:
   • Vercel: set build command npm run build and output dist
   • Netlify: set build command npm run build and publish directory dist
   • GitHub Pages: serve dist/ via a static workflow
   • Any static file server or CDN

---

Contributing

Contributions are welcome! To propose changes:

1. Fork the repository and create a feature branch
2. Install dependencies and run npm run dev
3. Follow existing code style and lint rules (npm run lint)
4. Submit a pull request describing your changes and rationale

For non-trivial UI changes, include before/after screenshots or short screen recordings.

---

License

This project is currently private with no license declared (UNLICENSED). All rights reserved by the project owner. If you intend to open-source, consider adding a license (e.g., MIT, Apache-2.0) and updating badges accordingly.

---

Acknowledgements

• React and the React community
• Vite team for blazing-fast DX
• Tailwind CSS v4
• React Router
• Motion and React Icons ecosystems