Apartment API

Frontend with Vue 3 (Option API) and Tailwind CSS

DEPLOY:
https://apartment-api-vue.vercel.app

Index

1. Project Title and Deployment link

2. Features

3. Technologies and Tools used

4. Project Setup

5. Lighthouse results

6. Project status

7. Contribution

8. Project developer

Features

✔️ Responsive navbar with a toggle for a "hamburger" menu in mobile sizes.

✔️ Language Selector visual component (ES / EN).

✔️ Dynamically obtained "List" of apartments from the provided API.

✔️ "Card" component displaying detailed information for each apartment. It includes:
  - Image carousel with arrows for navigation.
  - Description of the apartment and neighborhood.
  - Maximum guest capacity.
  - Province of location.
  - Availability indicators for services (wifi, A/C, and/or heating).
  - Number of bedrooms and bathrooms.
  - Square meters.
  - Monthly price.
  - Button to check availability.

✔️ Pagination structured in 3 items.

✔️ Responsive design.

Technologies and Tools used

Project Setup

This template should help get you started developing with Vue 3 in Vite.

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build

Lint with ESLint

npm run lint

Lighthouse results

Project status

Contribution

If you want to contribute to this project, follow these steps:

1. Perform a fork to the repository.

2. Create a branch for your feature or bugfix: git checkout -b feature/your-feature-name

3. Make the necessary changes and commits: git commit -m 'Add some feature'

4. Push to branch: git push origin feature/your-feature-name

5. Send a pull request to the original repository.

Project developer

Kevin Schans