Skip to content

Commit 54836b7

Browse files
MartinCupelaMartinCupela
authored
chore: add tutorial to examples (#2697)
1 parent 88590f1 commit 54836b7

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+5030
-6
lines changed

‎examples/tutorial/.env.example‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
VITE_API_KEY=REPLACE_WITH_API_KEY
2+
VITE_USER_ID=REPLACE_WITH_USER_ID
3+
VITE_USER_NAME=REPLACE_WITH_USER_NAME
4+
VITE_USER_TOKEN=REPLACE_WITH_USER_TOKEN

‎examples/tutorial/.gitignore‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
.env
2+
!env.example
3+
4+
# Logs
5+
logs
6+
*.log
7+
npm-debug.log*
8+
yarn-debug.log*
9+
yarn-error.log*
10+
pnpm-debug.log*
11+
lerna-debug.log*
12+
13+
node_modules
14+
dist
15+
dist-ssr
16+
*.local
17+
18+
# Editor directories and files
19+
.vscode/*
20+
!.vscode/extensions.json
21+
.idea
22+
.DS_Store
23+
*.suo
24+
*.ntvs*
25+
*.njsproj
26+
*.sln
27+
*.sw?

‎examples/tutorial/README.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
This folder contains the source code for [Chat React tutorial](https://github.com/GetStream/getstream.io-tutorials/blob/main/chat/tutorials/react-tutorial.mdx). It contains multiple versions of apps representing the tutorial steps.
2+
3+
## Setup
4+
5+
1. Copy create a `.env` file next to the `.env.example` file.
6+
2. Copy the contents of `.env.example` file into `.env` file and populate the credentials
7+
8+
## Run individual app examples
9+
10+
```shell
11+
yarn dev:client-setup
12+
yarn dev:client-setup
13+
yarn dev:core-component-setup
14+
yarn dev:channel-list
15+
yarn dev:custom-ui-components
16+
yarn dev:custom-attachment-type
17+
yarn dev:emoji-picker
18+
yarn dev:livestream
19+
```

‎examples/tutorial/eslint.config.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import js from '@eslint/js';
2+
import globals from 'globals';
3+
import reactHooks from 'eslint-plugin-react-hooks';
4+
import reactRefresh from 'eslint-plugin-react-refresh';
5+
import tseslint from 'typescript-eslint';
6+
7+
export default tseslint.config(
8+
{ ignores: ['dist'] },
9+
{
10+
extends: [js.configs.recommended, ...tseslint.configs.recommended],
11+
files: ['**/*.{ts,tsx}'],
12+
languageOptions: {
13+
ecmaVersion: 2020,
14+
globals: globals.browser,
15+
},
16+
plugins: {
17+
'react-hooks': reactHooks,
18+
'react-refresh': reactRefresh,
19+
},
20+
rules: {
21+
...reactHooks.configs.recommended.rules,
22+
'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
23+
},
24+
},
25+
);

‎examples/tutorial/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + React + TS</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.tsx"></script>
12+
</body>
13+
</html>

‎examples/tutorial/package.json‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
{
2+
"name": "tutorial",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev:client-setup": "vite --mode 1-client-setup",
8+
"dev:core-component-setup": "vite --mode 2-core-component-setup",
9+
"dev:channel-list": "vite --mode 3-channel-list",
10+
"dev:custom-ui-components": "vite --mode 4-custom-ui-components",
11+
"dev:custom-attachment-type": "vite --mode 5-custom-attachment-type",
12+
"dev:emoji-picker": "vite --mode 6-emoji-picker",
13+
"dev:livestream": "vite --mode 7-livestream",
14+
"build:client-setup": "vite build --mode 1-client-setup",
15+
"build:core-component-setup": "vite build --mode 2-core-component-setup",
16+
"build:channel-list": "vite build --mode 3-channel-list",
17+
"build:custom-ui-components": "vite build --mode 4-custom-ui-components",
18+
"build:custom-attachment-type": "vite build --mode 5-custom-attachment-type",
19+
"build:emoji-picker": "vite build --mode 6-emoji-picker",
20+
"build:livestream": "vite build --mode 7-livestream",
21+
"build:all": "concurrently \"npm run build:client-setup\" \"npm run build:core-component-setup\" \"npm run build:channel-list\" \"npm run build:custom-ui-components\" \"npm run build:custom-attachment-type\" \"npm run build:emoji-picker\" \"npm run build:livestream\"",
22+
"lint": "eslint ."
23+
},
24+
"dependencies": {
25+
"react": "^19.1.0",
26+
"react-dom": "^19.1.0",
27+
"stream-chat": "^9.0.0",
28+
"stream-chat-react": "^13.0.0"
29+
},
30+
"devDependencies": {
31+
"@eslint/js": "^9.25.0",
32+
"@types/react": "^19.1.2",
33+
"@types/react-dom": "^19.1.2",
34+
"@vitejs/plugin-react": "^4.4.1",
35+
"concurrently": "^9.1.2",
36+
"eslint": "^9.25.0",
37+
"eslint-plugin-react-hooks": "^5.2.0",
38+
"eslint-plugin-react-refresh": "^0.4.19",
39+
"globals": "^16.0.0",
40+
"typescript": "~5.8.3",
41+
"typescript-eslint": "^8.30.1",
42+
"vite": "^6.3.5"
43+
}
44+
}

‎examples/tutorial/public/vite.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎examples/tutorial/src/1-client-setup/App.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { Chat, useCreateChatClient } from 'stream-chat-react';
2+
3+
// your Stream app information
4+
const apiKey = 'REPLACE_WITH_API_KEY';
5+
const userId = 'REPLACE_WITH_USER_ID';
6+
const userName = 'REPLACE_WITH_USER_NAME';
7+
const userToken = 'REPLACE_WITH_USER_TOKEN';
8+
9+
const App = () => {
10+
const client = useCreateChatClient({
11+
apiKey,
12+
tokenOrProvider: userToken,
13+
userData: { id: userId, name: userName },
14+
});
15+
16+
if (!client) return <div>Setting up client & connection...</div>;
17+
18+
return <Chat client={client}>Chat with client is ready!</Chat>;
19+
};
20+
21+
export default App;

‎examples/tutorial/src/1-client-setup/credentials.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
// your Stream app information
2+
export const apiKey = import.meta.env.VITE_API_KEY;
3+
export const userId = import.meta.env.VITE_USER_ID;
4+
export const userName = import.meta.env.VITE_USER_NAME;
5+
export const userToken = import.meta.env.VITE_USER_TOKEN;

‎examples/tutorial/src/1-client-setup/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + React + TS</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="./main.tsx"></script>
12+
</body>
13+
</html>

0 commit comments

Comments
 (0)