|
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