# Getting started

Source: https://swapcard.dev/react-sdk/getting-started


To start using the SDK, you must implement the following components at the root level of your website.

## ClientProvider, ApplicationProvider and EventProvider

```tsx
// ./src/app.tsx

function MyWebsiteApp() {
  const client = initClient();

  return (
    <ClientProvider client={client}>
      <ApplicationProvider locale="en-US">
        <EventProvider eventId="<YOUR_EVENT_ID_HERE>">
          <SubComponents />
        </EventProvider>
      </ApplicationProvider>
    </ClientProvider>
  );
}
```

- `initClient` is a function that returns a `Client` instance. It takes an optional `ClientOptions` object as parameter with the following properties.
  - **origin** `string` - if you have a branded app, specify your custom domain here (ex `initClient({ origin: "my-custom-domain.com" })`). This will fetch data specific to your application and will give you access to event that are "protected" under this domain.
- The `ClientProvider` purpose is to fetch data from Swapcard API and cache results.
- The `ApplicationProvider` get main data from your Swapcard custom application and customize sub-components based on it. You can pass the `locale` to affect how some part of the app are translated (dates for example).
- The `EventProvider` get main data from your event and customize sub-components based on it.