trakt-web

Project Structure

This workspace is composed the following projects:

• client: The frontend of our application. This project houses the Trakt Web client, built with Deno and SvelteKit. It's designed to be efficient and user-friendly, providing quick access to media insights.

Environment Variables

The following environment variables are required for the workspace to function properly:

Development

• TRAKT_CLIENT_ID: The client ID for the Trakt API.
• TRAKT_CLIENT_SECRET: The client secret for the Trakt API.

External Contribution - Get Involved!

Want to contribute to Trakt Web? Great! Here's how to get set up:

1. Create a Trakt Application: Go to Trakt Settings and create a new application.
2. Set the Redirect uri:: Set this to http://localhost:5173/ for local development.
3. Set the Javascript (cors) origins:: Also set this to http://localhost:5173/ to allow cross-origin requests.
4. Use the Client ID and Client Secret in your development environment.

Getting Started

This is a Deno project, so you need to have Deno installed on your machine please refer to the Deno installation guide.

1. Clone the repository
2. Install dependencies: deno task install
3. Run tasks:

• Workspace:

  • Format & Lint: deno task format

• Client:

  • Development: deno task client:dev
  • Contributors: deno task client:dev:contrib

Client Environment - Development Setup

Web Development

For web development, run deno task dev or deno task dev:contrib (for external contributors) in the projects/client directory. Then open your browser to see your work.

Android Development

For Android development, you can:

• Install Development PWA: Install a development version of the Progressive Web App on your Android device with remote debugging capabilities.
• Debug Website Version: Use Chrome browser for debugging the website version.

To set this up, refer to the Chrome Remote Debugging documentation. Connect your development environment to Android through the device management portal at chrome://inspect/#devices. This works with:

• Option 1: Android Studio Emulated Device
• Option 2: Physical Device (USB Connection)

After connecting, set up a reverse proxy with:

adb reverse tcp:5173 tcp:5173

iOS Development

Coming Soon!

Build Trakt Web

To build the Trakt Web client, run:

cd projects/client/
[deno|npm|bun] run build

Production Preview

Vite

Run the following command:

[deno|npm|bun] run build:preview && [deno|npm|bun] run preview

Update Minor Dependencies

Install npm-check-updates

deno install -g --allow-all -n ncu npm:npm-check-updates

NOTE: For the client project add the -p npm since we're using a package.json definition for the svelte project.

Production

• Check: ncu --dep prod -t minor
• Update: ncu --dep prod -t minor -u

Development

• Check: ncu --dep dev -t minor
• Update: ncu --dep dev -t minor -u

Verify that the above steps run smoothly and revert any changes that break the build (this should generally not be the case).

Update Major Dependencies

• Production: ncu --dep prod -t latest
• Development: ncu --dep dev -t latest

For each entry listed as a result:

1. ncu <ENTRY> -u -t latest
2. Build
3. Update any breaks
4. Test
5. Commit

Resolving i18n Conflicts

Handling Translation Conflicts

If rebasing causes conflicts in your client/i18n/messages folder, here's how to fix them:

When merging your changes with the main branch, conflicts may occur in translation files. This is normal when multiple people are working on internationalization.

To resolve these conflicts:

1. Make sure you have the deno CLI installed

2. Run the resolution command from the project root:

   deno task client:i18n:resolve

   Or if you're in the projects/client directory:

   deno task i18n:resolve

These commands will resolve conflicts in the i18n/messages/*.json files and merge the translations properly.

For more details about infrastructure, see: INFRASTRUCTURE.md.