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.
OTHER License
This 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 [email protected].)
Modern UI/UX: The website includes both light mode and dark mode, ensuring it is suitable for various user preferences and screen sizes.
Analytics: Tracks basic analytics such as page visits by region and device.
Interactive Elements:
Data Security: All data is fetched from a secure backend server. The server is password-protected and adheres to authorization and authentication rules.
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.
The project is organized as follows:
src/assets: Contains static assets like images and icons.
src/components: Reusable UI components such as the Header and Footer.
Footer.tsx
styles.tsx
Header.tsx
styles.tsx
src/pages: Pages of the website, including the About, Amenities, Availability, Contact, Home, and Neighborhood sections.
About.tsx
styles.tsx
Amenities.tsx
styles.tsx
Availability.tsx
styles.tsx
Contact.tsx
styles.tsx
Gallery.tsx
Home.tsx
styles.tsx
MapComponent
LazyMapComponent.tsx
: Lazy-loaded map component for performance optimization.MapComponent.tsx
: The main Map component.MapComponent.css
: CSS for the Map component.Neighborhood.tsx
styles.tsx
src/utils: Utility functions and modules used throughout the project.
auth.ts
: Handles authentication and authorization logic.src/App.tsx: Main application file.
src/index.tsx: Entry point of the application.
This project was bootstrapped with Create React App, a tool that provides a modern setup for building React applications with zero configuration.
Follow these steps to get the project up and running:
Before starting the application, ensure all dependencies are installed by running:
npm install
This command installs the necessary packages specified in the package.json
file.
To start the application in development mode:
npm start
To run the test suite in interactive watch mode:
npm test
To create an optimized production build:
npm run build
build
directory, ready to be deployed.For more details on deploying your application, refer to the Create React App deployment guide.
If you need more control over the project configuration, you can eject the default setup:
npm run eject
Important: Ejecting is a one-way operation. Once you eject, you cannot revert back!
npm start
, npm test
, npm run build
) will continue to work, but they will use the copied configuration.For further reading and advanced topics:
Built by Mohamed Farid Patel
This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.