{"id":19093897,"url":"https://github.com/bekcodingaddict/worldwise","last_synced_at":"2025-06-11T08:36:20.899Z","repository":{"id":259135973,"uuid":"859335405","full_name":"BekCodingAddict/WorldWise","owner":"BekCodingAddict","description":" Worldwise Travel Tracking is a travel management platform that provides organizations and individuals with tools to track travel itineraries and ensure traveler safety","archived":false,"fork":false,"pushed_at":"2024-12-21T15:29:52.000Z","size":1208,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-22T07:55:39.026Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://worldwise-r13h.onrender.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BekCodingAddict.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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-09-18T13:45:14.000Z","updated_at":"2024-12-21T15:29:55.000Z","dependencies_parsed_at":"2024-12-17T18:36:11.137Z","dependency_job_id":"590abe46-927d-4a6b-8711-903d1dd066eb","html_url":"https://github.com/BekCodingAddict/WorldWise","commit_stats":null,"previous_names":["bekcodingaddict/worldwise"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BekCodingAddict%2FWorldWise","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BekCodingAddict%2FWorldWise/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BekCodingAddict%2FWorldWise/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BekCodingAddict%2FWorldWise/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BekCodingAddict","download_url":"https://codeload.github.com/BekCodingAddict/WorldWise/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BekCodingAddict%2FWorldWise/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259230692,"owners_count":22825442,"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":[],"created_at":"2024-11-09T03:26:30.489Z","updated_at":"2025-06-11T08:36:20.878Z","avatar_url":"https://github.com/BekCodingAddict.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# WorldWise - You travel the world.\nWorldWise는 React 기반의 여행 추적 애플리케이션으로, 세계 여행을 쉽고 효율적으로 관리하고 기록할 수 있도록 설계되었습니다. 직관적인 인터페이스와 다양한 기능을 결합하여 방문한 국가, 도시 목록, 여행 정보 및 메모를 체계적으로 관리할 수 있습니다.\n\n## 주요 기능\n### 1.인터랙티브 지도 통합\n- 사용자는 인터랙티브 세계 지도를 사용해 자신의 여행 경로를 시각적으로 추적할 수 있습니다.\n- 방문한 장소에 마커를 추가하거나 미래 여행지를 계획할 수 있습니다.\n\n### 2.여행 통계\n- 방문한 국가 수, 도시 목록, 여행 장점 및 특정 도시와 관련된 메모와 정보 링크를 표시합니다.\n\n### 맞춤형 여행 기록\n- 사용자가 여행의 세부 정보를 기록할 수 있습니다(예: 날짜, 목적지, 여행 메모).\n\n### 반응형 디자인\n- 데스크톱 및 모바일 기기에서 원활하게 작동하며 부드러운 사용자 경험을 제공합니다.\n\n### 효율적인 상태 관리\n- \u003ccode\u003efeature/v-1.0.0\u003c/code\u003e: 이 버전에서는 주로 Context API를 사용해 상태를 관리했습니다.\n- \u003ccode\u003efeature/v-2.0.0\u003c/code\u003e: 이 버전에서는 ReactQuery/TanStack을 사용해 모든 UI 상태를 원격 상태로 전환했으며, 일부 글로벌 UI 상태를 관리하기 위해 React Redux Toolkit을 도입했습니다.\n\n## 사용 기술\n- \u003cb\u003e프론트엔드:\u003c/b\u003e \u003ci\u003e[React,Vite,React Leaflet,React Router DOM, Date Picker,React Toast,JavaScript,HTML,CSS 모듈]\u003c/i\u003e\n- \u003cb\u003e지도 도구:\u003c/b\u003e \u003ci\u003e[Leaflet.js를 사용한 인터랙티브 지도 구현]\u003c/i\u003e\n- \u003cb\u003e상태 관리:\u003c/b\u003e \u003ci\u003e[Context API 및 Redux/Toolkit를 활용해 애플리케이션 상태 관리]\u003c/i\u003e\n- \u003cb\u003e데이터 저장:\u003c/b\u003e\n  - \u003ccode\u003efeature/v-1.0.0\u003c/code\u003e: \u003ci\u003e[지속적인 데이터를 위해 로컬 저장소 또는 JSON 서버 사용]\u003c/i\u003e\n  - \u003ccode\u003efeature/v-2.0.0\u003c/code\u003e:\u003ci\u003e [MongoDB를 사용하여 비정형 데이터를 처리 사용]\u003c/i\u003e\n\n## 개인 기여 사항\n### 1.향상된 반응형 디자인\n- 태블릿과 소형 모바일 기기를 포함한 모든 화면 크기에서 최적화된 경험을 제공하도록 앱의 반응형 디자인을 개선했습니다.\n- 다양한 디바이스에서 더 나은 사용성을 위해 레이아웃을 테스트하고 수정했습니다.\n- \u003ccode\u003efeature/v-1.0.0\u003c/code\u003e 및 \u003ccode\u003efeature/v-2.0.0\u003c/code\u003e 브랜치를 통해 확인할 수 있습니다.\n\n### 2.백엔드 통합\n- 사용자 데이터 및 여행 기록 관리를 위해 Node.js와 Express.js를 사용하여 백엔드를 개발하고 통합했습니다.\n- MongoDB를 사용하여 여행 세부 정보와 통계를 지속적으로 저장할 수 있는 데이터베이스를 구현했습니다.\n- 개인 계정과 안전한 데이터 관리를 위해 Bcrypt.js 및 JSONwebtoken을 활용한 사용자 인증 및 권한 부여를 추가했습니다.\n- ReactQuery/TanStack을 사용해 원격 상태를 관리했으며, UI 글로벌 상태 관리를 위해 React Redux Toolkit을 사용했습니다.\n\n## 얻은 성과와 배운 점:\n성과:\n### 1.지도 데이터 시각화 구현\n- GeoJSON 및 지도 라이브러리 Leaflet.js 활용하여 인터랙티브 지도 시각화를 성공적으로 구현.\n- 사용자가 방문한 국가와 도시를 직관적으로 보여주는 기능으로 사용자 만족도를 크게 향상.\n\n### 데이터 처리 및 분석 기술 강화\n- MongoDB를 활용하여 사용자 데이터(방문 국가, 도시, 여행 기록 등)를 효율적으로 저장하고 검색.\n- 여행 통계(방문 국가 수, 거리, 여행 일수,개인 노트 등)를 계산하고 시각적으로 표현하여 데이터 분석 역량 강화.\n\n### 반응형 디자인\n- CSS Module 및 React를 사용해 반응형 UI를 개인적으로 구현하여 다양한 디바이스에서 최적의 사용자 경험 제공\n  \n배운 점:\n### 1.풀스택 개발 과정에 대한 종합적 이해\n- 프론트엔드와 백엔드의 역할과 상호작용을 깊이 이해하며, 클라이언트-서버 구조의 중요성을 학습.\n- RESTful API 설계 및 상태 관리를 통해 데이터의 일관성과 신뢰성을 유지하는 방법 습득.\n\n### 2.지도 기반 데이터 시각화\n- GeoJSON 형식의 데이터를 활용하여 지도 상에 사용자 정보를 시각화하는 기술을 배움.\n- 지도 라이브러리의 활용법과 지도 상의 데이터 렌더링 최적화 기법 학습.\n\n### 3.데이터 저장 및 검색 최적화\n- MongoDB에서 복잡한 쿼리와 인덱싱을 사용하여 대규모 데이터를 효율적으로 관리하고 검색하는 방법 습득.\n- 데이터 모델링을 통해 사용자 데이터를 체계적으로 관리하는 기술 향상.\n\n### 4.사용자 경험 개선\n- 직관적이고 반응형인 UI/UX 설계를 통해 다양한 사용자 환경에 적합한 인터페이스 설계 기술을 여러 번 업그래이트 하면서 경험 한 것.\n\n### 5.문제 해결 및 디버깅 역량 강화\n- 프로젝트 진행 중 발생한 데이터 동기화 및 성능 이슈를 해결하며 디버깅 기술 향상.\n  \n## 브랜치별 버전\n### 1.\u003ccode\u003efeature/v-1.0.0\u003c/code\u003e\n- 이 프로젝트는 Jonas Schmedtmann의 Udemy 강좌, The Ultimate React Course를 기반으로 학습 및 개선 목적으로 개발되었습니다.\n- 해당 강좌에서는 프론트엔드만 개발되었으며, 이를 \u003ccode\u003efeature/v-1.0.0\u003c/code\u003e 브랜치에서 확인할 수 있습니다.\n- 버전 1은 백엔드가 포함되지 않았으며, 개인 기여 사항인 반응형 디자인이 포함되었습니다.\n\n### 2.\u003ccode\u003efeature/v-2.0.0\u003c/code\u003e\n- 버전 2에서는 백엔드 통합이 시작되었으며, 주요 기능은 ReactQuery/TanStack과 React Redux Toolkit을 사용해 글로벌 상태를 관리하는 것입니다.\n\n## UI Screenshots\n\n## Errors:\n### 1.React Query States are Frist render undefined \n\nThis is my custom hook. Here data is initially undefined.\n```javascript\nexport function useCities2() {\n  const {\n    isLoading,\n    data, ///data is initially undefined.\n    error,\n  } = useQuery({\n    queryKey: [\"cities\"],\n    queryFn: getCities,\n    refetchOnMount: true,\n  });\n  console.log(data);\n\n  return { isLoading, error, data };\n}\n```\nSo if we want to use like\n```javascript\n  const { data } = useCities2(); // Frist render data undefined so error is occoured \n  const { cities } = data; //\n```\n\u003e[!TIP]\n\u003eSolution:\n```javascript\nconst {\n    isLoading,\n    data = {},\n    error,\n  } = useQuery({\n    queryKey: [\"cities\"],\n    queryFn: getCities,\n    refetchOnMount: true,\n  });\n```\n\n## 향후 계획\n### 1추가 기능\n- 연도, 국가 또는 여행 유형별로 여행을 필터링하는 고급 필터링 옵션 추가\n- 방문 장소의 히트맵과 같은 여행 행동 분석 기능 추가\n- AWS EC3를 통합해 백엔드 신뢰성, 확장성 및 가상 네트워크 환경 개선\n\n## 기대 효과 및 자기 성장\n- 여행 기록 및 시각화를 제공하는 실용적인 앱 개발을 통해 실무와 유사한 경험을 축적.\n- 데이터를 기반으로 사용자 경험을 향상시키는 기법을 습득하며, 개발자로서의 자신감을 얻음.\n- 사용자의 니즈를 파악하고 이를 기술로 구현하는 역량 강화.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbekcodingaddict%2Fworldwise","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbekcodingaddict%2Fworldwise","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbekcodingaddict%2Fworldwise/lists"}