Alojamiento Alby

Alojamiento Alby is a website designed to showcase apartments, providing users with a comprehensive experience to explore and inquire about accommodations.

Features

1. Detailed Apartment Showcasing

• Technology: React
• Version: ^18.2.0
• Details: The website utilizes React to create a dynamic and interactive user interface. React's component-based architecture enables the seamless rendering of detailed apartment showcases with high-quality images.

2. Contact Forms for Inquiries

• Technology: React, EmailJS
• Versions:
• React: ^18.2.0
• EmailJS: ^3.11.0
• Details: React is employed to implement contact forms, allowing users to submit inquiries or requests for more information. EmailJS is integrated to handle the email sending functionality, streamlining the communication process with users.

3. Responsive and Visually Appealing Design

• Technology: React Bootstrap
• Version: ^2.9.1
• Details: The website leverages React Bootstrap to create responsive and visually appealing UI components. Bootstrap's grid system and components ensure a consistent design across various devices.

4. TypeScript

• Technology: TypeScript
• Version: ^5.0.2

5. Styled Components for Dynamic Styling

Technology: Styled Components Version: ^6.1.1 Details: Styled Components is used for dynamic styling within React components. The library allows developers to write CSS directly within their JavaScript or TypeScript files, promoting component-based styling.

6. Vite Imagetools for Image Resizing and Optimization

• Technology: Vite Imagetools
• Version: ^6.2.7
• Details: Vite Imagetools is crucial for image resizing and optimization. The plugin seamlessly integrates with Vite, providing an efficient way to handle image assets. Developers can resize, compress, and optimize images, enhancing the website's performance and user experience.

Installation

Node: v19.8.1

Install the dependencies and devDependencies

npm i

Build the project for production using TypeScript and Vite.

npm run build

Development Server

npm run dev

Preview the production build using Vite.

npm run preview

Dependencies

• @emailjs/browser: ^3.11.0
• @img/sharp-win32-x64: ^0.33.0
• react: ^18.2.0
• react-bootstrap: ^2.9.1
• react-dom: ^18.2.0
• react-hash-link: ^1.0.2
• react-intersection-observer: ^9.5.3
• react-router-dom: ^6.19.0
• react-router-hash-link: ^2.4.3
• sharp: ^0.33.0

Dev Dependencies:

• @types/react: ^18.2.15
• @types/react-dom: ^18.2.7
• @types/react-router-hash-link: ^2.4.9
• @typescript-eslint/eslint-plugin: ^6.0.0
• @typescript-eslint/parser: ^6.0.0
• @vitejs/plugin-react: ^4.0.3
• @vitest/coverage-v8: ^0.34.1
• eslint: ^8.45.0
• eslint-plugin-jsx-a11y: ^6.7.1
• eslint-plugin-react: ^7.33.0
• eslint-plugin-react-hooks: ^4.6.0
• eslint-plugin-react-refresh: ^0.4.3
• jest-environment-jsdom: ^29.6.2
• prettier: ^3.0.0
• styled-components: ^6.1.1
• typescript: ^5.0.2
• vite: ^4.4.5
• vite-imagetools: ^6.2.7