Digitalni dnevnik - Journal Aplikacija
Slika koja predstavlja projekat Digitalni dnevnik - Journal Aplikacija

Digitalni dnevnik - Journal Aplikacija

Autor Nikola Filipovski
Fotografija autora Nikole Filipovskog

Nikola Filipovski

Full-Stack Veb Programer

Poseti projekat

Pregled

Journal je lična blog platforma gde autor može da piše, upravlja i objavljuje zapise. Javna strana je dizajnirana da podseća na književni magazin, profinjeno, čitljivo, promišljeno. Administratorska strana je potpuno prilagođen CMS napravljen specifično za dugačku formu pisanja.

Tehnološki stek

Sloj Tehnologija
FrameworkNext.js (App Router)
JezikTypeScript
StilizovanjeTailwind CSS + CSS prilagođene promenljive
Baza podatakaPostgreSQL
ORMDrizzle ORM
AutentifikacijaAutentifikacija zasnovana na sesiji
Skladištenje medijaCloudinary
HostingVercel
Prikaz početne stranice od digitalnog dnevnika - Journal aplikacije

Dizajn sistem

Vizuelni identitet je izgrađen oko uredničke tamne teme, kakvu biste pronašli u književnom časopisu ili nezavisnoj publikaciji.

  • Tipografija: Playfair Display za naslove, Source Serif 4 za osnovni tekst, oba izabrana zbog svog književnog karaktera
  • Paleta boja:
    • #0f0f0f duboka crna pozadina
    • #7eb8d4 čelično plavi naslovi
    • #c0504a tamnocrveni linkovi
  • Dizajn tokeni definisani kao CSS prilagođene promenljive i prošireni u Tailwind - bez "magičnih brojeva" razbacanih kroz kod
  • Potpuno responzivno, pristupačno - skip linkovi, ARIA atributi, navigacija tastaturom kroz celu aplikaciju

Javni blog

Strana aplikacije namenjena čitaocima:

  • Početna stranica sa istaknutim najnovijim zapisom, skorijim objavama, mesečnim indikatorom raspoloženja i dnevnim rotirajućim citatom preuzetim sa eksternog API-ja
  • Lista blogova - svi objavljeni zapisi, prvo najnoviji
  • Pojedinačne stranice zapisa - kompletna tipografska obrada sa uvećanim prvim slovom pasusa, prethodna/sledeća navigacija između zapisa
  • Pretraga - full-text pretraga kroz naslove, izvode, sadržaj i tagove, sa padajućim menijem uživo u zaglavlju (debounce, navigacija tastaturom)
  • 404 i stranice grešaka - napisane istim tonom kao ostatak bloga, sa elegantnim rezervnim prikazima

Admin CMS

Potpuno prilagođen sistem za upravljanje sadržajem dostupan samo autoru:

  • Lista zapisa - tabelarni prikaz svih zapisa uključujući nacrte, sa linkovima za izmenu i pregled uživo
  • Editor zapisa - centralni deo admin panela; pun markdown editor sa tri režima prikaza: Pisanje, Podeljeno (side-by-side live preview), i Pregled
  • Bogata alatna traka - formatiranje teksta (bold, italic, naslovi, citat blok, linkovi) i ubacivanje medija (slika, video, audio)
  • Otpremanje medija - prevuci-i-pusti ili birač fajlova za slike, video i audio sačuvane na Cloudinary, uz podršku za natpise
  • Snimanje glasa - snimanje audio zapisa direktno u pregledaču putem MediaRecorder API-ja, sa tajmerom uživo i reprodukcijom pre ubacivanja
  • Nacrt/Objavljeno prekidač, broj reči, procena vremena čitanja, automatski generisani URL slugovi
  • Praćenje raspoloženja - autor beleži dnevnu belešku o raspoloženju iz admin panela; zapisi se pregledaju po mesecima sa kompletnim mesečnim prikazom, a dominantno raspoloženje tekućeg meseca se prikazuje na javnoj početnoj stranici

Autentifikacija

Bezbedan, sistem autentifikacije:

  • Prijava putem email-a i lozinke uz upravljanje sesijama
  • Sesije automatski ističu i osvežavaju se pri aktivnosti
  • Upravljanje lozinkom dostupno iz admin panela
  • Sve admin rute potpuno zaštićene, neautentifikovani zahtevi nikada ne dolaze do stranica ili API endpoint-a

Baza podataka

PostgreSQL sa Drizzle ORM, sa šemom dizajniranom oko jasnih relacija:

  • Zapisi sa kompletnim metapodacima, slugom, izvodom, sadržajem, tagovima, vremenom čitanja, statusom objave i autorom
  • Unosi raspoloženja povezani sa datumima i mesecima, sa beleškama koje piše autor
  • Auth tabele za bezbedno upravljanje sesijama i nalozima
  • Sve operacije nad bazom centralizovane u tipiziranom sloju upita
  • Drizzle Studio dostupan lokalno za direktan pregled baze podataka

Mediji

Sve slike, video i audio datoteke se čuvaju na Cloudinary - otpremanja idu kroz admin editor, validiraju se po tipu i veličini, i isporučuju preko Cloudinary CDN-a uz automatsku optimizaciju. Besplatan paket pokriva potrebe skladištenja i protoka za lični blog.

API sloj

Skup internih REST endpoint-a koji pokreću admin CMS i javne funkcije:

  • Kreiranje, izmena i brisanje zapisa
  • Handler za otpremanje fajlova integrisan sa Cloudinary
  • Endpoint za pretragu koji pokreće padajući meni u zaglavlju
  • Svi autentifikacioni tokovi se obrađuju serverski

Hosting

Aplikacija je hostovana na Vercel na besplatnom paketu. PostgreSQL je hostovan kod upravljanog cloud provajdera povezanog sa Vercel putem promenljivih okruženja. Deploy-ovi su automatski pri svakom push-u na main granu. Besplatan paket podnosi saobraćaj ličnog bloga bez cold start problema zahvaljujući Next.js edge runtime-u.

Dokumentacija

Projekat uključuje kompletnu korisničku dokumentaciju koja pokriva:

  • Vodič za pisanje - kako koristiti editor, markdown sintaksu, ubacivanje medija, čuvanje nacrta vs objavljivanje
  • Vodič za praćenje raspoloženja - kako beležiti dnevna raspoloženja, dodavati beleške i čitati mesečni pregled
  • Vodič za održavanje - kako ažurirati zavisnosti, pokrenuti migracije baze i pratiti aplikaciju
  • Vodič za deployment - promenljive okruženja, Vercel konfiguracija, Cloudinary podešavanje
  • Vodič za proširenja - struktura koda omogućava jednostavno dodavanje novih funkcionalnosti; nove stranice, API rute i tabele baze prate dosledne obrasce kroz ceo projekat

Ostali detalji

  • PWA manifest - boja teme, ikonice i režim prikaza podešeni za osećaj nativne aplikacije kada se doda na početni ekran telefona
  • Dnevni citat - eksterni API fetch sa vremenskom revalidacijom, automatski se osvežava bez novog deploy-a
  • Open Graph i Twitter Card metapodaci na svim javnim stranicama za uredno deljenje
  • Direktive za pretraživače podešene po stranici - admin i stranice grešaka isključene iz indeksiranja

Posetite Journal aplikaciju i pogledajte kako izgleda moderan lični blog sa naprednom pretragom i pažljivo oblikovanim korisničkim iskustvom: Pogledaj Journal aplikaciju