Merge branch 'master' of https://github.com/JorgeAbrahan/inmobiliaria…

…_zuniga

README.md

@@ -1,8 +1,191 @@
-Sitio web responsive elaborada para Inmobiliaria Zuniga que cuenta con las siguientes paginas: inicio, contactanos, propiedades, proyectos, blogs, politicas y un cotizador.
-Implemente cookies propias para mejorar la experiencia de navegacion del usuario, asi como tambien cookies de terceros en herramientas de analitica para recopilar datos que permiten enfocar mejor la publicidad.
-Tambien implementamos con el area de marketing una suscripcion de correo para recibir actualizaciones sobre las recientes adquisiciones de la inmobiliaria.
-Cabe aclarar que las propiedades, los proyectos, las encuestas y los blogs se cargan de una base de datos, para la cual utilice firebase storage.
-Para subir los datos se utiliza otra pagina web que implementa firebase authentication para validar que el usuario que intenta ingresar sea uno con acceso para editar el contenido de la pagina.
-La pagina de cotizador permite saber cuales son los proyectos que mejor se adecuan a las preferencias y al salario del cliente y aunque muestra algunos de los proyectos en dolares se provee tambien el factor de conversion a lempiras aproximados obtenidos de una API, los blogs son articulos breves que muestran sugerencias y tips interesantes para que el lector adquiera mas conocimiento al momento de adquirir una vivienda o para mejorar la experiencia en la que ya tiene. Las propiedades estan ordenadas primero por estado: Venta o Renta y luego dentro de cada estado, por su categoria; la inmobiliaria tiene en representacion tanto propiedades como terrenos para los cuales se mostraran diferentes caracteristicas que correspondan a lo que se ha seleccionado. En caso de ser en venta se mostrara el valor total de la propiedad y tambien la cuota aproximada, en caso de ser renta solo se muestra la cuota. Para las propiedades en las que este disponible se mostrara la ubicacion en maps. En cuanto a los proyectos, se cargara cada uno de ellos con sus etapas correspondientes, cada etapa cuenta con un catalogo de las imagenes correspondientes a la misma y tambien los precios y otros detalles importantes.
-
-Objetivo -> implementar herramientas de analitica, el uso de cookies y la integracion de firebase storage junto con otras funcionalidades que firebase ofrece para trabajar el backend desde JavaScript.
+<a name="readme-top"></a>
+
+# 📗 Table of Contents
+
+- [📗 Table of Contents](#-table-of-contents)
+- [📖 hello-react-front-end ](#-metrics-)
+  - [🛠 Built With ](#-built-with-)
+    - [Tech Stack ](#tech-stack-)
+    - [Key Features ](#key-features-)
+  - [🚀 Live Demo ](#-live-demo-)
+  - [💻 Getting Started ](#-getting-started-)
+    - [Prerequisites](#prerequisites)
+    - [Setup](#setup)
+    - [Install](#install)
+    - [Usage](#usage)
+    - [Run tests](#run-tests)
+    - [Deployment](#deployment)
+  - [👥 Authors ](#-authors-)
+  - [🔭 Future Features ](#-future-features-)
+  - [🤝 Contributing ](#-contributing-)
+  - [⭐️ Show your support ](#️-show-your-support-)
+  - [🙏 Acknowledgments ](#-acknowledgments-)
+  - [❓ FAQ ](#-faq-)
+  - [📝 License ](#-license-)
+
+# 📖 SuperHeroes <a name="about-project"></a>
+
+Website developed for "Inmobiliaria Zúniga y Asoc." a real state agency, integrating analytics, cookies (for storing the user preferences), and politics. 
+I implement tools from Firebase like hosting, storage, and firestore database. I built an appointment scheduling tool and a tool for making quotes. The quotes tool allows the user to know which projects and properties can buy just by entering his average salary.
+
+IntersectionObserver API was used to set the menu bar size depending on the scroll of the user because adding the 'scroll' event listener to the window consumes too much resources.
+Cookies were used to store user preferences related to the webpage interface. 
+
+As my first big project for a company, I focused on improving the loading time and SEO. I optimized the code as much as possible and minified every document to improve performance.
+
+Tests running
+![tests running](./repo_images/tests-running.png)
+
+## 🛠 Built With <a name="built-with"></a>
+
+### Tech Stack <a name="tech-stack"></a>
+
+<details>
+  <summary>Client</summary>
+  <ul>
+    <li><a href="https://www.w3schools.com/html/">html</a></li>
+    <li><a href="https://www.w3schools.com/css/">css</a></li>
+    <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">JavaScript/ES6</a></li>
+    <li><a href="https://firebase.google.com/docs/auth">Firebase authentication</a></li>
+  </ul>
+</details>
+
+<details>
+  <summary>Server</summary>
+  <ul>
+    <li><a href="#">N/A</a></li>
+  </ul>
+</details>
+
+<details>
+  <summary>Database</summary>
+  <ul>
+    <li><a href="https://firebase.google.com/docs/firestore">Firebase firestore</a></li>
+  </ul>
+</details>
+
+### Key Features <a name="key-features"></a>
+
+- **Public and private routes**
+- **Mock of routes authentication**
+- **Preserve last visited page when the user logs out**
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+## 🚀 Live Demo <a name="live-demo"></a>
+
+[https://superheroes-1ut5.onrender.com/](https://superheroes-1ut5.onrender.com/)
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+## 💻 Getting Started <a name="getting-started"></a>
+
+To get a local copy up and running, follow these steps.
+
+### Prerequisites
+
+In order to run this project you need:
+
+- Git SCM
+- Visual Studio Code
+- Live Server extension
+
+### Setup
+
+Clone this repository to your desired folder:
+
+```
+git clone https://github.com/jorgeabrahan/inmozuniga.git
+```
+
+Or download the ZIP folder.
+
+### Install
+
+Once you've cloned the repository simply run:
+
+```
+cd inmozuniga
+npm i
+```
+
+And if you want to analyze the code you can run:
+
+```
+code .
+```
+
+To open the project in VScode
+
+### Usage
+
+To run the project, if you are on the hello-react-front-end folder path on your terminal you can execute the following command:
+
+```
+npm start
+```
+
+### Run tests
+
+To run tests:
+
+```
+npm run test
+```
+
+### Deployment
+
+```
+npm run build
+```
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+## 👥 Authors <a name="authors"></a>
+
+👤 **Jorge Abrahan**
+
+- GitHub: [@jorgeabrahan](https://github.com/jorgeabrahan)
+- LinkedIn: [Jorge Abrahan](https://www.linkedin.com/in/jorge-siguenza/?locale=en_US)
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+## 🔭 Future Features <a name="future-features"></a>
+
+- [ ] **Improve UI and UX experience**
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+## 🤝 Contributing <a name="contributing"></a>
+
+Contributions, issues, and feature requests are welcome!
+
+Feel free to check the [issues page](../../issues/).
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+## ⭐️ Show your support <a name="support"></a>
+
+If you like this project you can just cheer me up with a comment 🙂!
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+## 🙏 Acknowledgments <a name="acknowledgements"></a>
+
+No acknowledgments are needed so far!
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+## ❓ FAQ <a name="faq"></a>
+
+- **What is this project's main purpose?**
+
+  - To create a useful website for customers in San Pedro Sula, Honduras to search for their dream house easily that fits their budget and without having to deal with an agent, at least not at first glance. Is basically for those who prefer navigating through the internet to find whatever they want.
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+## 📝 License <a name="license"></a>
+
+This project is [MIT](./LICENSE) licensed.
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>