+
diff --git a/src/components/HomePage.tsx b/src/components/HomePage.tsx
new file mode 100644
index 00000000..02fd79e7
--- /dev/null
+++ b/src/components/HomePage.tsx
@@ -0,0 +1,10 @@
+function HomePage({ locations }: { locations: Locations }) {
+ return (
+
+ );
+}
+
+export default HomePage;
diff --git a/src/locations.ts b/src/locations.ts
new file mode 100644
index 00000000..8b7c7d47
--- /dev/null
+++ b/src/locations.ts
@@ -0,0 +1,74 @@
+import legacyPlaces from '../data/place.json';
+import legacyReviews from '../data/review.json';
+import legacyPlaceImages from '../data/placeImage.json';
+import legacyReviewImages from '../data/reviewImage.json';
+
+function transformReview({
+ id,
+ reviewerName,
+ reviewText: text,
+ numberOfStars: starRating,
+ reviewImage: imageID,
+ reviewImageAlt,
+ placeId: placeID
+}: LegacyReview): Review {
+ return {
+ id,
+ reviewerName,
+ text,
+ imageURL: getReviewImageURL(imageID),
+ imageDescription: reviewImageAlt,
+ starRating,
+ placeID,
+ };
+}
+
+function getReviews(placeID: number) {
+ return legacyReviews
+ .filter((legacyReview) => legacyReview.placeId === placeID)
+ .map(transformReview);
+}
+
+function getLocationImageURL(imageID: string) {
+ return legacyPlaceImages
+ .find((legacyPlaceImage: {}) => legacyPlaceImage.id.toString() === imageID)?.fd ?? ''
+}
+
+function transformLocations(legacyPlaces: LegacyPlace[]): Locations {
+ return legacyPlaces.map(({
+ id,
+ placeName: name,
+ city,
+ state: region,
+ address,
+ phone,
+ placeURL: url,
+ placeImage: imageID,
+ placeImageAlt: imageDescription
+ }) => {
+ return {
+ id,
+ name,
+ city,
+ region,
+ country: '', // TODO
+ address,
+ phone,
+ url,
+ imageURL: getLocationImageURL(imageID),
+ imageDescription,
+ reviews: getReviews(id)
+ };
+ });
+}
+
+function getReviewImageURL(imageID: string) {
+ return legacyReviewImages
+ .find((legacyReviewImage: {}) => legacyReviewImage.id.toString() === imageID) ?.fd ?? '';
+}
+
+const locations = transformLocations(legacyPlaces);
+
+export {
+ locations,
+};
\ No newline at end of file
diff --git a/src/main.tsx b/src/main.tsx
index 82af430c..1d9cbf71 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,17 +1,19 @@
import React from 'react'
-import ReactDOM from 'react-dom/client'
+import ReactDOM from 'react-dom/client';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
-import App from './App'
+import App from './App';
+import HomePage from './components/HomePage';
+import { locations } from './locations';
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
}>
- Locations