Skip to content

Commit ee419eb

Browse files
InfvyrInfvyr
committed
edit Readme
1 parent e021d16 commit ee419eb

1 file changed

Lines changed: 181 additions & 60 deletions

File tree

‎README.md‎

Lines changed: 181 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,194 @@
1-
# React + TypeScript + Vite
1+
# TV Maze Shows Browser
22

3-
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
3+
A modern React application for exploring TV shows from the [TV Maze API](https://www.tvmaze.com/api). Search, browse, and view detailed information about thousands of TV shows with an intuitive and responsive interface.
44

5-
Currently, two official plugins are available:
5+
## Features
66

7-
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
8-
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
7+
- 🔍 **Real-time Search** — Search TV shows with instant results
8+
- 📺 **Show Details** — View comprehensive information including ratings, networks, schedules, and summaries
9+
- 📄 **Pagination** — Browse through large result sets efficiently
10+
- 🎨 **Theme Support** — Dark and light mode with Radix UI
11+
- 📱 **Responsive Design** — Works seamlessly on desktop, tablet, and mobile
12+
- ⚡ **Fast & Efficient** — Vite-powered development with HMR
13+
- 🧪 **Well-Tested** — Comprehensive unit and integration tests with Vitest
14+
- 🏗️ **Type-Safe** — Full TypeScript support for reliability
15+
- 📦 **Redux State Management** — Centralized state with RTK Query for API calls
916

10-
## React Compiler
17+
## Tech Stack
1118

12-
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
19+
| Category | Technology |
20+
|----------|------------|
21+
| **Framework** | React 19 with TypeScript |
22+
| **Build Tool** | Vite |
23+
| **State Management** | Redux Toolkit + RTK Query |
24+
| **UI Components** | Radix UI Themes |
25+
| **Routing** | React Router v7 |
26+
| **Testing** | Vitest + React Testing Library |
27+
| **Code Quality** | ESLint + Prettier |
28+
| **Icons** | Lucide React |
29+
| **Utilities** | DOMPurify (HTML sanitization) |
1330

14-
## Expanding the ESLint configuration
31+
## Getting Started
1532

16-
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
33+
### Prerequisites
1734

18-
```js
19-
export default defineConfig([
20-
globalIgnores(['dist']),
21-
{
22-
files: ['**/*.{ts,tsx}'],
23-
extends: [
24-
// Other configs...
35+
- Node.js 18.x or 20.x
36+
- npm
2537

26-
// Remove tseslint.configs.recommended and replace with this
27-
tseslint.configs.recommendedTypeChecked,
28-
// Alternatively, use this for stricter rules
29-
tseslint.configs.strictTypeChecked,
30-
// Optionally, add this for stylistic rules
31-
tseslint.configs.stylisticTypeChecked,
38+
### Installation
3239

33-
// Other configs...
34-
],
35-
languageOptions: {
36-
parserOptions: {
37-
project: ['./tsconfig.node.json', './tsconfig.app.json'],
38-
tsconfigRootDir: import.meta.dirname,
39-
},
40-
// other options...
41-
},
42-
},
43-
])
40+
```bash
41+
npm install
4442
```
4543

46-
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
47-
48-
```js
49-
// eslint.config.js
50-
import reactX from 'eslint-plugin-react-x'
51-
import reactDom from 'eslint-plugin-react-dom'
52-
53-
export default defineConfig([
54-
globalIgnores(['dist']),
55-
{
56-
files: ['**/*.{ts,tsx}'],
57-
extends: [
58-
// Other configs...
59-
// Enable lint rules for React
60-
reactX.configs['recommended-typescript'],
61-
// Enable lint rules for React DOM
62-
reactDom.configs.recommended,
63-
],
64-
languageOptions: {
65-
parserOptions: {
66-
project: ['./tsconfig.node.json', './tsconfig.app.json'],
67-
tsconfigRootDir: import.meta.dirname,
68-
},
69-
// other options...
70-
},
71-
},
72-
])
44+
### Development
45+
46+
```bash
47+
npm run dev
48+
```
49+
50+
Open [http://localhost:5173](http://localhost:5173) in your browser.
51+
52+
### Build
53+
54+
```bash
55+
npm run build
56+
```
57+
58+
Production-ready files will be in the `dist/` directory.
59+
60+
### Preview Production Build
61+
62+
```bash
63+
npm run preview
64+
```
65+
66+
## Project Structure
67+
68+
```
69+
src/
70+
├── app/ # Application setup
71+
│ ├── router.tsx # Route configuration with lazy loading
72+
│ ├── store.ts # Redux store with RTK Query
73+
│ └── routes.ts # Route constants
74+
│
75+
├── pages/ # Page components
76+
│ ├── shows/ # Shows browse page with search & filtering
77+
│ ├── show/ # Individual show detail page
78+
│ ├── terms/ # Terms and conditions page
79+
│ └── privacy/ # Privacy policy page
80+
│
81+
├── features/ # Feature modules (isolated, reusable)
82+
│ ├── search-bar/ # Search input component
83+
│ ├── shows/ # Shows list component
84+
│ ├── show-card/ # Individual show card display
85+
│ ├── show/ # Show details components (hero, summary, schedule)
86+
│ ├── pagination/ # Pagination controls
87+
│ ├── sort-panel/ # Sorting/filtering options
88+
│ └── loading/ # Loading UI
89+
│
90+
├── entities/ # Business logic entities
91+
│ └── Show.ts # Show interface definition
92+
│
93+
├── shared/ # Shared resources
94+
│ ├── api/ # RTK Query API definitions
95+
│ │ ├── showsApi.ts # Shows CRUD operations
96+
│ │ └── themeApi.ts # Theme preferences API
97+
│ ├── hooks/ # Custom hooks
98+
│ │ ├── useShowSearch.ts # Search logic hook
99+
│ │ └── useThemeMode.ts # Theme toggle hook
100+
│ ├── providers/ # Context providers
101+
│ ├── ui/ # Layout components
102+
│ ├── types/ # TypeScript interfaces
103+
│ └── styles/ # Global styles
104+
│
105+
├── lib/ # Utility functions
106+
│ └── errors.ts # Error handling utilities
107+
│
108+
└── styles/ # Global CSS
73109
```
110+
111+
## Available Scripts
112+
113+
| Command | Description |
114+
|---------|-------------|
115+
| `npm run dev` | Start development server with HMR |
116+
| `npm run build` | Type-check & build for production |
117+
| `npm run preview` | Preview production build locally |
118+
| `npm run lint` | Run ESLint code quality checks |
119+
| `npm run test` | Run test suite with Vitest |
120+
| `npm run test:ui` | Run tests with interactive UI dashboard |
121+
122+
## API Integration
123+
124+
The application uses the [TV Maze API](https://www.tvmaze.com/api) with no authentication required.
125+
126+
### Main Endpoints
127+
128+
- `GET /shows` — List all shows (paginated)
129+
- `GET /shows/{id}` — Get detailed information about a show
130+
- `GET /search/shows?q={query}` — Search shows by name
131+
132+
All API calls are handled through Redux Toolkit Query for automatic caching, deduplication, and state management.
133+
134+
## Testing
135+
136+
```bash
137+
# Run all tests
138+
npm run test
139+
140+
# Watch mode
141+
npm run test -- --watch
142+
143+
# Interactive UI
144+
npm run test:ui
145+
146+
# Coverage report
147+
npm run test -- --coverage
148+
```
149+
150+
## Code Quality
151+
152+
### Linting
153+
154+
```bash
155+
npm run lint
156+
```
157+
158+
ESLint enforces TypeScript best practices and React conventions.
159+
160+
### Formatting
161+
162+
Prettier automatically formats code on commit via `lint-staged` git hooks.
163+
164+
## CI/CD Pipeline
165+
166+
GitHub Actions workflows automate:
167+
168+
- **CI** (`.github/workflows/ci.yml`) — Linting, type-checking, and tests on every PR and push to `main`/`dev`
169+
- **Build & Deploy** (`.github/workflows/build-deploy.yml`) — Build artifacts on pushes to `main`
170+
- **Security** (`.github/workflows/security.yml`) — Dependency vulnerability scans
171+
172+
## Performance Optimizations
173+
174+
- Code splitting with React lazy loading
175+
- RTK Query caching and deduplication
176+
- Vite fast module replacement
177+
- Image optimization in show cards
178+
- Responsive component design
179+
180+
## Contributing
181+
182+
1. Create a branch from `dev`: `git checkout -b feature/your-feature`
183+
2. Make your changes and commit: `git commit -am 'Add feature'`
184+
3. Push to your branch: `git push origin feature/your-feature`
185+
4. Open a Pull Request to `dev`
186+
187+
All PRs must pass CI checks (linting, type-checking, and tests).
188+
189+
## Browser Support
190+
191+
- Chrome (latest)
192+
- Firefox (latest)
193+
- Safari (latest)
194+
- Edge (latest)

0 commit comments

Comments
 (0)