Skip to content

Commit ed32a37

Browse files
mkczarkowskimkczarkowski
committed
feat: add advanced-filter challenge
chore: mention pull request with the solution chore: show single source of example solution fix: add type constraint for advancedSort chore: apply prettier styling chore: point to new pull request with solution
1 parent 8af072c commit ed32a37

25 files changed

+4812
-1
lines changed

‎README.md

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
# Opanuj TypeScript z Przeprogramowanymi
2+
23
<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
4+
35
[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)
6+
47
<!-- ALL-CONTRIBUTORS-BADGE:END -->
58

69
![](./media/logo-main.jpg)
@@ -32,6 +35,10 @@ Discover all the challenges by running `npm run` in your console. Here's the lis
3235
- `npm run test:constraints`
3336
- `npm run test:type-operator`
3437

38+
## 💪 Advanced challenge
39+
40+
If you're looking for a "final boss", we've something that will let you practice advanced TypeScript inside a React app. More details are available in the `src/advanced-filtering/README.md`. Enjoy!
41+
3542
## 🙌 Contributors welcomed!
3643

3744
If you want to contribute to this project, feel free to create a pull request. We're open to new challenges, suggestions and improvements! Happy to feature your name in the contributors list 🎉
@@ -66,4 +73,4 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
6673

6774
<!-- ALL-CONTRIBUTORS-LIST:END -->
6875

69-
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
76+
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

‎src/advanced-filtering/.gitignore

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
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?

‎src/advanced-filtering/README.md

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
# Advanced Filtering with TypeScript and React Challenge
2+
3+
The project is a React application that displays a list of log entries and allows users to filter them by different criteria.
4+
5+
![Dashboard Preview](./public/dashboard.png)
6+
7+
Challenge focuses on practicing generics and advanced typing concepts in TypeScript, particularly in the context of filtering log entries.
8+
9+
Initial implementation of filtering code is provided, but it's not properly typed. Your task is to refactor the code and make sure it's fully typed in a robust and flexible way.
10+
11+
## 🚀 How to get started
12+
13+
1. Install the dependencies:
14+
15+
```bash
16+
npm install
17+
```
18+
19+
2. Run the application and see how it works:
20+
21+
```bash
22+
npm run dev
23+
```
24+
25+
3. Dive into the code and start refactoring types in the filtering-related code.
26+
27+
4. Lint and build the application:
28+
29+
```bash
30+
npm run build
31+
```
32+
33+
## 🤝 Helper materials
34+
35+
1. Read the ["Typy Generyczne w TypeScript"](https://opanujtypescript.pl/ebook/typy-generyczne-typescript/) ebook (in Polish)
36+
2. Watch YouTube video ["Zaawansowany TypeScript w praktyce: Refaktoryzacja projektu"]() (in Polish) - it shows the process of refactoring a sorting-related code in a similar way.
37+
38+
## 🌟 Example solution
39+
40+
As this is an advanced challenge, there is no single correct solution. However, you can find an example solution in the [Pull Request: Example solution for Advanced Filtering Challenge](https://github.com/przeprogramowani/typescript-challenges/pull/31).
41+
42+
Before checking the solution, try to solve the challenge on your own! Use sorting-related code as a reference and try to apply similar typing techniques to filtering-related code.

‎src/advanced-filtering/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>

0 commit comments

Comments
 (0)