├── src
├── index.css
├── vite-env.d.ts
├── main.tsx
├── App.css
├── App.tsx
└── assets
│ └── react.svg
├── vite.config.ts
├── tsconfig.node.json
├── .gitignore
├── index.html
├── .eslintrc.cjs
├── tsconfig.json
├── package.json
├── README.md
└── public
└── vite.svg
/src/index.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactDOM from 'react-dom/client'
3 | import App from './App.tsx'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')!).render(
7 |
8 |
9 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "composite": true,
4 | "skipLibCheck": true,
5 | "module": "ESNext",
6 | "moduleResolution": "bundler",
7 | "allowSyntheticDefaultImports": true,
8 | "strict": true
9 | },
10 | "include": ["vite.config.ts"]
11 | }
12 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vite + React + TS
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | env: { browser: true, es2020: true },
4 | extends: [
5 | 'eslint:recommended',
6 | 'plugin:@typescript-eslint/recommended',
7 | 'plugin:react-hooks/recommended',
8 | ],
9 | ignorePatterns: ['dist', '.eslintrc.cjs'],
10 | parser: '@typescript-eslint/parser',
11 | plugins: ['react-refresh'],
12 | rules: {
13 | 'react-refresh/only-export-components': [
14 | 'warn',
15 | { allowConstantExport: true },
16 | ],
17 | },
18 | }
19 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES2020",
4 | "useDefineForClassFields": true,
5 | "lib": ["ES2020", "DOM", "DOM.Iterable"],
6 | "module": "ESNext",
7 | "skipLibCheck": true,
8 |
9 | /* Bundler mode */
10 | "moduleResolution": "bundler",
11 | "allowImportingTsExtensions": true,
12 | "resolveJsonModule": true,
13 | "isolatedModules": true,
14 | "noEmit": true,
15 | "jsx": "react-jsx",
16 |
17 | /* Linting */
18 | "strict": true,
19 | "noUnusedLocals": true,
20 | "noUnusedParameters": true,
21 | "noFallthroughCasesInSwitch": true
22 | },
23 | "include": ["src"],
24 | "references": [{ "path": "./tsconfig.node.json" }]
25 | }
26 |
--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
1 | body{
2 | margin: 2% 30%;
3 | }
4 |
5 |
6 | .header{
7 | background-color: cornflowerblue;
8 | color: white;
9 | padding: 10px;
10 | border-radius: 5px;
11 | text-align: center;
12 | }
13 |
14 |
15 | .result {
16 | margin: 0 auto;
17 | padding: 20px;
18 | border-radius: 4px;
19 | text-align: center;
20 | }
21 |
22 |
23 | .loader{
24 | width: 100%;
25 | height: 100vh;
26 | margin-top: 20vh;
27 | color: red;
28 | text-align: center;
29 | }
30 |
31 | .result{
32 | margin: 10%;
33 | border-radius: 2%;
34 | background-color: rgb(245, 245, 245);
35 | }
36 |
37 | .result h2 {
38 | margin-top: 0;
39 | font-size: 24px;
40 | color: #333;
41 | }
42 |
43 | .result img {
44 | max-width: 100%;
45 | height: auto;
46 | margin-bottom: 20px;
47 | }
48 |
49 | .result p {
50 | font-size: 16px;
51 | line-height: 1.5;
52 | color: #666;
53 | }
54 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "wiki-pi",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "tsc && vite build",
9 | "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
10 | "preview": "vite preview"
11 | },
12 | "dependencies": {
13 | "@emotion/react": "^11.11.4",
14 | "@emotion/styled": "^11.11.5",
15 | "@mui/icons-material": "^5.15.14",
16 | "@mui/joy": "^5.0.0-beta.32",
17 | "@mui/material": "^5.15.14",
18 | "react": "^18.2.0",
19 | "react-dom": "^18.2.0"
20 | },
21 | "devDependencies": {
22 | "@types/react": "^18.2.66",
23 | "@types/react-dom": "^18.2.22",
24 | "@typescript-eslint/eslint-plugin": "^7.2.0",
25 | "@typescript-eslint/parser": "^7.2.0",
26 | "@vitejs/plugin-react": "^4.2.1",
27 | "eslint": "^8.57.0",
28 | "eslint-plugin-react-hooks": "^4.6.0",
29 | "eslint-plugin-react-refresh": "^0.4.6",
30 | "typescript": "^5.2.2",
31 | "vite": "^5.2.0"
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # React + TypeScript + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
10 | ## Expanding the ESLint configuration
11 |
12 | If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
13 |
14 | - Configure the top-level `parserOptions` property like this:
15 |
16 | ```js
17 | export default {
18 | // other rules...
19 | parserOptions: {
20 | ecmaVersion: 'latest',
21 | sourceType: 'module',
22 | project: ['./tsconfig.json', './tsconfig.node.json'],
23 | tsconfigRootDir: __dirname,
24 | },
25 | }
26 | ```
27 |
28 | - Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
29 | - Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
30 | - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
31 |
--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import { Button, Input, CircularProgress } from "@mui/joy";
3 | import SearchIcon from "@mui/icons-material/Search";
4 | import "./App.css";
5 |
6 | function App() {
7 | const [name, setName] = useState("");
8 | const [imageUrl, setImageUrl] = useState("");
9 | const [description, setDescription] = useState("");
10 | const [normalized, setNormalized] = useState("");
11 | const [error, setError] = useState(null);
12 | const [loading, setLoading] = useState(false);
13 |
14 | const handleSubmit = async (e) => {
15 | setLoading(true);
16 | e.preventDefault();
17 | e.stopPropagation();
18 | setError(null);
19 | setNormalized("");
20 | setDescription("");
21 | setImageUrl("");
22 | if (name) {
23 | try {
24 | const res = await fetch("https://en.wikipedia.org/api/rest_v1/page/summary/" + name);
25 | if (res.ok && res.status === 200) {
26 | const json = await res.json();
27 | if (json.type === "standard") {
28 | setNormalized(json.titles.normalized);
29 | setDescription(json.description);
30 | setImageUrl(json.thumbnail.source);
31 | }
32 | } else {
33 | setLoading(false);
34 | setError("No results found.");
35 | }
36 | } catch (error) {
37 | setLoading(false);
38 | setError("Error fetching data.");
39 | }
40 | }
41 | setLoading(false);
42 | };
43 |
44 |
45 | return (
46 | <>
47 | Wiki Fame
48 |
49 |
57 |
58 |
59 | {loading ? (
60 |
61 |
62 |
63 | ) : (
64 |
65 | {error &&
{error}
}
66 | {normalized && (
67 | <>
68 |
{normalized}
69 |
70 |
{description}
71 |
72 | )}
73 |