alxmcr / old-apartify-app-ts-vite

Apartify: Find the apartment of your dreams.

Apartify App

Find the apartment of your dreams.

Features

• Find an apartment.
• List of all apartments.
• Information about the apartments.
• Geolocation an apartment with Maps.

Lessons Learned

I learned and practice more about HTML, CSS, JS, TypeScript, React.js, and React Hooks.

Run Locally

Clone the project

  git clone https://github.com/alxmcr/apartify-app-ts-vite

Go to the project directory

  cd apartify-app-ts-vite

Install dependencies

  npm install

Start the server

  npm run start

Environment Variables

To run this project, you will need to add the following environment variables to your .env file

ENV Variable	Description	Possible values
VITE_APP_MODE_DISPLAY_MAPBOX	If you want to see the Mapbox's map, you can set this enviroment variable: PRODUCTION or if you can't see this map because you don't want to reach your Mapbox limit in free version. You can set DEVELOPMENT.	PRODUCTION / DEVELOPMENT
VITE_APP_ACCESS_TOKEN_MAPBOX	You should put as value the API KEY that you got from Mapbox's API. Visit Mapbox Access Tokens	<mapbox_token>
VITE_APP_ACCESS_STYLE_MAP_MAPBOX	Visit Mapbox styles.	mapbox://styles/mapbox/streets-v12 or mapbox://styles/mapbox/outdoors-v11
VITE_APP_API_BASE_URL	Base URL to your REST API.	http://127.0.0.1:8000
VITE_APP_API_VERSION	API REST version	v1, v2, and so on.

Vite config

Also we need to add them in global.d.ts:

interface ImportMetaEnv {
    VITE_APP_ACCESS_TOKEN_MAPBOX: string
    VITE_APP_ACCESS_STYLE_MAP_MAPBOX: string
    VITE_APP_API_VERSION: string
    VITE_APP_API_BASE_URL: string
    VITE_APP_MODE_DISPLAY_MAPBOX: string
}

Tech Stack

HTML, CSS, JavaScript, TypeScript, and React.js.

Screenshots

Demo

https://apartify-app.netlify.app/

Authors

• Alejandro M. Coca Rojas (@alxmcr)

Feedback

If you have any feedback, please reach out to me at [e-mail].