yousefomar724 / wsam-elnagah

A travel website built with React (Next.js), Server-side-rendering, and Advanced CSS. The goal was to display all different travel destinations with high quality images and slides, with competence prices and data about every travel program like number of people trip duration ...etc.

Home Page:https://www.elnagahtravels.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Elnagah Travels


Elnagah Traverls is website concern with travel created with React (Next.js), CSS modules, Framer-motion and swiper.

Table Of Contents

General info


My client's goal was to have a website for his business that is based on travel, so he asked me to make a website that is similar to another website that already made.

I did the analysis, and began to write some layouts that are similar in various pages and sections, then built the home page as chunks or components and started building different sliders as there are a lot of them 😅, and animations that appear in various places on the page.

After completing the UI, I started to integrate with the API and started to fetch data server-side with Next.js and display it.

In the end, I checked the lighthouse score to optimize to the maximum, connect with Google Tag Manager, Google Analytics, and Google Search Console, and optimize SEO and performance.

Then put it all together and go to production, and ask if there are any modifications.

Technologies


Project is created with:

  • React: 18.2.0
  • Next: 12.2.3
  • Framer-motion: ^6.5.1
  • Swiper: ^8.3.1
  • Es-lint: 8.20.0

Setup


To run this project, install it locally using yarn:

git clone https://github.com/yousefomar724/wsam-elnagah.git
cd ../wsam-elnagah
yarn
yarn dev

Open http://localhost:3000 with your browser to see the result.

About

A travel website built with React (Next.js), Server-side-rendering, and Advanced CSS. The goal was to display all different travel destinations with high quality images and slides, with competence prices and data about every travel program like number of people trip duration ...etc.

https://www.elnagahtravels.com/


Languages

Language:JavaScript 63.4%Language:CSS 36.6%