Click up - clone

Niekomercyjny projekt grupowy stworzony z myślą o pogłębianiu swoich umiejętności.

Spis treści

• Spis treści
• Wprowadzenie
• Wersja live
• 🛠️ Użyte technologie
  • 📦 Frameworki i biblioteki
  • 📋 Formularze i walidacja
  • 📊 Zarządzanie danymi
  • ✉️ E-maile
  • 🧪 Testowanie
  • 👨‍💻 Inne
  • Jak uruchomić lokalnie
  • 🧪 Testowanie
• Opis stron i ich elementów
  • Strona logowania
    • Jak korzystać
  • Strona rejestracji
    • Jak korzystać
  • Home
  • Dashboard
  • Sidebar
  • Elementy dolnej nawigacji
    • Subbar
• 👥 Zespół

Wprowadzenie

ClickUp Clone to niekomercyjny projekt zespołowy inspirowany aplikacją ClickUp. Celem było praktyczne poznanie nowoczesnych technologii webowych (Nextjs) i praca w środowisku zbliżonym do produkcyjnego. Nie jest planowana wersja komercyjna.

Wersja live

Wersje live można zobaczyć na stronie https://clickup-clone-sable.vercel.app/login.

⚠️ Prosimy o niepodawanie prawdziwych adresów e-mail. Sugerujemy użycie jednego z generatorów skrzynek mailowych do testów. Mail jest wymagany w procesie logowania! Prosimy również byście drodzy testerzy - nie rozwalili naszej apki w pierwszym tygodniu jej upublicznia :)

🛠️ Użyte technologie

📦 Frameworki i biblioteki

• ⚛️ React 18.3.1
• ⏭️ Next.js 15.0.3
• 🔥 Firebase (Authentication, Firestore, emulatory)
• 🎨 TailwindCSS 3.4.1

📋 Formularze i walidacja

• 🪝 React Hook Form
• ✅ Yup (walidacja)
• 🔄 @hookform/resolvers

📊 Zarządzanie danymi

• 🔺 @tanstack/react-query (cache, fetching)
• 🧮 @tanstack/react-table (tabele danych)

✉️ E-maile

• 📧 react-email & @react-email/components
• 📨 nodemailer
• 💌 emailjs-com

🧪 Testowanie

• 🧫 Jest + jest-environment-jsdom
• 🧪 @testing-library/react & jest-dom
• 🔥 @firebase/rules-unit-testing (testy uprawnień Firestore)

👨‍💻 Inne

• 📄 TypeScript
• 🧰 ESLint
• 🖼️ react-loading-skeleton
• 🎨 react-icons

Jak uruchomić lokalnie

1. Sklonuj repozytorium:

   git clone https://github.com/molszewski34/clickup-clone.git
   cd clickup-clone
   

2. Zainstaluj zależności:

   npm install
   

3. Utwórz plik .env.local i uzupełnij zmienne środowiskowe:

   NEXT_PUBLIC_FIREBASE_API_KEY=
   NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
   NEXT_PUBLIC_FIREBASE_PROJECT_ID=
   NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=
   NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=
   NEXT_PUBLIC_FIREBASE_APP_ID=
   EMAIL_FROM=
   PASS=
   

4. Uruchom projekt:

   npm run dev
   

5. Przejdź do http://localhost:3000

🧪 Testowanie

Projekt korzysta z Jest do testów jednostkowych.

Aby uruchomić testy:

npm run test

Opis stron i ich elementów

Strona logowania

Odpowiedzialni za stronę: Mariusz Olszewski, Karol Słupiński

• Karol Słupiński - user interface i walidacja danych za pomocą react-hook-form i yup.
• Mariusz Olszewski - tworzenie routes, połączenie z bazą danych, zapisywanie danych do bazy danych.

Jak korzystać

Strona przyjmuje adres email i hasło. Hasło musi składać się z przynajmniej 8 znaków i zawierać jedną dużą litere.

Strona rejestracji

Odpowiedzialni za stronę: Mariusz Olszewski, Karol Słupiński

• Karol Słupiński - user interface, walidacja danych za pomocą react-hook-form i yup. Stworzenie i wdrożenie kolekcji w której są zapisywane powiązania użytkownikiem z workspace.
• Mariusz Olszewski - tworzenie routes, połączenie z bazą danych, zapisywanie danych do bazy danych, ustawienie skrzynki pocztowej do wysyłania mailów z zaproszeniem do rejestracji

Jak korzystać

1. Wpisz Imię i Nazwisko. Nazwa użytkownika jest w dalszych etapach przekształcana w inicjały. Twoje imię i nazwisko będzie widniało w wielu miejscach aplikacji więc dobrze abyś nie posługiwał się nazwami którymi nie chcesz być przywitany przez następną stronę.
2. Wpisz Email. Zaleca się z korzystania mailów używanych do testowania aplikacji. Firebase może odrzucać niektóre skrzynki mailowe. Po zakończeniu procesu rejestracji na podany mail przyjdzie potwierdzenie rejestracji.
3. Hasło. Hasło musi składać się z przynajmniej 8 znaków i zawierać jedną dużą literę.

Home

Assigned to me

Element interface użytkownika ukazujący przypisane do niego zadania. Zadania podzielone są na 3 kategorie: In progress, To do i ukryte Completed.

Aby ukazać kategorie Compleded należy naciśnąć przycisk Closed.

My work

Element w przygotowaniu

Dashboard

Dashboard jest główną częścią aplikacji. W związku z czym nie będzie omawiany jako jedna strona, a na podstawie elementów.

Sidebar

Odpowiedzialni za element: Mariusz Olszewski, Jakub King

• Jakub King - tworzenie user interface wszystkich elementów listy i elementów typu pop-up. Integracja elementów i osadzenie na stronie.
• Mariusz Olszewski - integracja user interface z firestore.

Górna część nawigacji Na ten moment większość linków jest nie aktywna do czasu wprowadzenia przypisanych dla nich funkcjonalności. Po naciśnięciu linku użytkownik zostanie przeniesiony do odpowiadającej nazwie strony.

Dolna część nawigacji - spaces Ta część nawigacji bocznej jest odpowiedzialna za pokazywanie w formie folderów - workspaces i projects.

Elementy dolnej nawigacji

Lista Po kliknięciu któregoś z folderów użytkownik jest odsyłany do ścieżki strony składającej się z workspace workspaceId/l/projectId. Adres jest dynamicznie ustalana za pomocą providera useData.tsx i useUser.tsx które otrzymują id od elementów danej listy. sW dynamicznym generowaniu stron kluczowy był params i useRouter w SidebarContent.tsx.

Workspace Workspace jest folderem przechowującym space z listami zawierającymi taski. Gdy dodawany jest space to wraz z nim umieszczany jest pierwszy domyślny List o nazwie "List".

Dodawanie space: Workspace jest dodawany z modala

Usuwanie Space: Menu pojawia się po nacisnieciu przycisku który pojawia się po najechaniu na element listy.

Po wybraniu opcji Delete pojawia się ten modal

W celu usunięcia workspace należy wpisać nazwe listy i zatwierdzić.

Sprawy techniczne Na ten moment spaces jest pod kolekcją obiektu Workspace. Podobnie jak Workspace - Space zawiera podkolekcje list i tasków.

Główne pliki uczestniczące w procesach space: getSpaces.ts - pobieranie wszystkich space createSpace.ts- tworzenie nowego space deleteSpace.ts updateSpace.ts

Pliki te są akcjami które są później obsługiwane poprzez react-query. Podczas badania powiązań można natrafić zarówno na hooki jak i komponenty. W procesie tym pośredniczy też Provider - WorkspaceFormProvider który zbiera informacje z poszczególnych input.

Subbar

Odpowiedzialny za element : Jakub Skrzeczowski Subbar występuje w dwóch głównych formach:

1. Prosty subbar (subbar pod górną częścią nawigacji):

   • Zawiera linki, tekst lub buttony, w zależnośći który link z Górna część nawigacji jest aktywny. Większość obecnie jest nieaktywna i czeka na dostarcznie funkcjonalności im odpowiadającym

2. view subBar (workspaceId/l/projectId):

   • Ten element zawiera przyciski do otwierania modali, otwierania dodatkowego navbaru bezpośredio nad view subBar, a także dodatkowy subbar zawierający filtry umożliwiające zarządzanie listami w workspace.

👥 Zespół

• 👨‍💻 Mariusz Olszewski – Backend, Frontend, testy, zarządzanie projektem: przydzielanie zadań, ustalanie priorytetów i podejmowanie decyzji odnośnie końcowego kształtu projektu.
• 🎨 Karol Słupiński – Frontend, Backend (assocjacje Firebase)
• 🧩 Jakub King – UI, logika komponentów
• 🧩 Jakub Skrzeczowski – UI, logika komponentów
• 🧪 Magdalena Jarzombek – testy manualne
• 🧪 Karolina Kozieł – testy manualne

MIT License

Copyright (c) [2024] Mariusz Olszewski

Zezwala się na korzystanie, kopiowanie, modyfikowanie, scalanie, publikowanie, dystrybucję, sublicencjonowanie i/lub sprzedaż kopii Oprogramowania wyłącznie do celów naukowych, badawczych lub edukacyjnych. Oprogramowanie nie może być używane do celów komercyjnych. Wszelkie kopiowanie i dystrybucja oprogramowania muszą zawierać powyższą notkę licencyjną oraz powiadomienie o braku gwarancji.

Oprogramowanie jest dostarczane "w takim stanie, w jakim jest", bez żadnej gwarancji, wyrażonej ani domniemanej, w tym m. in. gwarancji przydatności handlowej czy przydatności do określonego celu. W żadnym wypadku autorzy ani właściciele praw autorskich nie ponoszą odpowiedzialności za jakiekolwiek roszczenia, szkody lub inne zobowiązania wynikające z umowy, czynu niedozwolonego lub w inny sposób wynikające z używania Oprogramowania.

MIT License

Copyright (c) [2024] Mariusz Olszewski

Permission is hereby granted, free of charge, to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software solely for academic, research, or educational purposes. The Software may not be used for commercial purposes. Copies of the Software must include the above copyright notice and this permission notice.

The Software is provided "as is", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose, or non-infringement. In no event shall the authors or copyright holders be liable for any claims, damages, or other liabilities, whether in an action of contract, tort, or otherwise, arising from, out of, or in connection with the Software or the use or other dealings in the Software.