Employee Management System (EMS)
W ramach tego projektu stworzymy system zarządzania pracownikami w organizacji. Przed Tobą kilka ciekawych wyzwań - stworzenie aplikacji, zakodowanie funkcjonalności oraz deployment. Zadania będziemy z czasem dodawali kolejne funkcjonalności.
Start projektu
Stwórz nową strukturę projektu w NX.dev. Będziemy potrzebowali 3 aplikacji:
- Admin - React
- Backend - NestJS
- Website - Next.js
Stwórz 3 odpowiednie aplikacje w folderze "apps". Wieć w folderze apps powinny zawierać się 3 aplikacje: admin, backend, website.
Dodatkowo skorzystamy na razie z jednej biblioteki "common-ui", która będzie przechowywała komponenty współdzielone pomiędzy aplikacjami Frontend i Website. Do tej biblioteki dodaj kilka komponentów takich jak Input, Button, Header, Paragraph (ich implementacja nie ma na razie znaczenia).
Upewnij się, że każda z tych aplikacji działa odpalając odpowiednie polecenia. Np. nx dev website lub nx serve website.
Pomocna może okazać się wtyczka do NX od edytorów kodu np. https://code.visualstudio.com/
Zaprojektowanie systemu
Twoim zadaniem jest zaprojektowanie schematu systemu. To będzie na razie jeden schemat, którego zadaniem będzie opisanie jak docelowo będzie zachowywała się aplikacja. W pierwszym kroku zechcemy mieć możliwość dodawania opinii o naszej firmie z poziomu Website (Next.js). Każda dodana opinia powinna być zatwierdzona w panelu admina (React).
Zanim jednak napiszesz kod stwórz diagram sekwencji w mermaid i dodaj go do projektu. Edytor jest dostępny pod tym linkiem: https://mermaid.live/edit. Schemat powinien pokazywać, jakie aplikacje będą zaangażowane w proces dodawania opinii, oraz jakie są kroki do wykonania.
Jako bazę danych możesz zastosować Airtable lub skorzystać z Prisma czy Drizzle i dobrać do tego np. Postgresa.
Do opisania decyzji o wyborze rozwiązania Airtable, czy lokalny postgres wykorzystaj Architecture Decision Record (ADR). Nie musisz instalować żadnego frameworka, wystarczy plik tekstowy. Zachęcam Cię, aby do każdej decyzji tworzyć nowy plik ADR. Warto zerknąć do Bazy wiedzy, aby zapoznać się z ADR.
Pierwsza funkcjonalność
Jeżeli upewnisz się, że masz już wszystko zsetupowane, masz diagram oraz ADR, możemy ruszać :)
Twoim pierwszym zadaniem jest dodanie opinii o naszej firmie z poziomu Website. Opinia trafia do API/bazy danych, ale nie jest jeszcze widoczna na stronie. Dopiero po zatwierdzeniu jej w panelu admina (lub odrzuceniu) będzie widoczna na stronie. Podczas dodawania opinii wykorzystaj walidację zarówno po stronie backendu, jak i po stronie frontendu. Pomocne może być wykorzystanie biblioteki Zod oraz React Hook Form.
Powodzenia 💪
Employee Management System (EMS)
W ramach tego projektu stworzymy system zarządzania pracownikami w organizacji. Przed Tobą kilka ciekawych wyzwań - stworzenie aplikacji, zakodowanie funkcjonalności oraz deployment. Zadania będziemy z czasem dodawali kolejne funkcjonalności.
Start projektu
Stwórz nową strukturę projektu w NX.dev. Będziemy potrzebowali 3 aplikacji:
- Admin - React
- Backend - NestJS
- Website - Next.js
Stwórz 3 odpowiednie aplikacje w folderze "apps". Wieć w folderze apps powinny zawierać się 3 aplikacje: admin, backend, website.
Dodatkowo skorzystamy na razie z jednej biblioteki "common-ui", która będzie przechowywała komponenty współdzielone pomiędzy aplikacjami Frontend i Website. Do tej biblioteki dodaj kilka komponentów takich jak Input, Button, Header, Paragraph (ich implementacja nie ma na razie znaczenia).
Upewnij się, że każda z tych aplikacji działa odpalając odpowiednie polecenia. Np. nx dev website lub nx serve website.
Pomocna może okazać się wtyczka do NX od edytorów kodu np. https://code.visualstudio.com/
Zaprojektowanie systemu
Twoim zadaniem jest zaprojektowanie schematu systemu. To będzie na razie jeden schemat, którego zadaniem będzie opisanie jak docelowo będzie zachowywała się aplikacja. W pierwszym kroku zechcemy mieć możliwość dodawania opinii o naszej firmie z poziomu Website (Next.js). Każda dodana opinia powinna być zatwierdzona w panelu admina (React).
Zanim jednak napiszesz kod stwórz diagram sekwencji w mermaid i dodaj go do projektu. Edytor jest dostępny pod tym linkiem: https://mermaid.live/edit. Schemat powinien pokazywać, jakie aplikacje będą zaangażowane w proces dodawania opinii, oraz jakie są kroki do wykonania.
Jako bazę danych możesz zastosować Airtable lub skorzystać z Prisma czy Drizzle i dobrać do tego np. Postgresa.
Do opisania decyzji o wyborze rozwiązania Airtable, czy lokalny postgres wykorzystaj Architecture Decision Record (ADR). Nie musisz instalować żadnego frameworka, wystarczy plik tekstowy. Zachęcam Cię, aby do każdej decyzji tworzyć nowy plik ADR. Warto zerknąć do Bazy wiedzy, aby zapoznać się z ADR.
Pierwsza funkcjonalność
Jeżeli upewnisz się, że masz już wszystko zsetupowane, masz diagram oraz ADR, możemy ruszać :)
Twoim pierwszym zadaniem jest dodanie opinii o naszej firmie z poziomu Website. Opinia trafia do API/bazy danych, ale nie jest jeszcze widoczna na stronie. Dopiero po zatwierdzeniu jej w panelu admina (lub odrzuceniu) będzie widoczna na stronie. Podczas dodawania opinii wykorzystaj walidację zarówno po stronie backendu, jak i po stronie frontendu. Pomocne może być wykorzystanie biblioteki Zod oraz React Hook Form.
Powodzenia 💪
Employee Management System (EMS)
W ramach tego projektu stworzymy system zarządzania pracownikami w organizacji. Przed Tobą kilka ciekawych wyzwań - stworzenie aplikacji, zakodowanie funkcjonalności oraz deployment. Zadania będziemy z czasem dodawali kolejne funkcjonalności.
Start projektu
Stwórz nową strukturę projektu w NX.dev. Będziemy potrzebowali 3 aplikacji:
- Admin - React
- Backend - NestJS
- Website - Next.js
Stwórz 3 odpowiednie aplikacje w folderze "apps". Wieć w folderze apps powinny zawierać się 3 aplikacje: admin, backend, website.
Dodatkowo skorzystamy na razie z jednej biblioteki "common-ui", która będzie przechowywała komponenty współdzielone pomiędzy aplikacjami Frontend i Website. Do tej biblioteki dodaj kilka komponentów takich jak Input, Button, Header, Paragraph (ich implementacja nie ma na razie znaczenia).
Upewnij się, że każda z tych aplikacji działa odpalając odpowiednie polecenia. Np. nx dev website lub nx serve website.
Pomocna może okazać się wtyczka do NX od edytorów kodu np. https://code.visualstudio.com/
Zaprojektowanie systemu
Twoim zadaniem jest zaprojektowanie schematu systemu. To będzie na razie jeden schemat, którego zadaniem będzie opisanie jak docelowo będzie zachowywała się aplikacja. W pierwszym kroku zechcemy mieć możliwość dodawania opinii o naszej firmie z poziomu Website (Next.js). Każda dodana opinia powinna być zatwierdzona w panelu admina (React).
Zanim jednak napiszesz kod stwórz diagram sekwencji w mermaid i dodaj go do projektu. Edytor jest dostępny pod tym linkiem: https://mermaid.live/edit. Schemat powinien pokazywać, jakie aplikacje będą zaangażowane w proces dodawania opinii, oraz jakie są kroki do wykonania.
Jako bazę danych możesz zastosować Airtable lub skorzystać z Prisma czy Drizzle i dobrać do tego np. Postgresa.
Do opisania decyzji o wyborze rozwiązania Airtable, czy lokalny postgres wykorzystaj Architecture Decision Record (ADR). Nie musisz instalować żadnego frameworka, wystarczy plik tekstowy. Zachęcam Cię, aby do każdej decyzji tworzyć nowy plik ADR. Warto zerknąć do Bazy wiedzy, aby zapoznać się z ADR.
Pierwsza funkcjonalność
Jeżeli upewnisz się, że masz już wszystko zsetupowane, masz diagram oraz ADR, możemy ruszać :)
Twoim pierwszym zadaniem jest dodanie opinii o naszej firmie z poziomu Website. Opinia trafia do API/bazy danych, ale nie jest jeszcze widoczna na stronie. Dopiero po zatwierdzeniu jej w panelu admina (lub odrzuceniu) będzie widoczna na stronie. Podczas dodawania opinii wykorzystaj walidację zarówno po stronie backendu, jak i po stronie frontendu. Pomocne może być wykorzystanie biblioteki Zod oraz React Hook Form.
Powodzenia 💪
Sprawdź też dokładny program nauki i agendę na tej stronie: https://www.webamigos.pl/mewa
Dzięki szkoleniu Modern and Efficient Web Applications (MEWA) poznasz dobre praktyki tworzenia aplikacji internetowych, zaczniesz pisać czytelny i przejrzysty kod, wykorzystasz w pełni najbardziej efektywne narzędzia. Dzięki szkoleniu poznasz najlepsze praktyki tworzenia aplikacji po stronie frontendu oraz dowiesz się z czym zmagają się backendowcy w zespołach fullstackowych.
.jpg){kind=avatar}
Jestem Senior Fullstack Developerem specjalizującym się w tworzeniu aplikacji internetowych w stacku TypeScript, React, Next.js, NestJS. Realizowałem wiele ciekawych i wymagających projektów m. in. dla znanej akademii filmowej z USA oraz startupów z Doliny Krzemowej.
Od 8 lat dzielę się swoją wiedzą jako ekspert na konferencjach i trener IT. Prowadzę też szkolenia dla programistów w Bottega IT Minds, firmie która zrzesza najlepszych ekspertów IT. Jestem także pomysłodawcą i założycielem Szkoły Reacta oraz kanału Web Amigos na YouTube.
Na codzień oprócz kodowania, zajmuję się weryfikacją IT, czyli w trakcie procesów rekrutacyjnych sprawdza poziom wiedzy kandydatów na stanowiska Junior, Regular, jak i Senior developerów.