HrRoadways

Report a Bug • Request a Feature

HrRoadways is a comprehensive project designed to provide users with an intuitive platform to check bus routes, timings, and real-time updates for government bus services.

🌐 Live Demo

🌟 Vision

Make public bus info simple, reliable, and accessible to everyone — across languages and devices. HrRoadways aims to reduce travel friction by surfacing accurate routes, schedules, and live updates in a lightweight, easy-to-use web app.

🎯 Mission

Provide an inclusive, multilingual platform that:

• Lets users quickly find bus routes, stops, and timings.

• Delivers real-time status and useful alerts.

• Enables community contributions for better local coverage.

• Keeps privacy, performance, and accessibility as first-class concerns.

  

Why HrRoadways?

HrRoadways solves everyday transit friction by making government bus information easy to find, understand, and use.

• Problem solved: consolidates routes, timings, and live updates into one lightweight web app so commuters don’t need multiple sources.
• Multilingual by design: supports 13 Indian languages to serve diverse users across regions.
• Lightweight & fast: built with React + Vite and optimized for low bandwidth and mobile devices.
• Reliable data focus: integrates authoritative route/schedule sources and simple JSON-backed datasets for quick iteration.
• Accessibility & inclusivity: semantic UI, keyboard navigation, and language-first UX reduce barriers for all users.
• Community-driven: contributors can add places, translations, and local corrections to improve coverage.
• Privacy-conscious: no unnecessary tracking; minimal data collection with clear retention practices.
• Production-ready: easy to deploy, monitor, and scale with standard tooling (CI, hosting, backups).

Project Flowchart

⚙️ Tech Stack

Technology	Purpose
React + Vite	Frontend framework & build tooling
React Router	Client-side routing
i18next	Internationalization
Tailwind CSS	Utility-first styling
Framer Motion	Smooth, production-ready animations

Our Events -

📢 Weekly Shoutouts 🎉

Profile	Name	Profile	Name	Profile	Name	Profile	Name
	Keshav1605		Soumyosish		anjaliitgit		Aripilli-Bhavana

🌏 National Language Support

HrRoadways supports 13 Indian languages to serve users across India 🇮🇳

Language	Code	Native Name
English	en	English
Hindi	hi	हिन्दी
Bengali	bn	বাংলা
Telugu	te	తెలుగు
Marathi	mr	मराठी
Tamil	ta	தமிழ்
Gujarati	gu	ગુજરાતી
Kannada	kn	ಕನ್ನಡ
Malayalam	ml	മലയാളം
Punjabi	pa	ਪੰਜਾਬੀ
Oriya	or	ଓଡ଼ିଆ
Assamese	as	অসমীয়া
Urdu	ur	اردو

📝 Language Features

Feature	Description
🔤 Unicode Support	Handles multilingual text seamlessly
🌐 Localization	Supports 13 Indian languages for wider reach
🗂️ Language Files	Each language stored in separate JSON for scalability
⚡ Fast Switching	Toggle between languages instantly
🛠️ Easy Maintenance	Simple structure for adding new languages

⚡ For Developers

Internationalization (i18n)

The project uses react-i18next for translations. Files are in src/i18n/locales/.
To add new translations:

1. Update the appropriate file in src/i18n/locales/
2. Use the useTranslation hook: const { t } = useTranslation();
3. Reference translations with: {t('key.subkey')}

File Structure

HrRoadways/
├── Databases/
│   └── State_Database/
├── src/
│   ├── components/
│   └── assets/

• Json Database hosting link - https://jsonblob.com/api/jsonBlob/1333092652136194048

  

Getting Started

1. Clone the repository:

   git clone https://github.com/NishantRana07/HrRoadways.git

2. Navigate to the project directory and install dependencies:

  npm install

3. Run the development server to access the site locally:

  npm run dev

Popular Places Repository

A centralized repository to store and manage information about popular places across various locations.

Format for Adding Popular Places

To add popular places to the repository, follow the format specified below:

File Structure

Places/
├── Location/
│   └── Location.json

JSON Format

{
  "location": "City or Region Name",
  "places": [
    {
      "name": "Place Name",
      "category": "Category (e.g., Historical, Restaurant, Park, etc.)",
      "description": "A brief description of the place.",
      "latitude": "Latitude Coordinate",
      "longitude": "Longitude Coordinate"
    }
  ]
}

Example

Here is an example of how to add a location:

File: Places/NewYork/NewYork.json

{
  "location": "New York",
  "places": [
    {
      "name": "Central Park",
      "category": "Park",
      "description": "A large public park in New York City, featuring lakes, gardens, and walking trails.",
      "latitude": "40.785091",
      "longitude": "-73.968285"
    },
    {
      "name": "Statue of Liberty",
      "category": "Historical",
      "description": "An iconic symbol of freedom and democracy located on Liberty Island.",
      "latitude": "40.689247",
      "longitude": "-74.044502"
    }
  ]
}

<h1 align="center">Contributing & Translation Guidelines</h1>
<h4 align="center">
  Guidelines for contributing to the repository, ensuring Hindi translations, and keeping the codebase updated.
</h4>

## Contributing

If you are adding content to the site or creating new pages, please:

- Apply logic for Hindi translation and add translations for all words.
- Use PNG or JPG files for minimal size and always compress images.
- Ensure that your forked repository is up to date before submitting a pull request.

### Steps for Contributing

#### 1. Fork the Repository:
Click on the **Fork** button at the top right of the repository page.

#### 2. Clone the Forked Repository:
```bash
git clone https://github.com/your-username/HrRoadways.git

3. Create a New Branch:

git checkout -b your-branch-name

4. Make Your Changes:

• Apply the Hindi translation logic.
• Compress images before uploading.

5. Commit Your Changes:

git add .
git commit -m "Describe your changes"

6. Push to the Branch:

git push origin your-branch-name

7. Create a Pull Request:

Go to the original repository and click New Pull Request.

Keeping Your Fork Updated

Before making a pull request, ensure that your forked repository is up to date.

Add Remote Upstream:

git remote add upstream https://github.com/NishantRana07/HrRoadways.git

Fetch Upstream Changes:

git fetch upstream

Merge Changes into Main:

git checkout main
git merge upstream/main

Push Changes to Your Fork:

git push origin main

By following these steps, your pull request will be based on the latest code.

Translation Documentation

Overview

The HrRoadways project supports bilingual functionality (English & Hindi). This is achieved through translation logic built into components.

Implementation

Translation Data Structure:

Each component maintains translations for both languages:

const translations = {
  en: { heading: "Your English Heading" },
  hi: { heading: "आपका हिंदी शीर्षक" },
};

State Management:

A state variable (isHindi) toggles between languages.

const [isHindi, setIsHindi] = useState(false);
const currentLanguage = isHindi ? translations.hi : translations.en;

Toggle Function:

const handleToggleLanguage = () => setIsHindi(!isHindi);

Adding Translations to New Components

1. Define Translations:

   const translations = {
     en: { description: "Your English Description" },
     hi: { description: "आपका हिंदी विवरण" },
   };

2. Use the Translations:

   <p>{currentLanguage.description}</p>

---

Example: Hero.jsx

const translations = {
  en: {
    heading: "Haryana Roadways - Your Own Bus Service",
    button: "Search Buses",
  },
  hi: {
    heading: "हरियाणा रोडवेज - आपकी अपनी बस सेवा",
    button: "बसें खोजें",
  },
};

const currentLanguage = isHindi ? translations.hi : translations.en;

return (
  <div>
    <h1>{currentLanguage.heading}</h1>
    <button>{currentLanguage.button}</button>
  </div>
);

Screenshots

🐞 Troubleshooting

App won't start (dev)

• Check Node version (use Node 16+).

• Run npm install in repo root (or frontend folder if separated).

• Ensure dev server port not in use. Kill conflicting process or change port.

• Missing translations or UI shows keys

• Confirm locale JSON files exist under src/i18n/locales/.

• Restart dev server after adding new keys.

• Use useTranslation() properly and call t('namespace.key').

• Data not loading (API/DB)

• Verify the JSON/DB endpoint is reachable (check CORS).

• If using a hosted JSON blob, ensure the URL is correct and public.

• Inspect browser console / network tab for 4xx/5xx responses.

• Images fail to upload or display

• Confirm storage URL/CORS settings.

• Check file size limits and client-side compression.

• Language switch not persisting

• Make sure selected language is saved to localStorage or user profile.

• Ensure state is read on app init before rendering locale-dependent components.

• Build/Production issues

• Verify environment variables for production (API base URL, any keys).

• Run a local production build (npm run build) and serve the dist to reproduce.

Best Practices

• Always apply translation logic for new content/pages.

• Use PNG/JPG files and compress images before uploading.

• Keep your fork updated before submitting PRs.