{"id":29245808,"url":"https://github.com/arnobt78/backroads--react-landing-page","last_synced_at":"2025-07-17T08:34:34.285Z","repository":{"id":276516602,"uuid":"929510214","full_name":"arnobt78/Backroads--React-Landing-Page","owner":"arnobt78","description":"The Backroads App is a travel and tour booking landing page application built with React. It provides users with an intuitive interface to explore and book various travel packages.","archived":false,"fork":false,"pushed_at":"2025-06-29T23:48:19.000Z","size":852,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-03T22:43:19.015Z","etag":null,"topics":["booking-app","html-css-javascript","javascript-applications","landing-page","netlify-deployment","react","react-components","reactjs","tourism-website"],"latest_commit_sha":null,"homepage":"https://backroads-arnob.netlify.app/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/arnobt78.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-08T18:00:25.000Z","updated_at":"2025-06-29T23:48:23.000Z","dependencies_parsed_at":"2025-02-08T19:21:47.479Z","dependency_job_id":null,"html_url":"https://github.com/arnobt78/Backroads--React-Landing-Page","commit_stats":null,"previous_names":["arnobt78/backroads-react-landing-page"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/arnobt78/Backroads--React-Landing-Page","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FBackroads--React-Landing-Page","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FBackroads--React-Landing-Page/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FBackroads--React-Landing-Page/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FBackroads--React-Landing-Page/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arnobt78","download_url":"https://codeload.github.com/arnobt78/Backroads--React-Landing-Page/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FBackroads--React-Landing-Page/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265585415,"owners_count":23792735,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["booking-app","html-css-javascript","javascript-applications","landing-page","netlify-deployment","react","react-components","reactjs","tourism-website"],"created_at":"2025-07-03T22:38:17.617Z","updated_at":"2025-07-17T08:34:34.254Z","avatar_url":"https://github.com/arnobt78.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Backroads Landing Page - React Templet\n\n\u003cimg width=\"1150\" alt=\"Screenshot 2025-02-08 at 23 51 28\" src=\"https://github.com/user-attachments/assets/d1aaa78e-e93c-4708-bf61-26b57b276686\" /\u003e \u003cimg width=\"1150\" alt=\"Screenshot 2025-02-08 at 23 51 48\" src=\"https://github.com/user-attachments/assets/bb6af9af-7deb-479f-9e7a-1df1a6a985e2\" /\u003e \u003cimg width=\"1150\" alt=\"Screenshot 2025-02-08 at 23 52 02\" src=\"https://github.com/user-attachments/assets/a0edbced-62da-4570-b90c-3eb842878012\" /\u003e \u003cimg width=\"1150\" alt=\"Screenshot 2025-02-08 at 23 52 19\" src=\"https://github.com/user-attachments/assets/94b117d1-cf8b-4c80-b33d-05b9d74f725a\" /\u003e \u003cimg width=\"1150\" alt=\"Screenshot 2025-02-08 at 23 52 34\" src=\"https://github.com/user-attachments/assets/0a21250d-ee71-49bf-98ad-5e7dd63a256c\" /\u003e\n\n---\n\n## Project Summary\n\nBackroads App is a modern, responsive travel and tour booking landing page application built with React. Designed as both a learning resource and a practical project, it provides users with an engaging interface to discover, explore, and book a variety of travel packages. The repository includes two versions:\n\n- **backroads-js-version**: A static site using HTML, CSS, and JavaScript.\n- **backroads-react-version**: A dynamic single-page React application.\n\n- **Live-Demo:** [https://backroads-arnob.netlify.app/](https://backroads-arnob.netlify.app/)\n\n---\n\n## Table of Contents\n\n1. [Project Overview](#project-overview)\n2. [Features](#features)\n3. [Screenshots](#screenshots)\n4. [Project Structure](#project-structure)\n5. [Technology Stack](#technology-stack)\n6. [Setup \u0026 Installation](#setup--installation)\n7. [Walkthrough \u0026 Functionality](#walkthrough--functionality)\n8. [Component Breakdown](#component-breakdown)\n9. [API \u0026 Data](#api--data)\n10. [Deployment \u0026 Continuous Integration](#deployment--continuous-integration)\n11. [Learning Outcomes \u0026 Keywords](#learning-outcomes--keywords)\n12. [Examples \u0026 Code Snippets](#examples--code-snippets)\n13. [Conclusion](#conclusion)\n\n---\n\n## Project Overview\n\nBackroads App serves as a beginner-to-intermediate React project that simulates a real-world business landing page. Its main goal is to teach best practices in React, component structure, props, state, and modular CSS. The app is ideal for anyone learning React, looking to upskill with a practical project, or needing a template for a travel/tourism business.\n\n---\n\n## Features\n\n- Browse and book travel packages\n- Responsive design (mobile, tablet, desktop)\n- Modular React component structure\n- User authentication \u0026 profile management (future extension)\n- Integration point for booking/payment APIs (mocked)\n- Smooth scrolling and interactive UI\n- Social media integration\n- Deployed with Netlify for live preview\n\n---\n\n## Project Structure\n\n```\nBackroads--React-Landing-Page/\n│\n├── README.md\n├── package.json\n├── package-lock.json\n├── public/\n│   ├── index.html\n│   ├── favicon.ico\n│   ├── logo192.png\n│   ├── logo512.png\n│   ├── manifest.json\n│   └── robots.txt\n├── src/\n│   ├── App.js\n│   ├── index.js\n│   ├── index.css\n│   ├── data.js\n│   └── components/\n│       ├── Navbar.js\n│       ├── Hero.js\n│       ├── About.js\n│       ├── Services.js\n│       ├── Service.js\n│       ├── Tours.js\n│       ├── Tour.js\n│       ├── Footer.js\n│       ├── Title.js\n│       ├── PageLinks.js\n│       └── SocialLink.js\n└── backroads-html/\n    ├── index.html\n    └── js/\n        └── app.js\n```\n\n---\n\n## Technology Stack\n\n- **ReactJS** (Functional Components, Hooks)\n- **HTML5, CSS3** (Modular, Responsive Design)\n- **JavaScript (ES6+)**\n- **FontAwesome** (for icons)\n- **Netlify** (Deployment)\n- **Create React App** (Scaffolding)\n- **Optional Learning:** Vanilla JS version in `/backroads-html`\n\n---\n\n## Setup \u0026 Installation\n\n### React Version\n\n1. **Clone the repository:**\n   ```sh\n   git clone https://github.com/arnobt78/Backroads--React-Landing-Page.git\n   cd Backroads--React-Landing-Page\n   ```\n\n2. **Install dependencies:**\n   ```sh\n   npm install\n   ```\n\n3. **Start the development server:**\n   ```sh\n   npm start\n   ```\n   The app will run at [http://localhost:3000](http://localhost:3000).\n\n---\n\n### Vanilla JS Version\n\n1. Navigate to the `backroads-html` folder.\n2. Open the `index.html` file in your browser:\n   ```sh\n   open index.html\n   ```\n   or just double-click the file.\n\n---\n\n## Walkthrough \u0026 Functionality\n\nThe app is organized into clear React components that represent different sections of the landing page:\n\n- **Navbar**: Sticky navigation with smooth scroll links.\n- **Hero**: Eye-catching introduction with a call to action.\n- **About**: Information about the company/brand.\n- **Services**: List of travel-related services using icons and text.\n- **Tours**: Dynamic display of travel packages with images, price, location, and duration.\n- **Footer**: Social media links and copyright.\n\nEach component is designed for reusability and clarity. Data for the tours, services, and links is stored in `src/data.js`, making it easy to update or extend the site.\n\n---\n\n## Component Breakdown\n\n### `App.js`\nThe root component, imports and renders all major page sections:\n```javascript\nimport About from './components/About';\nimport Footer from './components/Footer';\nimport Hero from './components/Hero';\nimport Navbar from './components/Navbar';\nimport Services from './components/Services';\nimport Tours from './components/Tours';\n\nfunction App() {\n  return (\n    \u003c\u003e\n      \u003cNavbar /\u003e\n      \u003cHero /\u003e\n      \u003cAbout /\u003e\n      \u003cServices /\u003e\n      \u003cTours /\u003e\n      \u003cFooter /\u003e\n    \u003c/\u003e\n  );\n}\nexport default App;\n```\n---\n\n### `Hero.js`\n```javascript\nconst Hero = () =\u003e (\n  \u003csection className='hero' id='home'\u003e\n    \u003cdiv className='hero-banner'\u003e\n      \u003ch1\u003ebackroads app\u003c/h1\u003e\n      \u003cp\u003eLorem ipsum dolor sit amet consectetur adipisicing elit. Vitae explicabo debitis est autem dicta.\u003c/p\u003e\n      \u003ca href='#tours' className='btn hero-btn'\u003eexplore tours\u003c/a\u003e\n    \u003c/div\u003e\n  \u003c/section\u003e\n);\nexport default Hero;\n```\n---\n\n### `About.js`\nDisplays company info and an image.\n```javascript\nconst About = () =\u003e (\n  \u003csection className='section' id='about'\u003e\n    \u003cTitle title='about' subTitle='us' /\u003e\n    \u003cdiv className='section-center about-center'\u003e\n      \u003cdiv className='about-img'\u003e\n        \u003cimg src={aboutImg} className='about-photo' alt='awesome beach' /\u003e\n      \u003c/div\u003e\n      \u003carticle className='about-info'\u003e\n        \u003ch3\u003eexplore the difference\u003c/h3\u003e\n        \u003cp\u003e...\u003c/p\u003e\n        \u003ca href='#' className='btn'\u003eread more\u003c/a\u003e\n      \u003c/article\u003e\n    \u003c/div\u003e\n  \u003c/section\u003e\n);\nexport default About;\n```\n---\n\n### `Services.js` \u0026 `Service.js`\nRenders a grid of services using icon, title, description.\n\n`Services.js`:\n```javascript\nimport { services } from '../data';\nimport Service from './Service';\nconst Services = () =\u003e (\n  \u003csection className='section services' id='services'\u003e\n    \u003cTitle title='our' subTitle='services' /\u003e\n    \u003cdiv className='section-center services-center'\u003e\n      {services.map(service =\u003e \u003cService {...service} key={service.id} /\u003e)}\n    \u003c/div\u003e\n  \u003c/section\u003e\n);\nexport default Services;\n```\n\n`Service.js`:\n```javascript\nconst Service = ({ icon, title, text }) =\u003e (\n  \u003carticle className='service'\u003e\n    \u003cspan className='service-icon'\u003e\u003ci className={icon}\u003e\u003c/i\u003e\u003c/span\u003e\n    \u003cdiv className='service-info'\u003e\n      \u003ch4 className='service-title'\u003e{title}\u003c/h4\u003e\n      \u003cp className='service-text'\u003e{text}\u003c/p\u003e\n    \u003c/div\u003e\n  \u003c/article\u003e\n);\n```\n---\n\n### `Tours.js` \u0026 `Tour.js`\nDisplays featured tour cards from the `tours` array in `data.js`.\n\n`Tours.js`:\n```javascript\nimport { tours } from '../data';\nimport Tour from './Tour';\nconst Tours = () =\u003e (\n  \u003csection className='section' id='tours'\u003e\n    \u003cTitle title='featured' subTitle='tours' /\u003e\n    \u003cdiv className='section-center featured-center'\u003e\n      {tours.map(tour =\u003e \u003cTour {...tour} key={tour.id} /\u003e)}\n    \u003c/div\u003e\n  \u003c/section\u003e\n);\nexport default Tours;\n```\n\n`Tour.js`:\n```javascript\nconst Tour = ({ image, date, title, info, location, duration, cost }) =\u003e (\n  \u003carticle className='tour-card'\u003e\n    \u003cdiv className='tour-img-container'\u003e\n      \u003cimg src={image} className='tour-img' alt={title} /\u003e\n      \u003cp className='tour-date'\u003e{date}\u003c/p\u003e\n    \u003c/div\u003e\n    \u003cdiv className='tour-info'\u003e\n      \u003cdiv className='tour-title'\u003e\u003ch4\u003e{title}\u003c/h4\u003e\u003c/div\u003e\n      \u003cp\u003e{info}\u003c/p\u003e\n      \u003cdiv className='tour-footer'\u003e\n        \u003cp\u003e\u003cspan\u003e\u003ci className='fas fa-map'\u003e\u003c/i\u003e\u003c/span\u003e{location}\u003c/p\u003e\n        \u003cp\u003efrom ${cost}\u003c/p\u003e\n        \u003cp\u003e{duration} days\u003c/p\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/article\u003e\n);\n```\n---\n\n### `Footer.js`\nLinks to pages and social media, displays copyright.\n---\n\n### `data.js`\nCentralized data for navigation, services, tours, and social links.\n\n```javascript\nexport const pageLinks = [ ... ];\nexport const socialLinks = [ ... ];\nexport const services = [ ... ];\nexport const tours = [ ... ];\n```\n---\n\n## API \u0026 Data\n\n- No backend API by default; all data is locally mock-defined in `src/data.js`.\n- Easily extendible to connect with real booking/payment APIs.\n\n---\n\n## Deployment \u0026 Continuous Integration\n\n- **Deploy to Netlify:** Connect your GitHub repo and follow Netlify’s workflow.\n- **Git Commands:**\n  - Remove existing git repo (if needed): `rm -rf .git`\n  - Initialize repo: `git init`\n  - Add files: `git add .`\n  - Commit: `git commit -m \"first commit\"`\n  - Add remote: `git remote add origin \u003cYOUR_REPO_URL\u003e`\n  - Push: `git push -u origin main`\n- **Note:** Netlify treats warnings as errors. Fix all build warnings for a successful deployment.\n\n---\n\n## Learning Outcomes \u0026 Keywords\n\n- **React Components** (functional)\n- **Props \u0026 State** (data-driven UI)\n- **CSS Grid/Flexbox** (responsive design)\n- **Component Reusability**\n- **Single Page Application (SPA)**\n- **FontAwesome Icons**\n- **Deployment (Netlify)**\n- **HTML/CSS/JS Fundamentals**\n- **Project Structure \u0026 Clean Code**\n\n---\n\n## Examples \u0026 Code Snippets\n\n**Service Card Example:**\n```javascript\n\u003cService icon=\"fas fa-wallet fa-fw\" title=\"saving money\" text=\"Save more on every tour!\" /\u003e\n```\n\n**Tour Card Example:**\n```javascript\n\u003cTour\n  image={tour1}\n  date=\"august 26th, 2025\"\n  title=\"Tibet Adventure\"\n  info=\"Experience the beauty of Tibet with us!\"\n  location=\"china\"\n  duration={6}\n  cost={2100}\n/\u003e\n```\n\n**Navigation Links from `data.js`:**\n```javascript\nexport const pageLinks = [\n  { id: 1, href: '#home', text: 'home' },\n  { id: 2, href: '#about', text: 'about' },\n  { id: 3, href: '#services', text: 'services' },\n  { id: 4, href: '#tours', text: 'tours' },\n];\n```\n\n---\n\n## Conclusion\n\nBackroads App is a practical, visually appealing React project that demonstrates best practices in front-end development. Use it as a template, a learning resource, or a starting point for your travel/tourism web projects. The modular structure, clean code, and easy customization make it suitable for beginners and intermediate learners alike. Contributions and suggestions are welcome!\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnobt78%2Fbackroads--react-landing-page","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farnobt78%2Fbackroads--react-landing-page","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnobt78%2Fbackroads--react-landing-page/lists"}