Skip to content

Building Single Page Application for my Railspk Project, based on Html, CSS and Javascript...

Notifications You must be signed in to change notification settings

callmesaif/Railspk_SPA_Official

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

The RAILSPK Hub - Digital Pakistan Railways Portal 🚆 The RAILSPK Hub is a premium Single Page Application (SPA) designed to document and showcase the Pakistan Railways network through high-definition vlogs, data-driven train scorecards, and a real-time community broadcast system.

Live Site: https://therails.pk/

🚀 Key Features

  1. Dynamic Video Integration

Automated Vlog Feed: Real-time integration with the YouTube Data API v3 to fetch the latest travel vlogs automatically.

Duration Filtering: Users can filter content based on vlog length (Long, Medium, Short).

In-App Theater Mode: Watch vlogs directly on the platform using a custom-built responsive modal player.

  1. Interactive Train Scorecards

Performance Metrics: Detailed ratings for Pakistan Railways' major trains based on punctuality, cleanliness, and service.

Live Class Fares: Integrated fare table for all classes (AC Business, AC Standard, Economy) sourced from official data.

Automated Slideshows: Visual journey previews with automatic image rotation for each train.

  1. Community & Real-time Broadcasts

Official Broadcast System: An admin-controlled news feed for railway updates and announcements.

Engagement Stats: Real-time view counts and interactive reactions (👍, ❤️, 🔥) for every post.

Direct Image Uploads: Optimized Base64 image processing for instant media sharing without external hosting.

Full-Screen Previews: Enhanced modal viewing for long-form broadcasts with original image aspect ratios.

  1. Passenger Feedback System

Real-time Reviews: Fully integrated with Google Firebase (Firestore) for permanent and live passenger feedback.

Official Admin Replies: Verified responses from the RAILSPK team to user queries and reviews.

Authentication Guards: Secure data handling using Firebase Anonymous Authentication to prevent unauthorized database access.

🛠 Tech Stack

Frontend: HTML5, Tailwind CSS (Modern UI/UX), Font Awesome Icons.

Logic: Vanilla JavaScript (SPA Routing, History API).

Backend/Database: Google Firebase (Firestore, Auth).

External APIs: YouTube Data API v3, Google Analytics, Google AdSense.

About

Building Single Page Application for my Railspk Project, based on Html, CSS and Javascript...

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published