QR Code Generator - Aplikacija za Registraciju Korisnika

Web aplikacija koja omogućava korisnicima registraciju i kreiranje neograničenog broja personalnih QR kodova.

Značajke

• 🔐 Registracija korisnika - Sigurna registracija s bcrypt hashiranjem lozinki
• 🔑 Prijava - Autentifikacija postojećih korisnika
• 📱 Višestruki QR kodovi - Kreirajte neograničen broj QR kodova
• ✏️ Prilagodljiv sadržaj - Dodajte URL-ove, tekst, kontakt podatke ili bilo što drugo
• 💾 MongoDB baza podataka - Pohrana svih korisničkih podataka i QR kodova
• 🗑️ Upravljanje QR kodovima - Brišite nepotrebne QR kodove
• 🎨 Moderna UI - Responzivni dizajn s dark mode podrškom
• ⬇️ Preuzimanje QR koda - Preuzmite bilo koji QR kod kao PNG sliku
• 🔍 Pregled svih QR kodova - Grid prikaz svih vaših QR kodova

Tehnologije

• Next.js 15 - React framework
• TypeScript - Tipiziran JavaScript
• MongoDB - NoSQL baza podataka
• Mongoose - MongoDB ODM
• QRCode - QR kod generator
• Bcrypt - Hashiranje lozinki
• Tailwind CSS - CSS framework

Instalacija

1. Kloniraj repozitorij:

git clone [url-repozitorija]
cd qrcodegen

2. Instaliraj dependencies:

npm install

3. Kreiraj .env.local datoteku s MongoDB connection stringom:

MONGODB_URI=mongodb+srv://filip:ezxMAOvcCtHk1Zsk@cluster0.9wkt8p3.mongodb.net/qrcodegen

4. Pokreni development server:

npm run dev

5. Otvori http://localhost:3000 u browseru

Kako funkcionira

1. Registracija: Korisnik unosi ime, email i lozinku
2. Prijava: Korisnik se prijavljuje i vidi svoje kontrolno ploču
3. Kreiranje QR kodova:
   • Kliknite "Kreiraj novi QR kod"
   • Unesite naslov (npr. "Moja web stranica")
   • Unesite sadržaj (URL, tekst, vCard, WiFi podaci, itd.)
   • Kliknite "Kreiraj QR kod"
4. Pregled QR kodova: Svi kreirani QR kodovi prikazani su u grid formatu
5. Preuzimanje: Kliknite "Preuzmi" na bilo kojem QR kodu da ga sačuvate
6. Brisanje: Kliknite ikonu smeća da obrišete QR kod

Primjeri sadržaja za QR kodove

📱 URL

https://www.example.com

📧 Email

mailto:email@example.com

📞 Telefon

tel:+385911234567

💬 SMS

sms:+385911234567?body=Hello!

📍 Lokacija

geo:45.815399,15.966568

📶 WiFi

WIFI:T:WPA;S:YourNetworkName;P:YourPassword;;

👤 vCard

BEGIN:VCARD
VERSION:3.0
FN:Ime Prezime
TEL:+385911234567
EMAIL:email@example.com
END:VCARD

API Endpointi

POST /api/register

Registracija novog korisnika

{
  "name": "Ime Prezime",
  "email": "email@example.com",
  "password": "lozinka123"
}

POST /api/login

Prijava postojećeg korisnika

{
  "email": "email@example.com",
  "password": "lozinka123"
}

POST /api/qrcode

Kreiranje novog QR koda

{
  "userId": "user_id_here",
  "title": "Naslov QR koda",
  "content": "Sadržaj koji će biti enkodiran u QR kod"
}

DELETE /api/qrcode

Brisanje QR koda

{
  "userId": "user_id_here",
  "qrCodeId": "qrcode_id_here"
}

Struktura projekta

qrcodegen/
├── app/
│   ├── api/
│   │   ├── register/route.ts    # API za registraciju
│   │   ├── login/route.ts       # API za prijavu
│   │   └── qrcode/route.ts      # API za QR kodove (POST, DELETE)
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx                 # Glavna stranica
├── lib/
│   └── mongodb.ts               # MongoDB konekcija
├── models/
│   └── User.ts                  # Mongoose User model s QR kodovima
├── .env.local                   # Environment varijable
└── package.json

Database Schema

User Model

{
  name: String,
  email: String (unique),
  password: String (hashed),
  qrCodes: [
    {
      title: String,
      content: String,
      qrCodeImage: String (base64),
      createdAt: Date
    }
  ],
  createdAt: Date
}

Sigurnost

• ✅ Lozinke se hashiraju prije pohrane u bazu
• ✅ Validacija svih input polja
• ✅ Provjera duplikata email adresa
• ✅ Minimalna dužina lozinke (6 znakova)
• ✅ Environment varijable za osjetljive podatke
• ✅ High error correction level za QR kodove

Razvoj

# Development mode
npm run dev

# Build za produkciju
npm run build

# Pokreni production server
npm start

# Linting
npm run lint

Mogućnosti nadogradnje

• 🔒 Session management s JWT tokenima
• 📊 Analytics - praćenje skeniranja QR kodova
• 🎨 Prilagodba dizajna QR koda (boje, logo)
• 📁 Kategorije za organizaciju QR kodova
• 🔗 Kratki URL-ovi za QR kodove
• 📤 Dijeljenje QR kodova putem emaila/socijalnih mreža
• 📈 Statistika korištenja

Licence

MIT