Pycon APAC 2024 FE

Requierement

• node 20.9
• pnpm 9.5.0

Development

1. Install depedencies pnpm install
2. copy .env.example to .env fill based on your api and captcha configuration
3. Run in development mode pnpm run dev

Project structure

• app/
  • api/ (to store all api backend endpoints, there are 2 type of file end with .client.ts and .server.ts. If you want connect api from client/browser (ex: run on component load, on useEffect or using tanstackQuery) make api end with .client.ts. If you want connect api from server (ex: remix loader function or remix action funcion) make api end with .server.ts. More information see remix server vs client)
  • components/ (to store react components)
    • routes/ (to store react components that only in use in certain page/route, this folder structured mimic routes/ folder)
    • shared/ (to store react components that use accross multiple page (shared))
    • ui/ (shadcn ui component)
  • hooks/ (to store custom react hook. see Reusing Logic with Custom Hooks)
  • lib/ (shadcn ui lib)
  • providers/ (to store providers (ex: TanstackQuery Provider, GooglCaptchaProvider))
  • routes/ (remix routes folder see remix routes folder)
  • meta.ts (default browser header)
  • constants.ts (shared constant variable)
  • vite-env.d.ts (typing for environtment variables)

Contributing

• main branch is production branch, while dev branch is devlopment branch
• Code must be formated using biome pnpm run format
• Code must successfully build pnpm run build without error and warning
• New change must: pull dev branch to make sure it has latest commit -> create new branch from branch dev -> commit change on new branch -> create pull request on github
• If something urgent happen you can push to main by create new branch from main then pull request to main but make sure inform changed first on social media (telegram)

How To

Update Schedule from pretalx api

• run script to convert pretalx api to json file (pretalx.json) pnpm run updatePretalx

Deployment

Virtual Private Server

1. Install depedencies pnpm install
2. set environtment variable copy value on env.example to .bashrc then add export keyword then fill based on your api and captcha configuration

export VITE_API_URL=https://{api_url}
export VITE_RECAPTCHA_SITE_KEY={google_captcha_site_key}
export RECAPTCHA_SECRET_KEY={google_captcha_secret_key}

3. Build server pnpm run build
4. Run this command pnpm run start on background runner like pm2 or systemd, then export port 3000 publicly

Vercel (currently)

1. Register this github repo on vercel
2. set environtment variable with key on .env.example see set environtment variable on vercel
3. Everytime you push new commit to main branch, vercel will automatically build and serve.