Bookmarks

Bookmarks, yer işaretlerinizi paylaşmanızı kolaylaştırırken aynı zamanda yeni içerikleri keşfetmenize olanak tanıyan bir projedir.

Özellikler

• Firebase Authentication ile kullanıcılar e-posta ve şifre kullanarak uygulamaya kaydolabilir ve giriş yapabilirler.

• Firebase Realtime Database kullanarak, kullanıcılar yer işaretlerini tüm kullanıcıların görüntüleyebileceği şekilde paylaşabilir.

• Kullanıcılar kendi paylaştıkları yer işaretlerini silebilirler.

• Kullanıcılar, kendi paylaştıkları veya diğer kullanıcıların paylaştığı yer işaretlerini favorilere ekleyebilirler.

• Kullanıcılar, belirli bir etiketle işaretlenmiş yer işaretlerini görüntüleyebilirler.

Kullanılan Teknolojiler

• Vite: Proje geliştirme sürecinde Vite kullanılmıştır.

• React: Kullanıcı arayüzünü oluşturmak için React kütüphanesi kullanılmıştır.

• Firebase: Kullanıcı kimlik doğrulama, veritabanı yönetimi ve depolama gibi işlevleri sağlamak için Firebase platformu kullanılmıştır.

• Framer Motion: Kullanıcı arayüzü animasyonları için Framer Motion kütüphanesi kullanılmıştır.

• Tailwind CSS: Kullanıcı arayüzünün tasarımını oluşturmak için Tailwind CSS kullanılmıştır.

Firebase Yapılandırması

1. Firebase Console'a gidin.

2. Var olan bir Firebase projesi seçin veya yeni bir proje oluşturun.

3. Firebase Authentication bölümüne gidin ve "E-posta / Şifre" kimlik doğrulama yöntemini etkinleştirin. Bu, kullanıcıların e-posta ve şifre kullanarak kaydolmalarını ve giriş yapmalarını sağlayacaktır.

4. Firebase Realtime Database bölümüne gidin ve veritabanı oluşturma işlemi için gerekli adımları takip edin.

5. Veritabanı oluşturulduktan sonra, aşağıdaki veritabanı modelini ve kurallarını kullanarak devam edebilirsiniz. Bu kurallar, kullanıcıların yalnızca kendi yer işaretlerini silebilmelerini sağlar. Böylece kullanıcılar, diğer kullanıcıların yer işaretlerine müdahale edemezler.

   {
     "bookmarks": {
       "bookmark1": {
         "description": "React projeniz için mükemmel 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 için mükemmel 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 için mükemmel 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 artık hazır. Proje ayarlarından Firebase proje yapılandırma bilgilerinizi alabilirsiniz. Bunlar, .env dosyasında Firebase yapılandırma değerlerini doldurmak için kullanılacak olan API anahtarı, proje kimliği vb. bilgilerdir.

Bilgisayarınızda Çalıştırın

Projeyi klonlayın.

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

Proje dizinine gidin.

cd bookmarks

Gerekli paketleri yükleyin.

npm install

Firebase projenize ait yapılandırmaları .env dosyasına ekleyin ve sunucuyu çalıştırın.

npm run dev

Projeyi derleyin.

npm run build

Önizlemeyi başlatın.

npm run preview

Teşekkürler

• @nusu: Benzersiz ve eğlenceli avatarlar için.

• @emilkowalski: Harika animasyonlu bildirimler için.

Lisans

Bu proje MIT Lisansı altında lisanslanmıştır.

Katkı

Katkılarınız projeyi daha da renklendirebilir. Deneyimlerinizi ve fikirlerinizi paylaşarak projenin gelişimine katkıda bulunun.