Bookmarks

Bookmarks, yer iaretlerinizi paylamanz kolaylatrrken ayn zamanda yeni ierikleri kefetmenize olanak tanyan bir projedir.

zellikler

• Firebase Authentication ile kullanclar e-posta ve ifre kullanarak uygulamaya kaydolabilir ve giri yapabilirler.

• Firebase Realtime Database kullanarak, kullanclar yer iaretlerini tm kullanclarn grntleyebilecei ekilde paylaabilir.

• Kullanclar kendi paylatklar yer iaretlerini silebilirler.

• Kullanclar, kendi paylatklar veya dier kullanclarn paylat yer iaretlerini favorilere ekleyebilirler.

• Kullanclar, belirli bir etiketle iaretlenmi yer iaretlerini grntleyebilirler.

Kullanlan Teknolojiler

• Vite: Proje gelitirme srecinde Vite kullanlmtr.

• React: Kullanc arayzn oluturmak iin React ktphanesi kullanlmtr.

• Firebase: Kullanc kimlik dorulama, veritaban ynetimi ve depolama gibi ilevleri salamak iin Firebase platformu kullanlmtr.

• Framer Motion: Kullanc arayz animasyonlar iin Framer Motion ktphanesi kullanlmtr.

• Tailwind CSS: Kullanc arayznn tasarmn oluturmak iin Tailwind CSS kullanlmtr.

Firebase Yaplandrmas

1. Firebase Console'a gidin.

2. Var olan bir Firebase projesi sein veya yeni bir proje oluturun.

3. Firebase Authentication blmne gidin ve "E-posta / ifre" kimlik dorulama yntemini etkinletirin. Bu, kullanclarn e-posta ve ifre kullanarak kaydolmalarn ve giri yapmalarn salayacaktr.

4. Firebase Realtime Database blmne gidin ve veritaban oluturma ilemi iin gerekli admlar takip edin.

5. Veritaban oluturulduktan sonra, aadaki veritaban modelini ve kurallarn kullanarak devam edebilirsiniz. Bu kurallar, kullanclarn yalnzca kendi yer iaretlerini silebilmelerini salar. Bylece kullanclar, dier kullanclarn yer iaretlerine mdahale edemezler.

   {
     "bookmarks": {
       "bookmark1": {
         "description": "React projeniz iin mkemmel yer tutucu avatarlar.",
         "id": "bookmark1",
         "likes": {
           "user1": true
         },
         "tag": "react",
         "timestamp": 1685174317995,
         "title": "Avvvatars React",
         "url": "https://avvvatars.com/",
         "userDisplayName": "Mustafa",
         "userId": "user1"
       }
     },
     "users": {
       "user1": {
         "bookmarks": {
           "bookmark1": {
             "description": "React projeniz iin mkemmel yer tutucu avatarlar.",
             "id": "bookmark1",
             "likes": {
               "user1": true
             },
             "tag": "react",
             "timestamp": 1685174317995,
             "title": "Avvvatars React",
             "url": "https://avvvatars.com/",
             "userDisplayName": "Mustafa",
             "userId": "user1"
           }
         },
         "favorites": {
           "bookmark1": {
             "description": "React projeniz iin mkemmel yer tutucu avatarlar.",
             "id": "bookmark1",
             "likes": {
               "user1": true
             },
             "tag": "react",
             "timestamp": 1685174317995,
             "title": "Avvvatars React",
             "url": "https://avvvatars.com/",
             "userDisplayName": "Mustafa",
             "userId": "user1"
           }
         }
       }
     }
   }
   

   {
     "rules": {
       "bookmarks": {
         ".read": true,
         ".indexOn": ["tag"],
         "$bookmarkId": {
           ".write": "auth != null && (newData.child('userId').val() === auth.uid || data.child('userId').val() === auth.uid)",
           "likes": {
             "$userId": {
               ".write": "auth.uid == $userId"
             }
           }
         }
       },
       "users": {
         "$userId": {
           ".read": "auth != null && auth.uid == $userId",
           ".write": "auth != null && auth.uid == $userId"
         }
       }
     }
   }
   

6. Firebase artk hazr. Proje ayarlarndan Firebase proje yaplandrma bilgilerinizi alabilirsiniz. Bunlar, .env dosyasnda Firebase yaplandrma deerlerini doldurmak iin kullanlacak olan API anahtar, proje kimlii vb. bilgilerdir.

Bilgisayarnzda altrn

Projeyi klonlayn.

git clone https://github.com/pekkiriscim/bookmarks.git

Proje dizinine gidin.

cd bookmarks

Gerekli paketleri ykleyin.

npm install

Firebase projenize ait yaplandrmalar .env dosyasna ekleyin ve sunucuyu altrn.

npm run dev

Projeyi derleyin.

npm run build

nizlemeyi balatn.

npm run preview

Teekkrler

• @nusu: Benzersiz ve elenceli avatarlar iin.

• @emilkowalski: Harika animasyonlu bildirimler iin.

Lisans

Bu proje MIT Lisans altnda lisanslanmtr.

Katk

Katklarnz projeyi daha da renklendirebilir. Deneyimlerinizi ve fikirlerinizi paylaarak projenin geliimine katkda bulunun.