Family Portal with Codex Cloud

Built a mobile-first family portal for frequently used Google Maps locations, websites, and shared document links. The app has separate pages for Kuwait places, Korea places, websites, and documents. Search results take users to the matching item on its page, where they can open a destination or copy an address or URL.

Open the site in Safari
    ↓
Cloudflare Access
  Registered email + one-time PIN
    ↓
Existing Lightsail server · Docker Nginx
  Serves the built dist files
    ↓
React runs in Safari

Application implementation and automated checks ran in Codex Cloud. I reviewed previews, refined the behavior through feedback, and applied production configuration on the existing AWS Lightsail server. Subsequent content edits and release builds are handled on my Mac.

Key design decisions

• Limit changes to the existing service. Added an independent React, Vite, and TypeScript app within the existing Django repository. The portal uses static data and introduces no backend or database of its own.
• Use the existing hosting setup. The existing Docker Nginx serves the built files; React runs in the browser. No additional Node.js service is required in production.
• Delegate authentication to Cloudflare Access. Configured an allow policy for family email addresses and email-based one-time PIN login, alongside HTTPS and Authenticated Origin Pulls configuration.
• Organize around mobile use. Removed favorites, separated the four content areas, and made search lead to the relevant item. PWA configuration supports adding the portal to a phone's home screen.
• Simplify content deployment. Track source and build output together on main. After an updated build is pushed, the server pulls the same branch to receive the release.

Planning around minimal changes, maintenance, and access control took considerable effort. Deployment also required troubleshooting:

iPhone Safari use was confirmed; home-screen launch and Android behavior have not been individually verified.

Tech: Codex Cloud, React, TypeScript, Vite, PWA, Cloudflare Access, AWS Lightsail, Docker, Nginx

===

가족이 자주 찾는 구글 지도 장소, 웹사이트, 공유문서 링크를 모아두는 모바일 포털을 만들었다. 쿠웨이트 장소·한국 장소·웹사이트·공유문서를 각각의 페이지로 구성하고, 검색 결과를 누르면 해당 페이지의 해당 항목으로 이동하도록 했다. 카드에서 지도나 링크를 열고 주소와 URL을 복사할 수 있다.

Safari에서 사이트 접속
    ↓
Cloudflare Access
  등록된 이메일 + 일회용 PIN 인증
    ↓
기존 Lightsail 서버 · Docker Nginx
  빌드된 dist 파일 제공
    ↓
Safari에서 React 화면 실행

앱 구현과 자동 검사는 Codex Cloud에서 진행했다. 미리보기를 확인하며 화면과 동작을 조정했고, 운영 설정은 기존 AWS Lightsail 서버에 직접 적용했다. 이후 목록 수정과 배포용 빌드는 Mac에서 진행한다.

핵심 설계 결정

• 기존 서비스 수정 최소화: Django 저장소 안에 React·Vite·TypeScript 앱을 독립적으로 추가했다. 정적 데이터를 사용하고, 포털 전용 백엔드와 데이터베이스는 만들지 않았다.
• 기존 서버 활용: Docker Nginx가 빌드된 파일을 제공하고 React는 브라우저에서 실행된다. 운영을 위한 Node.js 서비스를 추가하지 않았다.
• 이메일 인증으로 접근 제한: Cloudflare Access에 가족 이메일 허용 정책과 일회용 PIN 로그인을 설정했다. HTTPS와 AOP 인증서 설정도 함께 진행했다.
• 모바일 중심 화면: 즐겨찾기를 제거하고 네 가지 메뉴를 분리했다. 검색으로 항목을 찾아 이동할 수 있게 했으며, 홈 화면 추가를 위한 PWA 설정도 준비했다.
• 관리와 배포 단순화: 소스와 빌드 결과물을 main에 함께 저장한다. 수정 후 빌드해서 푸시하면 서버에서는 같은 브랜치를 pull해 반영한다.

최소 수정·관리 편의·접근 보안을 기준으로 초기 범위를 정하는 데 시간이 들었다. 배포 과정에서도 직접 확인하고 해결할 일이 있었다.

iPhone Safari 사용은 확인했고, 홈 화면 실행과 Android의 세부 동작은 별도로 확인하지 않았다.

사용 기술: Codex Cloud, React, TypeScript, Vite, PWA, Cloudflare Access, AWS Lightsail, Docker, Nginx

Links

• Velog: https://velog.io/@kosang234/%EB%B0%94%EC%9D%B4%EB%B8%8C%EC%BD%94%EB%94%A9%EC%9C%BC%EB%A1%9C-%EA%B0%80%EC%A1%B1-%ED%8F%AC%ED%84%B8%EC%9D%84-%EB%A7%8C%EB%93%A4%EB%A9%B4%EC%84%9C-%EA%B9%A8%EB%8B%AC%EC%9D%80-%EA%B2%83%EB%93%A4-Codex-%ED%81%B4%EB%9D%BC%EC%9A%B0%EB%93%9C-%EA%B0%9C%EB%B0%9C-%ED%9B%84%EA%B8%B0