Yer işaretlerinizi paylaşın, yeni içerikleri keşfedin ve daha önce hiç olmadığı kadar ilham dolu olun!
MIT License
Bookmarks, yer iaretlerinizi paylamanz kolaylatrrken ayn zamanda yeni ierikleri kefetmenize olanak tanyan bir projedir.
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.
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 Console'a gidin.
Var olan bir Firebase projesi sein veya yeni bir proje oluturun.
Firebase Authentication blmne gidin ve "E-posta / ifre" kimlik dorulama yntemini etkinletirin. Bu, kullanclarn e-posta ve ifre kullanarak kaydolmalarn ve giri yapmalarn salayacaktr.
Firebase Realtime Database blmne gidin ve veritaban oluturma ilemi iin gerekli admlar takip edin.
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"
}
}
}
}
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.
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
@nusu: Benzersiz ve elenceli avatarlar iin.
@emilkowalski: Harika animasyonlu bildirimler iin.
Bu proje MIT Lisans altnda lisanslanmtr.
Katklarnz projeyi daha da renklendirebilir. Deneyimlerinizi ve fikirlerinizi paylaarak projenin geliimine katkda bulunun.