Skip to content

Commit 15e4bec

Browse files
VondryVondry
committed
init
0 parents  commit 15e4bec

File tree

137 files changed

+27848
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

137 files changed

+27848
-0
lines changed

‎.github/workflows/backend-api.yml

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
name: BE-API
2+
3+
on:
4+
push:
5+
branches:
6+
- main
7+
pull_request:
8+
branches:
9+
- main
10+
11+
jobs:
12+
Checks:
13+
runs-on: ubuntu-latest
14+
steps:
15+
- name: Checkout code
16+
uses: actions/checkout@v4
17+
- name: Install dependencies in root
18+
run: npm i
19+
20+
- name: Run type check
21+
run: |
22+
cd packages/be
23+
npm run typecheck
24+
25+
- name: Run format check
26+
run: |
27+
cd packages/be
28+
npm run format:check
29+
30+
- name: Run lint check
31+
run: |
32+
cd packages/be
33+
npm run lint:check
34+
35+
- name: Run tests
36+
run: |
37+
cd packages/be
38+
npm run test

‎.github/workflows/frontend-react.yml

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
name: FE-React
2+
3+
on:
4+
push:
5+
branches:
6+
- main
7+
pull_request:
8+
branches:
9+
- main
10+
11+
jobs:
12+
Checks:
13+
runs-on: ubuntu-latest
14+
steps:
15+
- name: Checkout code
16+
uses: actions/checkout@v4
17+
- name: Install dependencies in root
18+
run: npm i
19+
20+
- name: Run type check
21+
run: |
22+
cd packages/react
23+
npm run typecheck
24+
25+
- name: Run format check
26+
run: |
27+
cd packages/react
28+
npm run format:check
29+
30+
- name: Run lint check
31+
run: |
32+
cd packages/react
33+
npm run lint:check
34+
35+
# - name: Run tests
36+
# run: |
37+
# cd packages/react
38+
# npm run test -- --run

‎.github/workflows/frontend-vue.yml

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
name: FE-Vue
2+
3+
on:
4+
push:
5+
branches:
6+
- main
7+
pull_request:
8+
branches:
9+
- main
10+
11+
jobs:
12+
Checks:
13+
runs-on: ubuntu-latest
14+
steps:
15+
- name: Checkout code
16+
uses: actions/checkout@v4
17+
- name: Install dependencies in root
18+
run: npm i
19+
20+
- name: Run type check
21+
run: |
22+
cd packages/vue
23+
npm run typecheck
24+
25+
- name: Run format check
26+
run: |
27+
cd packages/vue
28+
npm run format:check
29+
30+
- name: Run lint check
31+
run: |
32+
cd packages/vue
33+
npm run lint:check
34+
35+
# - name: Run tests
36+
# run: |
37+
# cd packages/vue
38+
# npm run test -- --run

‎.github/workflows/frontend.svelte.yml

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
name: FE-Svelte
2+
3+
on:
4+
push:
5+
branches:
6+
- main
7+
pull_request:
8+
branches:
9+
- main
10+
11+
jobs:
12+
Checks:
13+
runs-on: ubuntu-latest
14+
steps:
15+
- name: Checkout code
16+
uses: actions/checkout@v4
17+
- name: Install dependencies in root
18+
run: npm i
19+
20+
# This bugs out in pipeline
21+
# - name: Run type check
22+
# run: |
23+
# cd packages/svelte
24+
# npm run typecheck
25+
26+
- name: Run format check
27+
run: |
28+
cd packages/svelte
29+
npm run format:check
30+
31+
- name: Run lint check
32+
run: |
33+
cd packages/svelte
34+
npm run lint:check
35+
36+
# - name: Run tests
37+
# run: |
38+
# cd packages/svelte
39+
# npm run test -- --run

‎.gitignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.idea
2+
node_modules
3+
coverage
4+
dist

‎.husky/pre-commit

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
npm run lint:fix
2+
npm run format:write

‎README.md

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
# Educational repo implementing tests for different FE libs
2+
3+
> - **This is 2. part** of the educational materials for testing FE
4+
libraries
5+
> - [1. part with simpler unit tests is here](https://github.com/Vondry/JS-unit-test-examples)
6+
7+
8+
In this project you will find implemented `TODO application` in **3 different FE libraries**:
9+
10+
<img src="./app-preview.png" width="700" alt="Application design"/>
11+
12+
- &nbsp;<img src="./packages/react/public/react.svg" width="20" alt="React" />&nbsp;&nbsp;[React](https://react.dev) -
13+
implemented in [./packages/react](./packages/react)
14+
- &nbsp;<img src="./packages/vue/public/vue.svg" width="20" alt="Vue" />&nbsp;&nbsp;[Vue](https://vuejs.org) -
15+
implemented in [./packages/vue](./packages/vue)
16+
- &nbsp;<img src="./packages/svelte/public/svelte.svg" width="20" alt="Svelte" />
17+
&nbsp;[Svelte](https://svelte.dev) - implemented in [./packages/svelte](./packages/svelte)
18+
19+
and also **backend** in <img src="./packages/be/nest-icon.svg" width="20" alt="Svelte" />
20+
&nbsp;&nbsp;[NestJS](https://nestjs.com/) that resides in [./packages/be](./packages/be).
21+
22+
There is also some shared code located inside [./packages/shared-code](./packages/shared-code) that
23+
all packages above are using.
24+
25+
## Features
26+
27+
All code is written using [TypeScript](https://www.typescriptlang.org) and manages
28+
using [npm workspaces](https://docs.npmjs.com/cli/v10/using-npm/workspaces).
29+
30+
- All apps have configured ESLint, Prettier and tests (main focus is on FE apps)
31+
- [Git Hooks](https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks) features
32+
using [Husky](https://github.com/typicode/husky)
33+
- There are also configured some [GitHub workflows](.github/workflows)
34+
35+
### Features of all 3 frontend apps
36+
37+
- User can `add`/`complete`/`delete` TODO
38+
- Apps use [TanStack Query](https://tanstack.com) for data `fetching`/`mutation`
39+
- Apps have `light`/`dark` mode using [Tailwind](https://tailwindcss.com)
40+
- Apps are managed using [Vite](https://vitejs.dev)
41+
- App were created based
42+
on [Vite templates](https://vitejs.dev/guide/#scaffolding-your-first-vite-project): `npm create vite@latest <app-name> --template {react|vue|svelte}-ts`
43+
44+
### Features of the backend app
45+
46+
- There is an API for CRUD operations for TODOs
47+
- TODOs are store inside [PostgreSQL](https://www.postgresql.org/) and data are managed
48+
using [TypeORM](https://typeorm.io)
49+
- There can be easily generated migrations based on changes to `entities schema` using `npm commands`
50+
- API endpoints are validated using DTOs classes with [class-validators](https://github.com/typestack/class-validator)
51+
and [class-transformers](https://github.com/typestack/class-transformer)
52+
- ENVs are type safe and validated using [Zod](https://zod.dev)
53+
54+
## Running apps
55+
56+
1. First run `npm install` in the root (no need to run install in packages)
57+
- Note that BE app require more configuration, see [README for BE](./packages/be/README.md)
58+
2. Then run `npm run dev` in the BE application and at least one of the FE app
59+
60+
-------------
61+
62+
## 🏆 Challenge
63+
64+
Read [assignment description](./assignment/README.md) and improve your coding and testing skills!

‎app-preview.png

70.7 KB
Loading

‎assignment/README.md

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
# Create toast notification component
2+
3+
<img src="./toast-notifications-design.png" width="900" />
4+
5+
## 👷 Setup new project
6+
7+
1. Choose your favorite FE
8+
library ([React](https://react.dev), [Vue](https://vuejs.org), [Svelte](https://svelte.dev), ...)
9+
2. Use [Vite](https://vitejs.dev) to [bootstrap the project](https://vitejs.dev/guide)
10+
3. Check that project is running (`npm run dev`)
11+
12+
-----
13+
14+
4. Use [Tailwind css](https://tailwindcss.com/) for styling
15+
purposes [guide here](https://tailwindcss.com/docs/guides/vite#vue)
16+
5. Added support for tests with [Vitest](https://vitest.dev)
17+
18+
> Additional setup (might be done later): Git repo, Git Hooks (via [Husky](https://github.com/typicode/husky)), CI/CD (
19+
> GitHub workflows)
20+
21+
## 🤔 Design thinking
22+
23+
Before writing any actual code, let's stop for a bit and think about the component API.
24+
25+
1. What is the component name?
26+
2. What are the combinations of component usage?
27+
3. What props will the component require?
28+
4. Will you need any other helper components to encapsulate shared logic (eg. layout)?
29+
30+
Think about the points above and iterate over them to come up with the best approach 💪
31+
32+
## 🤓 Implementation
33+
34+
After you have some design on paper (in mind), let's go into coding
35+
36+
1. Create the component(s)
37+
- make sure to also implement [dark mode using Tailwind](https://tailwindcss.com/docs/dark-mode) 😎
38+
2. Display all the combinations of the component (preferably as they are shown
39+
on [the image](./toast-notifications-design.png))
40+
3. Write tests for the component(s)
41+
42+
-------------
43+
44+
### Kudos
45+
46+
[Toast notifications](https://dribbble.com/shots/14678733-Toast-Notifications-Concepts) were designed
47+
by: [Corey Ginnivan](https://dribbble.com/CoreyGinnivan)

‎assignment/toast-notifications-design.png

110 KB
Loading

0 commit comments

Comments
 (0)