Skip to content

Commit a3cfce7

Browse files
committed
docs: replace Vite template README with project-specific documentation
Update the README to reflect the actual purpose of the repository as a collection of React interview tasks. Remove the generic Vite+React+TypeScript template content and add details about the project structure, available tasks, and instructions for running and extending the application.
1 parent b9c86aa commit a3cfce7

1 file changed

Lines changed: 34 additions & 75 deletions

File tree

README.md

Lines changed: 34 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,34 @@
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) 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
9-
10-
## React Compiler
11-
12-
The React Compiler is enabled on this template. See [this documentation](https://react.dev/learn/react-compiler) for more information.
13-
14-
Note: This will impact Vite dev & build performances.
15-
16-
## Expanding the ESLint configuration
17-
18-
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
19-
20-
```js
21-
export default defineConfig([
22-
globalIgnores(['dist']),
23-
{
24-
files: ['**/*.{ts,tsx}'],
25-
extends: [
26-
// Other configs...
27-
28-
// Remove tseslint.configs.recommended and replace with this
29-
tseslint.configs.recommendedTypeChecked,
30-
// Alternatively, use this for stricter rules
31-
tseslint.configs.strictTypeChecked,
32-
// Optionally, add this for stylistic rules
33-
tseslint.configs.stylisticTypeChecked,
34-
35-
// Other configs...
36-
],
37-
languageOptions: {
38-
parserOptions: {
39-
project: ['./tsconfig.node.json', './tsconfig.app.json'],
40-
tsconfigRootDir: import.meta.dirname,
41-
},
42-
// other options...
43-
},
44-
},
45-
])
46-
```
47-
48-
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:
49-
50-
```js
51-
// eslint.config.js
52-
import reactX from 'eslint-plugin-react-x'
53-
import reactDom from 'eslint-plugin-react-dom'
54-
55-
export default defineConfig([
56-
globalIgnores(['dist']),
57-
{
58-
files: ['**/*.{ts,tsx}'],
59-
extends: [
60-
// Other configs...
61-
// Enable lint rules for React
62-
reactX.configs['recommended-typescript'],
63-
// Enable lint rules for React DOM
64-
reactDom.configs.recommended,
65-
],
66-
languageOptions: {
67-
parserOptions: {
68-
project: ['./tsconfig.node.json', './tsconfig.app.json'],
69-
tsconfigRootDir: import.meta.dirname,
70-
},
71-
// other options...
72-
},
73-
},
74-
])
75-
```
1+
# react-interview-task
2+
3+
This repository is a collection of small React interview tasks packaged in one app. Each task is a focused exercise accessible from the Home page.
4+
5+
**Overview**
6+
- Each task lives in `src/routes` as its own page.
7+
- Tasks aim to assess core React skills: state, rendering, performance, and UX.
8+
- Data and utilities are colocated for simplicity.
9+
10+
**Run**
11+
- Install: npm install
12+
- Dev: npm run dev
13+
- Build: npm run build
14+
- Preview: npm run preview
15+
- Lint: npm run lint
16+
17+
**Tasks Catalog**
18+
- Mini Search Filter — Filter a movie list by title and genre and render result cards. Open from Home or directly at [mini-search-filter.tsx](file:///e:/react-projects/react-interview-task/src/routes/mini-search-filter.tsx). Data source: [Film.ts](file:///e:/react-projects/react-interview-task/src/data/Film.ts).
19+
20+
**Start Here**
21+
- Use the Home page to navigate tasks: [index.tsx](file:///e:/react-projects/react-interview-task/src/routes/index.tsx).
22+
- Shared layout and navigation are defined in [__root.tsx](file:///e:/react-projects/react-interview-task/src/routes/__root.tsx).
23+
24+
**Suggested Extensions**
25+
- Mini Search Filter
26+
- Case-insensitive search and input debounce
27+
- Empty state and loading skeletons
28+
- Pagination or list virtualization
29+
- Extract Card and Filters components
30+
31+
**Add A New Task**
32+
- Create a new file in `src/routes`, e.g. `my-task.tsx`.
33+
- Link it from the Home page to expose the task.
34+
- Keep tasks self-contained with clear UI and requirements.

0 commit comments

Comments
 (0)