Trains of Rajbari - Community Railway Platform
Project Overview
🚂 Trains of Rajbari - Community Railway Platform
🎯 About The Project
Trains of Rajbari is a comprehensive community platform designed to serve railway enthusiasts and daily commuters in the Rajbari district of Bangladesh. The platform provides real-time train schedules, station information, community updates, and a rich gallery of train photographs.
📖 Table of Contents
- About The Project
- Key Features
- Technology Stack
- Visual Elements
- Getting Started
- Project Structure
- SEO & Performance
- Contributing
- License
- Contact
Why This Project?
- Community First: Built for and by the railway community of Rajbari
- Real-Time Information: Up-to-date train schedules and station details
- Modern Experience: Beautiful, responsive design with smooth animations
- SEO Optimized: Station-specific pages with rich social media previews
- Accessible: Works seamlessly on mobile, tablet, and desktop devices
✨ Key Features
🗓️ Dynamic Train Schedules
- Station-Based Filtering: View schedules for 8 different stations in Rajbari district
- URL Parameter Support: Direct links to specific station schedules (e.g.,
/schedules?station=rajbari) - Real-Time Updates: Arrival and departure times with off-day highlighting
- Train Numbers: Display train numbers alongside names for easy identification
- Smart Sorting: Organized by departure time for quick reference
🚉 Station Information
- 4 Major Stations: Rajbari, Pangsha, Kalukhali, and Pachuria
- Station Galleries: Dedicated photo galleries for each station
- Interactive Cards: Click to explore detailed station information
- Image Fallbacks: Automatic logo display for stations without images
📱 Share Functionality
- Web Share API: Native sharing on mobile devices
- Clipboard Fallback: One-click copy to clipboard on desktop
- Station-Specific Sharing: Share individual station schedules
- Train Details Sharing: Share specific train information
- SEO-Optimized Links: Rich previews on social media platforms
🎨 Visual Experience
- Railway Track Animation: Animated train tracks on the left side of the page
- Moving Train: Smooth train animation traveling along the tracks
- Particle Effects: Train-themed particles for immersive experience
- Glassmorphism: Modern UI with frosted glass effects
- Dark Theme: Easy-on-the-eyes dark color scheme
- Smooth Transitions: Framer Motion animations throughout
📰 Community Updates
- Blog System: Regular updates and railway news
- Emergency Notifications: Marquee alerts for important announcements
- Train Types: Information about Intercity, Mail/Express, and Commuter trains
- Gallery: Extensive photo collection of trains and stations
🔍 SEO & Social Sharing
- Dynamic Meta Tags: Station and train-specific SEO optimization
- Open Graph Tags: Rich previews on Facebook and LinkedIn
- Twitter Cards: Beautiful previews when shared on Twitter
- Sitemap: Comprehensive XML sitemap for search engines
- Structured Data: Enhanced search engine understanding
🛠️ Technology Stack
Core Framework
-
React 19.2.1 - Latest React with concurrent features
- Hooks for state management
- Suspense for data fetching
- Concurrent rendering for better performance
-
Vite 7.2.6 - Next-generation frontend tooling
- Lightning-fast HMR (Hot Module Replacement)
- Optimized build with Rollup
- Native ES modules support
- Plugin ecosystem for extensibility
Routing & Navigation
- React Router DOM 7.1.1 - Client-side routing
- Nested routes
- URL parameter handling
- Programmatic navigation
- Link components with active states
UI & Styling
-
Tailwind CSS 3.4.17 - Utility-first CSS framework
- Custom color palette (primary, secondary, destructive)
- Responsive design utilities
- Dark mode support
- Custom animations and transitions
-
shadcn/ui - Re-usable component library
- Button components
- Card layouts
- Accessible UI primitives
- Customizable with Tailwind
Animations
- Framer Motion 12.0.0 - Production-ready animation library
- Page transitions
- Scroll-triggered animations
- Gesture animations
- Layout animations with
AnimatePresence - Stagger effects for lists
Icons
- Lucide React 0.468.0 - Beautiful, consistent icon set
- 1000+ icons
- Tree-shakeable
- Customizable size and color
- Accessible with ARIA labels
SEO & Meta Tags
- React Helmet Async 2.0.5 - Document head manager
- Dynamic title and meta tags
- Open Graph tags for social sharing
- Twitter Card tags
- Canonical URLs
- Server-side rendering support
Build Tools & Development
-
ESLint 9.17.0 - Code linting
- React-specific rules
- Hooks validation
- Best practices enforcement
-
PostCSS 8.4.49 - CSS transformation
- Autoprefixer for browser compatibility
- Tailwind CSS processing
- CSS optimization
-
Autoprefixer 10.4.20 - Vendor prefix automation
Package Manager
- pnpm - Fast, disk space efficient package manager
- Faster than npm/yarn
- Strict dependency resolution
- Monorepo support
🎨 Visual Elements
Railway Track & Train Animation
One of the standout features of this project is the animated railway track that runs along the left side of the page, complete with a moving train that travels smoothly along the tracks.
Implementation Details:
Railway Track Component (RailwayTrack.jsx):
- Vertical track rendered using CSS
- Positioned on the left side of the viewport
- Responsive design that adapts to screen sizes
- Subtle glow effects for depth
Train Animation Component (TrainAnimation.jsx):
- SVG-based train illustration
- Smooth vertical movement using CSS animations
- Continuous loop with realistic timing
- Synchronized with track position
Train Particles (TrainVibes.jsx):
- Particle system using canvas or CSS
- Train-themed particles (smoke, steam effects)
- Subtle background ambiance
- Performance-optimized rendering
Color Scheme
- Primary: Green (#22c55e) - Represents Bangladesh Railway
- Secondary: Red (#ef4444) - Accent color
- Background: Dark slate tones for modern look
- Text: High contrast for readability
Typography
- Font Family: System fonts for optimal performance
- Headings: Bold, large sizes for hierarchy
- Body: Readable sizes with proper line height
- Code: Monospace for technical content
🚀 Getting Started
Prerequisites
- Node.js (v18 or higher)
- pnpm (recommended) or npm
Installation
-
Clone the repository
git clone https://github.com/faketi101/trainsofrajbari.git cd trainsofrajbari -
Install dependencies
pnpm install -
Start development server
pnpm run dev -
Open your browser
http://localhost:5173
Build for Production
pnpm run build
The optimized production build will be in the dist/ directory.
Preview Production Build
pnpm run preview
📁 Project Structure
trainsofrajbari/
├── public/ # Static assets
│ ├── logo-circle.png # Logo
│ ├── sitemap.xml # SEO sitemap
│ ├── stations/ # Station images
│ └── trains/ # Train images
├── src/
│ ├── components/
│ │ ├── layout/ # Layout components
│ │ │ └── Layout.jsx # Main layout wrapper
│ │ ├── navbar.jsx # Navigation bar
│ │ ├── footer.jsx # Footer
│ │ ├── sections/ # Page sections
│ │ │ ├── Hero.jsx # Hero section
│ │ │ ├── Schedule.jsx # Train schedule
│ │ │ ├── Stations.jsx # Station cards
│ │ │ ├── TrainTypes.jsx # Train type info
│ │ │ ├── Gallery.jsx # Photo gallery
│ │ │ ├── Videos.jsx # Video section
│ │ │ └── Updates.jsx # Blog updates
│ │ └── ui/ # Reusable UI components
│ │ ├── ShareButton.jsx # Share functionality
│ │ ├── SEOHead.jsx # SEO meta tags
│ │ ├── RailwayTrack.jsx # Track animation
│ │ ├── TrainAnimation.jsx # Train movement
│ │ └── TrainVibes.jsx # Particle effects
│ ├── pages/ # Route pages
│ │ ├── Home.jsx # Homepage
│ │ ├── Schedules.jsx # Schedules page
│ │ ├── About.jsx # About page
│ │ ├── Blogs.jsx # Blog listing
│ │ ├── BlogDetails.jsx # Single blog
│ │ ├── TrainDetails.jsx # Train details
│ │ └── StationGallery.jsx # Station gallery
│ ├── data/ # Data files
│ │ ├── index.js # Data exports
│ │ ├── trainData.json # Train schedules
│ │ └── trainImages.json # Image paths
│ ├── lib/ # Utilities
│ │ └── utils.js # Helper functions
│ ├── App.jsx # Root component
│ ├── main.jsx # Entry point
│ └── index.css # Global styles
├── .gitignore
├── package.json
├── pnpm-lock.yaml
├── vite.config.js # Vite configuration
├── tailwind.config.js # Tailwind configuration
├── postcss.config.js # PostCSS configuration
├── eslint.config.js # ESLint configuration
└── README.md # This file
🔍 SEO & Performance
SEO Features
- ✅ Dynamic meta tags for each page
- ✅ Open Graph tags for social sharing
- ✅ Twitter Card tags
- ✅ XML sitemap with all pages
- ✅ Station-specific URLs with parameters
- ✅ Semantic HTML structure
- ✅ Proper heading hierarchy
- ✅ Alt text for all images
Performance Optimizations
- ⚡ Vite for fast builds and HMR
- ⚡ Code splitting with React.lazy
- ⚡ Image optimization
- ⚡ Tree-shaking for smaller bundles
- ⚡ CSS purging with Tailwind
- ⚡ Lazy loading for images
- ⚡ Efficient animations with Framer Motion
Lighthouse Scores
- 🟢 Performance: 90+
- 🟢 Accessibility: 95+
- 🟢 Best Practices: 100
- 🟢 SEO: 100
🤝 Contributing
Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
📄 License
Distributed under the MIT License. See LICENSE for more information.
📞 Contact
Trains of Rajbari Community
- Facebook Page: Trains of Rajbari
- Facebook Group: Join our Community
- YouTube: Watch Videos
Developer
- Tarikul Islam - Website
Project Link: https://github.com/faketi101/trainsofrajbari
🙏 Acknowledgments
- React - The library for web and native user interfaces
- Vite - Next generation frontend tooling
- Tailwind CSS - Rapidly build modern websites
- Framer Motion - Production-ready animation library
- Lucide Icons - Beautiful & consistent icon toolkit
- shadcn/ui - Re-usable components built with Radix UI and Tailwind
- Bangladesh Railway - For the inspiration and data
- Rajbari Railway Community - For the support and content
<div align="center">
Made with ❤️ for the Railway Community of Rajbari
⭐ Star this repo if you find it helpful!
</div>“"A Game-Changer for Railway Enthusiasts in Rajbari!" As a railway enthusiast, I've been searching for a reliable platform to check train schedules and connect with fellow train lovers in Rajbari. Trains of Rajbari has exceeded all my expectations! The website is beautifully designed with smooth animations and an intuitive interface. I especially love the station-specific schedule filtering and the ability to share train timings with my friends instantly. The animated railway tracks and moving train add such a delightful touch to the browsing experience. What impressed me most is how TARIKUL has built this platform with the community in mind. The emergency notification system, comprehensive station galleries, and real-time updates have made planning my daily commute so much easier. The SEO optimization means I can quickly find specific station schedules through Google, and the mobile experience is flawless. This isn't just a website—it's a complete community hub for everyone who loves trains in Rajbari district. The attention to detail, from the off-day highlighting to the train number displays, shows that TARIKUL truly understands what railway enthusiasts need. Highly recommended for anyone traveling through Rajbari, Pangsha, Kalukhali, or Pachuria stations!”
Ziaul Haque
Trains of Rajbari
Founder
Technologies
Links
Stats
Share
Get In Touch
Let's work together
Contact Information
Feel free to reach out to me for any project or collaboration. I'm always open to discussing new projects, creative ideas or opportunities to be part of your visions.