Merge branch 'release/jest-readme-add'

add Jest and complete README

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel"]
+}
+

Dockerfile

@@ -0,0 +1,19 @@
+# 選擇一個 Node.js 環境作為基礎映像
+FROM node:alpine
+
+WORKDIR /app
+
+# 複製 package.json 和 package-lock.json 檔案
+COPY package*.json ./
+
+RUN apk add --no-cache python3
+RUN apk add --no-cache make
+RUN apk add --no-cache make g++
+RUN npm install -g [email protected]
+RUN npm install
+
+COPY . .
+RUN npm run build
+
+CMD ["npm", "start"]
+

README.md

@@ -2,11 +2,74 @@ This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next
 
 # About Hidden Gem Spot
 
-`/map `provides you a leafet map allow you to create, edit, delete places related to the marker.
+This is a Next.js Project using tailwind and Typescript aimed at providing people a platfrom to create contents for their attractions.
+People can gather their private attractions and publish it to the public as a "Map post" with contents attached.
+While others can like your map post, like your attractions with ❤️ and duplicate any attraction to their own private map.
+
+Deployed with **Vercel** while using **CloudFlare** as DNS service at
+[https://hidden-gem.xyz]()
+
+**Database :** Using Firebase Firestore as NoSQL DB, Storage as Static DB
+**Authentication:** Using Firebase Auth (Email, Google) and integrated with Clerk third-pary Auth (Web2 / Metamask)
+Auth as
+
+using Quill Markdown Editor and native Leaflet & OpenStreet Map as 3rd-party modules.
+I also use several modules such as lazy loading, drap and drop (images) to improve the overall UX.
+Also try some successful Jest tests.
+
+What Else:
+
+1. **Mini Game**
+   Drap-n-drop module is used for drag attrations pins to the "bowl", which is the assigned drop-area to added them to the Map Post-to-be.
+2. **NFT Minting**
+   I used Web3.js and Clerk to allow users mint their NFTA simple HashLip NFT Contract was deployed using Remix, uploaded self-designed image (.png) to IPFS:// service, Pinata, to the Polygon Mainnet. Anyone with a Metamask Wallet can interact with the contact using either UI or polyscan to mint the NFT.
+   [Hidden Gem Spot 旅圓 (hidden-gem.xyz)](https://hidden-gem.xyz/mintNFT)
+3. Google API Integration
+   By sending fetch request to the Google Places API, people can easily find any attractions around their selected spot.
+4. KML & GeoJSON Upload
+   people can upload their .KMZ/.KML file and GeoJSON, which made by Google Maps (one is from "My Map" at Google Maps, another is from Takeout function if you'd like to export your favorite (❤️) attractions and comments).
+   We will convert them into attractions and saved them into database.
+
+![1705783671706](image/README/1705783671706.png)
+
+## Map
+
+`/map component `provides you a leafet map allow you to create, edit, delete places related to the marker.
 it also provides numberous plug-ins such as mini-map, search console and routing machine.
 Routing machine allow you to create routes between markers (places, in this context).
 
-## Getting Started with Next
+## Dashboard
+
+the dashboard along with the map allows people to create, edit contents for the attractions. You can add titles, contents, tags and choose categories and even upload images for any spot. You can also delete any spots.
+**Search & Filter:** search any tag or keyword related to the spot, or filter what is your "likes ❤️".
+**Show/Hide:** Any sub-function on the UI can be hidden, including uploading KMZ/KML/GeoJson, search & Filter,
+and even the whole pupblic map post contents, so it won't cover the spot info you wanna take a look at.
+**Switch Mode:** "Spot" mode and "Post" mode allow people to switch between browsing contents of a particular spot and write any serious post, so the dashboard won't be too crowded.
+
+## Redux Toolkit / zustand
+
+By using redux toolkit/zustand, I can easily manage the states of data.
+
+**zustand:** simple, using for KMZ/KML and Geojson data to send directly to the map component.
+**redux toolkit:** a bit complicated, using for the whole public map data to be saved, so if the author want to edit the whole map post, there's no need to visit
+
+## useContext: Email, Google by Firebase Auth & Clerk
+
+Since Clerk provide us with an intergration kit that saves any user data to the firebase firestore, there are muiltiple ways of logins and signups in my projects. Whether it's by Email or google provided by Firebase Auth, or it's clerk, useContext provides a solution to overall login states management.
+
+## OnBoarding Process (Private Personal Map)
+
+![1705785886777](image/README/1705785886777.png)
+
+## Browsing Map Posts (Public)
+
+![1705785907150](image/README/1705785907150.png)
+
+### See the slides for a complete pitch here:
+
+[https://www.slideshare.net/slideshows/hidden-gem-traveling-attractions-platform/265599252]()
+
+Getting Started with Next
 
 `npm install `  or use `yarn`  to install packages first.
 
@@ -25,17 +88,17 @@ Open [http://localhost:3000](http://localhost:3000) with your browser to see the
 You can start editing the pages by modifying everything under `src/pages `
  The page auto-updates as you edit the file since it's a Next App
 
-# Learn More
+# About Next.js
 
 To learn more about Next.js, take a look at the following resources:
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+- [Next.js Documentation](https://nextjs.org/docs)  Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) Interactive Next.js tutorial.
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+Check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
 
 ## Deploy on Vercel
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+Using [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme).
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+Reference:  [Next.js deployment documentation](https://nextjs.org/docs/deployment)

docker-compose.yml

@@ -0,0 +1,8 @@
+version: '3'
+services:
+  web:
+    build: .
+    ports:
+      - "3000:3000"
+    environment:
+      - NODE_ENV=production

jest.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  // testPathIgnorePatterns: ["/node_modules/", "/.next/"],
+  setupFilesAfterEnv: ["<rootDir>/setupTests.ts"],
+  transform: {
+    "^.+\\.(ts|tsx)$": "ts-jest", // 處理 TypeScript 檔案
+    // "^.+\\.(js|jsx)$": "babel-jest" // 處理 JavaScript 檔案
+  },
+  moduleNameMapper: {
+    "\\.(css|less|sass|scss)$": "identity-obj-proxy",
+    "\\.(gif|ttf|eot|svg)$": "identity-obj-proxy"
+  }
+};