{"id":16211538,"url":"https://github.com/08mfp/rhodesville-villas","last_synced_at":"2026-02-27T04:01:58.447Z","repository":{"id":282803051,"uuid":"829492126","full_name":"08mfp/rhodesville-villas","owner":"08mfp","description":"This is my apartment listing website for a real estate company, integrating a Mapbox API for interactive maps, JSON data handling for nearby attractions, and a real-time availability checker.","archived":false,"fork":false,"pushed_at":"2024-12-05T21:55:07.000Z","size":47572,"stargazers_count":1,"open_issues_count":3,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-17T03:06:26.359Z","etag":null,"topics":["api","flowbite","javascript","json","reactjs","tailwindcss","typescript","vercel"],"latest_commit_sha":null,"homepage":"https://www.rhodesville.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/08mfp.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"license.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-16T14:34:53.000Z","updated_at":"2025-03-08T16:00:22.000Z","dependencies_parsed_at":"2025-03-17T03:16:30.813Z","dependency_job_id":null,"html_url":"https://github.com/08mfp/rhodesville-villas","commit_stats":null,"previous_names":["08mfp/rhodesville-villas"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/08mfp%2Frhodesville-villas","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/08mfp%2Frhodesville-villas/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/08mfp%2Frhodesville-villas/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/08mfp%2Frhodesville-villas/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/08mfp","download_url":"https://codeload.github.com/08mfp/rhodesville-villas/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243981245,"owners_count":20378544,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api","flowbite","javascript","json","reactjs","tailwindcss","typescript","vercel"],"created_at":"2024-10-10T10:48:08.383Z","updated_at":"2025-10-25T22:13:15.924Z","avatar_url":"https://github.com/08mfp.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Real Estate Listings Website\n\nThis project is a modern, responsive web application built with **React.js**. The website presents a clean and modern interface, offering features like light mode and dark mode for different user preferences. It includes interactive elements, real-time data fetching, and secure backend communication. *(Note: There is a separate backend server repository, which I have kept private. If you would like to view this repository, please email me at contact@mohfarid.com.)*\n\n## Table of Contents\n\n- [Features](#features)\n- [Sample Images](#sample-images)\n  - [Home Page](#home-page)\n  - [Gallery Page](#gallery-page)\n  - [About Page](#about-page)\n  - [Availability Page](#availability-page)\n  - [Amenities Page](#amenities-page)\n  - [Neighborhood Map](#neighborhood-map)\n  - [Nearby Attractions Page](#nearby-attractions-page)\n  - [Contact Page](#contact-page)\n- [Project Structure](#project-structure)\n- [Steps to Run the Code/Website](#steps-to-run-the-codewebsite)\n  - [1. Install Dependencies](#1-install-dependencies)\n  - [2. Start the Development Server](#2-start-the-development-server)\n  - [3. Run Tests](#3-run-tests)\n  - [4. Build for Production](#4-build-for-production)\n  - [5. Eject the Configuration (Optional)](#5-eject-the-configuration-optional)\n- [Learn More](#learn-more)\n\n## Features\n\n- **Modern UI/UX**: The website includes both light mode and dark mode, ensuring it is suitable for various user preferences and screen sizes.\n  \n- **Analytics**: Tracks basic analytics such as page visits by region and device.\n\n- **Interactive Elements**:\n  - **Gallery**: Users can filter images by category.\n  - **Amenities**: Comprehensive list of amenities offered by the villas (accordion style).\n  - **Availability**: Real-time apartment availability checker.\n  - **3D Interactive Map**: Built with the Mapbox API, featuring custom clickable icons.\n\n- **Data Security**: All data is fetched from a secure backend server. The server is password-protected and adheres to authorization and authentication rules.\n\n- **Loading Animations**: The front end displays loading animations while fetching data from the backend, ensuring a smooth user experience. Once the data is loaded, the relevant content is populated into the page.\n\n## Sample Images\n\n### Home Page\n\u003cimg src=\"https://github.com/user-attachments/assets/de74fe90-68e9-457e-891e-87cc0d26038a\" alt=\"Home Page\" title=\"Rhodesville Villas Home Page\" width=\"800\"\u003e\n\n### Gallery Page\n\u003cimg src=\"https://github.com/user-attachments/assets/aba2eaa8-3678-4b09-be4f-9d946a533b02\" alt=\"Gallery Page\" title=\"Gallery with Filter Options\" width=\"800\"\u003e\n\n### About Page\n\u003cimg src=\"https://github.com/user-attachments/assets/67f4a10a-9714-4657-986f-14fcddfd831a\" alt=\"About Page\" title=\"About Page with Cards\" width=\"800\"\u003e\n\n### Availability Page\n\u003cimg src=\"https://github.com/user-attachments/assets/b9ba55c8-eb68-41af-847d-9c36ccd6f844\" alt=\"Availability Page\" title=\"Real-time Availability Checker\" width=\"800\"\u003e\n\n### Amenities Page\n\u003cimg src=\"https://github.com/user-attachments/assets/6f75a624-e726-43b9-8210-a66dc2b03370\" alt=\"Amenities Page\" title=\"List of Amenities in accordion style\" width=\"800\"\u003e\n\n### Neighborhood Map\n\u003cimg src=\"https://github.com/user-attachments/assets/1c64b18b-2628-42f8-b383-fbac99f03aa4\" alt=\"Neighborhood Map\" title=\"Interactive 3D Map\" width=\"800\"\u003e\n\n### Nearby Attractions Page\n\u003cimg src=\"https://github.com/user-attachments/assets/b3ca6711-0062-4396-a966-320918b6c5a6\" alt=\"Attractions Page\" title=\"Displays nearby attractions\" width=\"800\"\u003e\n\n### Contact Page\n\u003cimg src=\"https://github.com/user-attachments/assets/092d5615-1ae7-4811-8246-402cc5c80907\" alt=\"Contact Page\" title=\"Contact Page with clipboard functionality\" width=\"800\"\u003e\n\n## Project Structure\n\nThe project is organized as follows:\n\n- **src/assets**: Contains static assets like images and icons.\n- **src/components**: Reusable UI components such as the Header and Footer.\n  - **Footer**: The footer section of the website.\n    - `Footer.tsx`\n    - `styles.tsx`\n  - **Header**: The header section of the website.\n    - `Header.tsx`\n    - `styles.tsx`\n\n- **src/pages**: Pages of the website, including the About, Amenities, Availability, Contact, Home, and Neighborhood sections.\n  - **About-villas**: Information about the villas.\n    - `About.tsx`\n    - `styles.tsx`\n  - **Amenities**: List of amenities offered by the villas.\n    - `Amenities.tsx`\n    - `styles.tsx`\n  - **Availability**: Real-time apartment availability checker.\n    - `Availability.tsx`\n    - `styles.tsx`\n  - **Contact**: Contact information and form.\n    - `Contact.tsx`\n    - `styles.tsx`\n  - **Home**: The homepage of the website.\n    - `Gallery.tsx`\n    - `Home.tsx`\n    - `styles.tsx`\n  - **Neighborhood**: Information about the surrounding neighborhood.\n    - `MapComponent`\n      - `LazyMapComponent.tsx`: Lazy-loaded map component for performance optimization.\n      - `MapComponent.tsx`: The main Map component.\n      - `MapComponent.css`: CSS for the Map component.\n    - `Neighborhood.tsx`\n    - `styles.tsx`\n\n- **src/utils**: Utility functions and modules used throughout the project.\n  - `auth.ts`: Handles authentication and authorization logic.\n\n- **src/App.tsx**: Main application file.\n- **src/index.tsx**: Entry point of the application.\n\n## Steps to Run the Code/Website\n\nThis project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app), a tool that provides a modern setup for building React applications with zero configuration.\n\nFollow these steps to get the project up and running:\n\n### 1. Install Dependencies\n\nBefore starting the application, ensure all dependencies are installed by running:\n\n```bash\nnpm install\n```\n\nThis command installs the necessary packages specified in the `package.json` file.\n\n### 2. Start the Development Server\n\nTo start the application in development mode:\n\n```bash\nnpm start\n```\n\n- This command launches the app and opens it in your default web browser at [http://localhost:3000](http://localhost:3000).\n- The development server provides hot reloading, meaning the page will automatically reload whenever you make changes to the code.\n- Any lint errors or issues will be displayed in the console.\n\n### 3. Run Tests \n\nTo run the test suite in interactive watch mode:\n\n```bash\nnpm test\n```\n\n- This will launch the test runner, which watches for file changes and re-runs tests automatically.\n- For more detailed information on running tests, refer to the [Create React App testing documentation](https://facebook.github.io/create-react-app/docs/running-tests).\n- NOTE: I have not written any custom tests for this project yet.\n\n### 4. Build for Production\n\nTo create an optimized production build:\n\n```bash\nnpm run build\n```\n\n- This command bundles the app for production, optimizing the build for the best performance.\n- The optimized files are output to the `build` directory, ready to be deployed.\n- Filenames are hashed to ensure proper caching on the client side.\n\nFor more details on deploying your application, refer to the [Create React App deployment guide](https://facebook.github.io/create-react-app/docs/deployment).\n\n### 5. Eject the Configuration (Optional)\n\nIf you need more control over the project configuration, you can eject the default setup:\n\n```bash\nnpm run eject\n```\n\n**Important: Ejecting is a one-way operation. Once you eject, you cannot revert back!**\n\n- This command will remove the single build dependency from your project and copy all the configuration files and dependencies (Webpack, Babel, ESLint, etc.) directly into your project.\n- You can then modify the configuration files as needed.\n- All existing commands (`npm start`, `npm test`, `npm run build`) will continue to work, but they will use the copied configuration.\n\n## Learn More\n\nFor further reading and advanced topics:\n\n- [Create React App Documentation](https://facebook.github.io/create-react-app/docs/getting-started) - Comprehensive guide on using Create React App.\n- [React Documentation](https://reactjs.org/) - Official React documentation for learning more about React and its ecosystem.\n\n---\n\n**Built by Mohamed Farid Patel**\n\n## License\n\nThis work is licensed under a [Creative Commons Attribution-NonCommercial 4.0 International License](https://creativecommons.org/licenses/by-nc/4.0/).\n\n![Creative Commons License](https://i.creativecommons.org/l/by-nc/4.0/88x31.png)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F08mfp%2Frhodesville-villas","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F08mfp%2Frhodesville-villas","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F08mfp%2Frhodesville-villas/lists"}