https://github.com/hadymohamed22/rahletak-website

An Arabic travel website that helps users explore the top tourist destinations in Egypt with detailed descriptions, ratings, and images for each location.
https://github.com/hadymohamed22/rahletak-website

css fetch frontend html nextjs nextjs14 react reactjs scss tailwindcss tourism tourist travel-website

Last synced: 3 months ago
JSON representation

An Arabic travel website that helps users explore the top tourist destinations in Egypt with detailed descriptions, ratings, and images for each location.

• Host: GitHub
• URL: https://github.com/hadymohamed22/rahletak-website
• Owner: Hadymohamed22
• Created: 2025-07-13T13:09:23.000Z (3 months ago)
• Default Branch: master
• Last Pushed: 2025-07-13T15:07:18.000Z (3 months ago)
• Last Synced: 2025-07-13T15:29:37.802Z (3 months ago)
• Topics: css, fetch, frontend, html, nextjs, nextjs14, react, reactjs, scss, tailwindcss, tourism, tourist, travel-website
• Language: JavaScript
• Homepage: https://rahletak-website.vercel.app
• Size: 4.96 MB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Rahletak 🧭

Hey everyone! This is a travel website I built in Arabic called **"رحلتك"** (Rahletak). I created it to help users explore Egypt's most popular tourist destinations in a simple and engaging way.

This project was a great opportunity to improve my Next.js skills — especially working with dynamic routing, ISR, JSON data fetching, and building responsive UIs with Tailwind CSS.

---

## Project Features 🚀 :

- Fully responsive travel homepage

- Sections like Hero, About Us, Why Choose Us, Testimonials, and more

- Destination cards with details and images

- Dynamic routing for each destination page using `slug`

- NotFound page for invalid URLs

- Smooth scroll and clean navigation

- Arabic language support (RTL layout)

- Optimized for performance using Next.js App Router & ISR

- Static metadata for SEO

- Carousel for testimonials and featured destinations using Swiper.js

---

## Tools I Used 🛠️ :

- **Next.js 14** (App Router)

- **Tailwind CSS**

- **Swiper.js** (for carousels)

- **React Icons**

- **Google Fonts (Cairo)**

- **JSON Data** (static for destinations)

---

## Data Handling 🧠:

- Destinations are loaded from a local JSON file (`/public/data/important-places.json`)

- Used ISR (Incremental Static Regeneration) to keep data fresh every 60 seconds

- Dynamic routing for each place using `slug` field

- Custom `notFound()` page used for invalid slugs

---

## LIVE DEMO :

👉 **[Preview Website](https://rahletak-website.vercel.app/)**

---

## To Run Website

- download repo as zip file

- open termnal in repo folder

- run `npm run dev`

## Author 👨‍💻:

Made with ❤️ by **[Hady Mohamed]**

---