Empori Full-stack web aplikacija za upravljanje terminima i rezervacijama je cloud rješenje za organizaciju vremena i poslovnih aktivnosti poduzetnika. Dizajnirana kao multitenant aplikacija, omogućava različitim korisnicima (tenantima) neovisno upravljanje vlastitim podacima i postavkama unutar jedne platforme. S obzirom da je aplikacija multitenant, korisnici mogu dijeliti termine, postavke i ostale funkcionalnosti s više korisnika unutar iste organizacije.

Fokus aplikacije je na jednostavnost sučelja i dostupnost na svim uređajima, čime se korisnicima omogućava kvalitetno upravljanje rezervacijama s brzinom kao da pišu na papirić, ali uz podršku kvalitetne tehnologije koja osigurava bolju komunikaciju s klijentima i praćenje poslovanja. Više detalja o samoj aplikaciji možete pronaći i na porfoliu za landing page ili na stranici Empori SaaS-a.

Backend je baziran na Django frameworku, dok je frontend dio aplikacije razvijan u NextJs-u s Typescript-om. U nastavku sam dao detaljniji opis tehnologija i biblioteka koje koristim.

Ključne funkcionalnosti

Kalendar Rezervacija: Intuitivni kalendar koji omogućava kreiranje i upravljanje terminima s pregledom dnevnog, tjednog i mjesečnog rasporeda.

Predlošci Termina: Brzo kreiranje termina pomoću unaprijed definiranih predložaka.

Cloud Rješenje: Aplikacija je dostupna bez potrebe za instalacijom, što osigurava pristup bilo gdje i sa različitih uređaja koji imaju pristup internetu.

Prilagodba Postavki: Postavljanje trajanja događaja, radnog vremena i radnih dana prema specifičnim potrebama korisnika.

Prilagodba Dizajna: Omogućava prilagodbu dizajna potrebama korisnika. Korisnici mogu izabrati između 3 dizajna, odnosno svijetlog, tamnog i “modernog” načina rada.

Email Podsjetnici: Automatski podsjetnici putem emaila smanjuju broj propuštenih termina i povećavaju zadovoljstvo klijenata.

Frontend

Za frontend dio Empori full-stack web aplikacija koristi sljedeće tehnologije i alate kako bi osigurao optimalno korisničko iskustvo i funkcionalnost:

Redux – Redux Toolkit: Ove biblioteke koristim za upravljanje stanjem aplikacije (JWT autentifikacija, događaji, postavke itd.). Sve komponente aplikacije komuniciraju i dijele stanje pomoću Reduxa, osiguravajući konzistentno i pouzdano funkcioniranje.

Resend i React Email: Implementacija slanja emailova s frontend aplikacije omogućava dobro dizajnirane email komponente i poboljšano korisničko iskustvo.

Zod i React Hook Form: Ove biblioteke koristim za validaciju i upravljanje događajima na frontendu prije slanja API poziva na backend.

React Query: Za upravljanje API pozivima i retry u slučaju grešaka. React Tanstack Query osigurava kvalitetnu integraciju s Reduxom i omogućava odličnu komunikaciju s backendom.

Typescript: pomogao mi je osigurati ispravne tipove podataka kroz tipove i sučelja te mi je značajno smanjio greške u kodu kroz statičku tipizaciju, što omogućava otkrivanje i ispravljanje grešaka tijekom razvoja. Osim toga, Typescript mi je značajno olakšao integraciju s backendom i bolje upravljanje poslovnom logikom, povećavajući pouzdanost aplikacije.

Sentry: Alat za logiranje i praćenje grešaka u aplikaciji, omogućio mi je pravovremene informacije o greškama i reproduciranje istih. Replay funckionalnost mi je značajno pomogla u prepoznavanju i reproduciranju grešaka nastalih korištenjem frontend dijela aplikacije.

Full Calendar i Moment.js: Omogućili su mi brz razvoj i kvalitetno upravljanje datumima/vremenima i generalno kod funkcionalnosti vezane uz evente i rezervacije. Ove biblioteke pomogle su mi u bržem dizajniranju komponenti i osigurale više vremena za bavljenje poslovnom logikom.

NextUi i Tailwind CSS: Biblioteke kojima sam kvalitetnije i brže razvio komponente koje su responzivne na svim uređajima. Ovim bibliotekama sam osigurao visoku kvalitetu i prilagodljivost dizajna.

Vitest: Koristim za testiranje čime osiguravam kvalitetu koda aplikacije prije deploymenta, ali i tijekom razvoja. Vitest mi je omogućio jednostavno pisanje testova prema različitim use case scenarijima koje mogu pokrenuti u bilo kojem trenutku ili ih pustiti da kontinuirano pokretanje kod svake promjene dijelova koda.

Backend Tehnologije i Integracije

Za backend aplikacije koristio sam sljedeće tehnologije i alate:

Djoser i SimpleJWT: Ove biblioteke koristio sam za autentifikaciju korisnika i requestova koji mi dolaze s frontend aplikacije. Razvio sam JWT autentifikaciju koja koristi HTTPOnly Cookies. Fokus sam stavio na sigurnost korisnika i podatakak koje dijelim između frontenda i bakcenda.

Amazon SES: Koristim za slanje email podsjetnika, kao i za cijeli proces registracije, potvrde korisničkih računa, reset lozinke itd.

Cron Jobovi: Automatizirano slanje email podsjetnika koji se pokreću putem cron jobova, omogućavajući pravovremene podsjetnike prema poslovnim pravilima.

Django RestFramework i Swagger: Django RestFramework za API i Swagger za API dokumentaciju, osiguravajući robusnu backend infrastrukturu.

Logtail i Sentry: Za logiranje i praćenje grešaka u aplikaciji, omogućujući detaljno praćenje statusa aplikacije i grešaka te praćenje cron jobova.

Amazon S3: Koristim za pohranu statičkih datoteka, omogućujući skalabilnost i dostupnost.

Pytest: Alat za testiranje backend koda, kojima provjeravam kvalitetu koda, use caseove prema poslovnim pravilima, ali i rukovanje exceptionima.

Empori – Landing

Frontend aplikacija – Landing page za Empori SaaS. Ova aplikacija namijenjena je za prezentaciju funkcionalnosti Empori web aplikacije. Ova aplikacija, izrađena s naglaskom na jednostavno korisničko iskustvo, nudi kompletan “customer journey” s ciljem registracije novih korisnika.

Korištenjem modernih tehnologija i alata, Empori Landing osigurava besprijekornu interakciju i atraktivnu prezentaciju naših usluga.

Landing page je potpuno optimiziran za sve vrste uređaja i ima odlične rezultate na Lighthouse reportu (pogledati galeriju).

Demo:

 

Tehnološki Stack i Integracije

Dizajn stranice: Empori Landing koristi Tailwind CSS za elegantan i responzivan dizajn. Tailwind omogućava brzu izradu prilagođenih stilova, osiguravajući dosljednost i estetsku privlačnost stranice.

Obrada formi: Korištenje React Hook Form omogućava jednostavnu i efikasnu izradu i upravljanje formama unutar aplikacije. Validacija formi je poboljšana integracijom sa Zod bibliotekom, koja osigurava točnost i konzistentnost unosa podataka te vraćanje jasnih informacija korisnicima u slučaju unosa podataka koji ne zadovoljavaju poslovna pravila.

Backend integracija: Next.js backend API komunicira s Empori backend aplikacijom, omogućavajući besprijekornu obradu podataka. Prije poziva API-ja, svi podaci se validiraju i čiste prema poslovnim pravilima koristeći Zod, što osigurava korisnicima jasne i razumljive povratne informacije.

Email funkcionalnosti: Implementacija React Email i Resend biblioteka omogućava slanje emailova korisnicima koji žele više informacija o našoj aplikaciji ili su prošli proces registracije. Emailovi sadrže video upute s detaljnim opisom funkcionalnosti i uputama za rad u aplikaciji.

Empori landing je dizajniran da pruži potencijalnim korisnicima sve potrebne informacije na intuitivan i vizualno privlačan način, vodeći ih kroz “customer journey” kroz koji istražuju sve mogućnosti koje naša aplikacija nudi te u konačnici dovršavaju proces registracije.