HrRoadways

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

---

⚙️ 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>
);

---

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.

---

🔼 Back to Top