Modern React.js ile geliştirilmiş, SQLite veritabanı kullanan profesyonel giriş ekranı ve dashboard uygulaması.

• JWT token tabanlı güvenlik
• Şifre hashleme (bcrypt)
• Oturum yönetimi
• Güvenli API endpoint'leri

• Responsive tasarım
• Profesyonel business teması
• Modern CSS animasyonları
• Glassmorphism efektleri
• Lucide React ikonları

• Kullanıcı kayıt/giriş
• Popup modal ile kullanıcı ekleme
• Kullanıcı düzenleme/silme
• Rol tabanlı yetkilendirme
• Arama ve filtreleme

• Ana sayfa istatistikleri
• Kullanıcı yönetimi
• Raporlar ve analitik
• Takvim entegrasyonu
• Mesajlar ve bildirimler
• Ayarlar sayfası

• React.js - UI framework
• React Router DOM - Client-side routing
• Axios - HTTP client
• Lucide React - Icon library
• CSS3 - Styling ve animasyonlar

• Node.js - Runtime environment
• Express.js - Web framework
• SQLite3 - File-based database
• JWT - Authentication
• bcryptjs - Password hashing

• Node.js (v14 veya üzeri)
• npm veya yarn

1. Repository'yi klonlayın:

git clone https://github.com/kullaniciadi/reactjslogin.git
cd reactjslogin

2. Bağımlılıkları yükleyin:

npm install

3. Environment dosyasını oluşturun:

cp .env.example .env

4. Environment değişkenlerini düzenleyin:

PORT=5002
JWT_SECRET=your-secret-key-here

5. Backend'i başlatın:

node server/index.js

6. Frontend'i başlatın (yeni terminal):

npm start

7. Tarayıcıda açın:

http://localhost:3000

• POST /api/auth/register - Kullanıcı kaydı
• POST /api/auth/login - Kullanıcı girişi
• GET /api/user/profile - Kullanıcı profili

• GET /api/users - Tüm kullanıcıları listele
• POST /api/users - Yeni kullanıcı oluştur
• PUT /api/users/:id - Kullanıcı güncelle
• DELETE /api/users/:id - Kullanıcı sil

• GET /api/health - Sunucu durumu

Uygulama ilk çalıştırıldığında aşağıdaki test kullanıcıları otomatik oluşturulur:

reactjslogin/
├── public/
│   └── index.html
├── src/
│   ├── components/
│   │   ├── Dashboard.js
│   │   ├── Dashboard.css
│   │   ├── Login.js
│   │   ├── Register.js
│   │   ├── UserModal.js
│   │   └── UserModal.css
│   ├── App.js
│   ├── App.css
│   ├── index.js
│   └── index.css
├── server/
│   ├── index.js
│   └── database.sqlite (otomatik oluşturulur)
├── package.json
├── .env
├── .gitignore
└── README.md

1. Ana sayfada "Giriş Yap" butonuna tıklayın
2. E-posta ve şifrenizi girin
3. "Giriş Yap" butonuna tıklayın

1. Dashboard'da "Kullanıcılar" menüsüne tıklayın
2. "Yeni Kullanıcı" butonuna tıklayın
3. Form alanlarını doldurun
4. "Kaydet" butonuna tıklayın

1. Kullanıcı listesinde düzenleme ikonuna tıklayın
2. Form alanlarını güncelleyin
3. "Güncelle" butonuna tıklayın

• JWT token tabanlı kimlik doğrulama
• bcrypt ile şifre hashleme
• SQL injection koruması
• Input validation
• CORS yapılandırması

npm run build
vercel --prod

heroku create
git push heroku main

railway login
railway init
railway up

1. Fork yapın
2. Feature branch oluşturun (git checkout -b feature/amazing-feature)
3. Commit yapın (git commit -m 'Add amazing feature')
4. Push yapın (git push origin feature/amazing-feature)
5. Pull Request oluşturun

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

Zeki Köse

• E-posta: [email protected]
• GitHub: @zekikose

• React.js
• Express.js
• SQLite
• Lucide React
• Tailwind CSS (inspiration)

⭐ Bu projeyi beğendiyseniz yıldız vermeyi unutmayın!