Natours

Exciting tours for adventurous people.
Live preview: https://natours-igor.netlify.app

Description

Natours is an awesome tour booking website and is a great choice for any traveler.

Technology stack

This project was built using [Node v16.x] and uses the following technologies:

• NPM - for dependency management.
• SASS - for keeping things organized.
• JavaScript - to create dynamic and interactive web content.
• ParcelJS - for bundling, transpilation, development, etc.
• ImageKit.io - Global Image CDN, to speed up image delivery to the user.

Installation

1. Install Node from https://nodejs.org/en/.
2. Clone the repository.

$ git clone https://github.com/anonsas/natours.git

3. Navigate to the project's root directory.
4. Install all the dependencies listed in package.json.

npm install

5. Parcel will run a local development server.

npm run dev

Rankings

• Performance: 91%.
• Accessibility: 97%.
• Best Practices: 100%.
• Seo: 92%.

Tools for ranking:

1. Lighthouse - automated tool for improving the quality of web pages.

2. PageSpeed Insights - reports on the performance of a page on both mobile and desktop devices, and provides suggestions on how that page may be improved.

Credits and changes

I followed a course from udemy.com Advanced CSS and Sass: Flexbox, Grid, Animations and More! By Jonas Schmedtmann.

Changes I personally made:

1. Used a more popular folder structure and naming convention in SASS.
2. Used NPM package: sass, and not node-sass, because soon it will be deprecated.
3. Used Image CDN, for transformation, optimization, and delivery of images.
4. Used ParcelJS, for performance, optimization, bundling, etc.
5. Added meta tags, for better SEO.
6. Changed some styles, for responsiveness.
7. Added functionality with JavaScript:
   • fully working navigation.
   • closing popup, by clicking outside of the popup.