A modern web app to track, organize, and remember every location where you drop packages or items.

DropZone was created as a full-stack practice project to explore real-world implementations of Two-Factor Authentication (2FA) and Google Maps API integration.

• Secure Credentials login with NextAuth & optional Two-Factor Authentication (2FA).
• Google Maps API integration to visualize all your dropoffs on an interactive map.
• Location search autocomplete, current location with Geolocation API, Marker clustering for better visualization.
• Search, edit, and manage your dropoff entries.

• Nextjs
• TailwindCSS
• Google maps API

• PostgreSQL
• Prisma ORM
• NextAuth
• Zod
• Vercel
• Neon

• Node.js
• npm
• PostgreSQL (ensure your database is running)
• Basic knowledge of using a terminal (steps are beginner-friendly)

git https://github.com/3antozz/dropzone
cd dropzone

cd api
npm install

1- Create a .env file in the node/ directory (based on .env.example) and fill in the required environment variables such as:

• Database connection URL
• Google maps KEY & map ID
• Auth secret

2- Start the server:

npm start

1- Once the server is running:

2- Visit http://localhost:3000 in your browser

• tailwindcss – A utility-first CSS framework.
• @vis.gl/react-google-maps – A TypeScript library to integrate the Maps JavaScript API into a React application.
• @googlemaps/markerclusterer – The library creates and manages per-zoom-level clusters for large amounts of markers.
• use-debounce – Debounce functions - used in search query.
• clsx – utility for constructing className strings conditionally.

• next-auth – Authentication for Next.js.
• otplib – Time-based (TOTP) and HMAC-based (HOTP) One-Time Password library.
• qrcode – QR Code generator.
• bcryptjs – For securing passwords by hashing and salting.
• prisma/client – ORM - Auto-generated and type-safe query builder for Node.js.
• zod – TypeScript-first schema validation with static type inference