SAFAR

Overview

SAFAR is a static travel site for discovering destinations in India and browsing hotels, restaurants and packages. It was my CS50x final project and was nominated for Smart India Hackathon 2023. A companion app, SafarMap, handles live nearby places.

What I built

• Landing page with a hero search and sections for destinations and attraction categories such as adventure, pilgrimage and wildlife.
• Separate style.css and mobile.css for desktop and mobile layouts.
• ScrollReveal animations in script.js for the header, showcase and search sections.
• Hosted on Vercel, with a recorded video demo for CS50x.

Architecture

A static frontend; the live map features live in a separate app.

flowchart LR
  subgraph client["Browser"]
    html["index.html"]
    css["style.css and mobile.css"]
    js["script.js ScrollReveal"]
  end
  subgraph ext["Related"]
    map["SafarMap app"]
  end
  html --> css
  html --> js
  html -->|"nearby places"| map

System design

How a visitor moves through the site.

sequenceDiagram
  participant U as Visitor
  participant S as SAFAR page
  participant M as SafarMap
  U->>S: open landing page
  S-->>U: hero with reveal animations
  U->>S: browse destinations and categories
  opt wants nearby hotels or food
    U->>M: open map
  end

Learnings

• Scoping a hackathon idea down to a static site taught me to ship the core flow first.
• Bookings are only presented in the UI; a real version needs a backend and payments.