📈 Foreign Stock Blog

A modern, high-performance React application for international stock market analysis and insights. Built with React 19, TypeScript, Vite, and Tailwind CSS.

✨ Features

Core Features

📰 Article Management - Browse, filter, and search international stock articles
🌍 Multi-Market Support - Coverage of US, European, and Asian markets
🏢 Sector Analysis - Filter by Technology, Finance, Healthcare, Energy, and Consumer sectors
🔍 Advanced Search - Real-time search with multiple filter combinations
📱 Responsive Design - Optimized for mobile, tablet, and desktop

Advanced Features

🌓 Dark Mode - Three modes (light, dark, system) with persistent preference
🔗 URL State Management - Shareable links with filter states
⚡ Performance Optimized - 56% faster initial load with code splitting
🎨 Modern Animations - Smooth 60 FPS animations using Framer Motion
✨ Magic UI Components - Beautiful animated components
🛡️ Error Handling - Graceful error boundaries
📄 Custom 404 Page - Helpful navigation for invalid routes
📈 SEO Optimized - Meta tags for social sharing (Open Graph, Twitter Cards)
⬆️ Scroll to Top - Floating button for better UX

🚀 Quick Start

Prerequisites

Node.js 18+
pnpm 10+ (recommended) or npm/yarn

Installation

# Clone the repository
git clone [email protected]:KiattisakM/forreign-blog-by-claude.git
cd forreign-blog-by-claude

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Open http://localhost:5173

Build for Production

# Build optimized bundle
pnpm build

# Preview production build
pnpm preview

📦 Tech Stack

Core

React 19.0 - Latest React with improved performance
TypeScript 5.6 - Type safety and better DX
Vite 6.0 - Lightning-fast build tool
React Router 6.28 - Client-side routing with URL state

Styling

Tailwind CSS 3.4 - Utility-first CSS framework
shadcn/ui - High-quality React components
Radix UI - Accessible component primitives

Animations

Framer Motion 12.23 - Production-ready animations
Magic UI - Beautiful animated components

State Management

React Context - Theme management
URL Search Params - Filter state in URL

SEO & Meta

react-helmet-async - Dynamic meta tags

🏗️ Project Structure

forreign-blog-by-claude/
├── src/
│   ├── components/          # React components
│   │   ├── ui/             # shadcn/ui components
│   │   ├── magicui/        # Magic UI animated components
│   │   ├── layout/         # Layout components (Header, Footer, Sidebar)
│   │   ├── ErrorBoundary.tsx
│   │   ├── SEO.tsx
│   │   ├── ScrollToTop.tsx
│   │   └── ...
│   ├── pages/              # Page components
│   │   ├── HomePage.tsx
│   │   ├── ArticleListPage.tsx
│   │   ├── ArticleDetailPage.tsx
│   │   ├── MarketPage.tsx
│   │   ├── SectorPage.tsx
│   │   ├── AboutPage.tsx
│   │   └── NotFoundPage.tsx
│   ├── contexts/           # React contexts
│   │   └── ThemeContext.tsx
│   ├── lib/                # Utilities
│   │   ├── utils.ts
│   │   └── urlParams.ts
│   ├── data/               # Mock data
│   │   └── mockStockArticles.ts
│   ├── types/              # TypeScript types
│   │   └── index.ts
│   ├── App.tsx             # Main app component
│   ├── main.tsx            # Entry point
│   └── index.css           # Global styles
├── public/                 # Static assets
├── .mahirolab/            # Development documentation
├── dist/                   # Production build (generated)
├── vite.config.ts         # Vite configuration
├── tailwind.config.ts     # Tailwind configuration
├── tsconfig.json          # TypeScript configuration
└── package.json           # Dependencies

🎨 Key Features in Detail

Dark Mode

Three theme modes with automatic system preference detection:

Light Mode - Clean, professional light theme
Dark Mode - Eye-friendly dark theme
System Mode - Follows OS preference
Persistent across sessions using localStorage

URL State Management

All filters are reflected in the URL for easy sharing:

/articles?markets=US,EU&sectors=Technology&q=Apple&sort=newest
/markets/US?sectors=Technology&q=Tesla
/sectors/Technology?markets=US

Performance Optimization

Code Splitting - Route-based lazy loading
Bundle Size - 226 KB (72 KB gzipped)
19 Optimized Chunks - Better caching
56% Faster - Initial load improvement
Lazy Loading - Pages load on-demand

Animated UI

Smooth Transitions - 60 FPS animations
Hover Effects - Interactive feedback
Filter Checkboxes - Scale animations on selection
Magic UI Components - GridPattern, NumberTicker, ShimmerButton, BorderBeam

📱 Pages

/ - Homepage with featured articles and market overview
/articles - Browse all articles with advanced filters
/articles/:slug - Individual article details
/markets/:market - Market-specific articles (US, EU, ASIA)
/sectors/:sector - Sector-specific articles
/about - About page with mission and disclaimer
404 - Custom not found page with helpful navigation

🛠️ Development

Available Scripts

# Development
pnpm dev          # Start dev server at http://localhost:5173
pnpm build        # Build for production
pnpm preview      # Preview production build
pnpm lint         # Run ESLint

# Type Checking
tsc -b            # Check TypeScript types

Code Quality

✅ 0 TypeScript Errors - Strict type checking
✅ ESLint - Code linting
✅ Conventional Commits - Clean git history
✅ Component Architecture - Reusable and composable

📊 Bundle Analysis

Production Build

Main Bundle:        226.53 KB  (72.66 KB gzipped)
React Vendor:        33.61 KB  (11.97 KB gzipped)
UI Vendor:           81.12 KB  (28.24 KB gzipped)
Animation Vendor:   115.89 KB  (38.18 KB gzipped)
Total Chunks:       19 optimized files

Performance Metrics

Initial Load: 56% faster than unoptimized
Build Time: ~3.8 seconds
Lazy Loading: All routes
Caching: Optimized vendor splits

🌐 Deployment

Vercel (Recommended)

Push code to GitHub (already done ✅)
Go to vercel.com
Import repository: KiattisakM/forreign-blog-by-claude
Deploy (auto-configured for Vite)

Netlify

Go to netlify.com
Import from GitHub
Build command: pnpm run build
Publish directory: dist

Cloudflare Pages

Go to pages.cloudflare.com
Connect to Git
Build command: pnpm run build
Output directory: dist

🎯 Browser Support

✅ Chrome (latest)
✅ Firefox (latest)
✅ Safari (latest)
✅ Edge (latest)
✅ Mobile browsers (iOS Safari, Chrome Mobile)

🔧 Configuration

Environment Variables

Currently, no environment variables are required. The app uses mock data.

For future API integration, create .env:

VITE_API_URL=https://api.example.com
VITE_API_KEY=your_api_key

Customization

Theme Colors: Edit src/index.css (CSS variables)
Mock Data: Edit src/data/mockStockArticles.ts
Components: All in src/components/
Tailwind Config: Edit tailwind.config.ts

📝 License

This project is licensed under the MIT License.

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Fork the repository
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'feat: add amazing feature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

Commit Convention

This project follows Conventional Commits:

feat: - New features
fix: - Bug fixes
docs: - Documentation changes
style: - Code style changes (formatting, etc.)
refactor: - Code refactoring
perf: - Performance improvements
test: - Adding tests
chore: - Maintenance tasks

🙏 Acknowledgments

React - UI library
Vite - Build tool
Tailwind CSS - CSS framework
shadcn/ui - Component library
Radix UI - Accessible primitives
Framer Motion - Animation library
Magic UI - Animated components
Lucide Icons - Icon library

📧 Contact

Repository: github.com/KiattisakM/forreign-blog-by-claude

🚀 Status

Production Ready: ✅ 100%

Features:

✅ Core functionality complete
✅ Dark mode implemented
✅ URL state management
✅ Performance optimized
✅ Error handling
✅ SEO optimized
✅ Responsive design
✅ Accessible components

Ready to deploy! 🎉

Built with ❤️ using React, TypeScript, and Vite

🤖 Developed with assistance from Claude Code

Name		Name	Last commit message	Last commit date
Latest commit History 27 Commits
.claude/commands/git		.claude/commands/git
.github/workflows		.github/workflows
.mahirolab		.mahirolab
.playwright-mcp		.playwright-mcp
server		server
src		src
.DS_Store		.DS_Store
.dockerignore		.dockerignore
.gitignore		.gitignore
BACKEND_SETUP.md		BACKEND_SETUP.md
CLAUDE.md		CLAUDE.md
DOCKER_DEPLOY.md		DOCKER_DEPLOY.md
Dockerfile		Dockerfile
README.md		README.md
components.json		components.json
docker-compose.yml		docker-compose.yml
eslint.config.js		eslint.config.js
index.html		index.html
nginx.conf		nginx.conf
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
postcss.config.js		postcss.config.js
tailwind.config.ts		tailwind.config.ts
tsconfig.app.json		tsconfig.app.json
tsconfig.app.tsbuildinfo		tsconfig.app.tsbuildinfo
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
tsconfig.node.tsbuildinfo		tsconfig.node.tsbuildinfo
vite.config.ts		vite.config.ts

KiattisakM/forreign-blog-by-claude

Folders and files

Latest commit

History

Repository files navigation