:tada: Nextjs, TailwindCSS travel application

Hello everyone, this application depicts a simple UI presenting information related to tourism and travel in Pakistan :earth_asia:. The app itself is deployed on vercel on the following link:

:link: https://travel-app-nu.vercel.app

🔥 Features

• :point_right: Map integrated using leafletjs with custom markers
• :crystal_ball: Material-ui and framer-motion used for animations as well as ui-components
• :iphone: Fully responsive application

:camera: Screenshots

Landing page

Modal

Map

:key: Dependencies

"dependencies":{
  "@emotion/cache": "latest",
    "@emotion/react": "latest",
    "@emotion/server": "latest",
    "@emotion/styled": "latest",
    "@mui/icons-material": "latest",
    "@mui/material": "latest",
    "leaflet": "^1.8.0",
    "leaflet-defaulticon-compatibility": "^0.1.1",
    "next": "12.1.6",
    "react": "18.1.0",
    "react-dom": "18.1.0",
    "react-intersection-observer": "^9.1.0",
    "react-leaflet": "^4.0.0"

  },

:construction_worker: Dev dependencies

  "devDependencies": {
    "@types/leaflet": "^1.7.10",
    "@types/node": "17.0.33",
    "@types/react": "18.0.9",
    "@types/react-dom": "18.0.4",
    "autoprefixer": "^10.4.7",
    "eslint": "8.15.0",
    "eslint-config-next": "12.1.6",
    "postcss": "^8.4.13",
    "tailwindcss": "^3.0.24",
    "typescript": "4.6.4"

🏗️ How to Set up Travel App for Development

1. Clone the repository

git clone https://github.com/hunter10471/nextjs_travel_app.git

2. Change the working directory

cd nextjs_travel_app

3. Install dependencies

npm install # or, yarn install

4. Run the app

npm run dev # or, yarn dev

That's All!!! Now open localhost:3000 to see the app.

🍔 Built With

• Next JS: The coolest React-based framework on the planet
• TailwindCss A utility-first CSS framework packed with classes
• Vercel: Best for Hosting a Next.js app

🛡️ License

This project is licensed under the MIT License - see the LICENSE file for details.