# Technology Documentation FY3

# Monorepo

```yaml
/junwonapp
	/products
		/web
			/www.junwon.com # junwon-info
			/membership # membership-web
			/catalog # catalog-web
			/camera.junwon.com # camera-info
		/mobile
			/catalog # catalog-mobile
			/camera # camera-mobile
	/technology
		/catalog # catalog-tech
		/membership # membership-tech
		/generation
		/info
	  /chat TODO
	  /aesthetics
		/config
		/models
		/assets
	/server # server, AI
	/database # database, accounts
	/data # files (git ignore the files)
	/tools
```

# Our Way

There may be other valid ways. These are just our way. 

- Maintain a monorepo.
- Aggressively embrace AI code generation on the fly.
- Tools are tools. Develop each tool expecting to deprecate it when a better tool can be remade anew. Separate out tools such that each tool gas a small specific purpose.
- Keep features in the server to keep control over the speed of the experiments.
- Pack modules to be independent. Support internal customers and external customers alike.

# Env Var

- .env is included in git repo. Do not add secrets to .env. Add secrets to .env*.local
- Do not expect client-side env vars to be secure especially env vars that begin with NEXT_PUBLIC and EXPO_PUBLIC.

# Visa

- @junwon/visa exports { VisaProvider, VisaCenter }.
- VisaProvider provides context that keeps auth info of member.
- VisaCenter provides a standalone interface where members can manage visa. VisaCenter must be called from inside VisaProvider.

# Camera

- Camera Stream
    - Frames or Videos
        
        Today, we send frames (images) from client to server every several seconds. AI generates comments in response to the frames. Video is not streamed from client to server, because AI does not need the video. By not sending over the video, we can 1) save network cost on client and on server, 2) save battery on client, and 3) prevent pixelation on client camera stream preview (WebRTC degrades resolution to ensure video can be streamed when internet connection decreases in speed). 
        
        Later, we plan to add “Live Cast” mode letting human streamer cast videos to human viewers in real-time. To do so, we will enable the video track streaming logic which was originally active but we temporarily deactivated to mitigate the pixelation problem. When we do so, human streamer shall see pixelated preview which human viewers will be seeing. 
        
- Product not Technology
    
    Technically, Camera can be a technology package especially if we are to sell API access to 3P developers, but we are placing all code in camera-mobile until we have the need. 
    

# WIP

- Example of using url param
    
    ```tsx
    // in next app: /user/[id]
    'use client'
    
    import { UserDetailScreen } from '@junwon/catalog-tech/features/user/detail-screen'
    import { useParams } from 'solito/navigation'
    
    export default function Page() {
      const { id } = useParams()
      return <UserDetailScreen id={id as string} />
    }
    
    // in packages
    import { Button, Paragraph, YStack } from '@junwon/aesthetics'
    import { ChevronLeft } from '@tamagui/lucide-icons'
    import { useRouter } from 'solito/navigation'
    
    export function UserDetailScreen({ id }: { id: string }) {
      const router = useRouter()
      if (!id) {
        return null
      }
      return (
        <YStack
          f={1}
          jc="center"
          ai="center"
          gap="$4"
          bg="$background"
        >
          <Paragraph
            ta="center"
            fow="700"
            col="$blue10"
          >{`User ID: ${id}`}</Paragraph>
          <Button
            icon={ChevronLeft}
            onPress={() => router.back()}
          >
            Go Home
          </Button>
        </YStack>
      )
    }
    
    ```