This is a Next.js application that demonstrates a comprehensive authentication system with user profile management and image gallery features.
-
Authentication System
- User registration and login with credentials
- Session management with NextAuth.js
- Password encryption with bcrypt
-
User Profile Management
- Profile picture upload and management
- Username editing
- Password changing
- Account deletion
-
Photo Gallery
- Image upload to Cloudinary
- Image preview before upload
- Gallery view of all uploaded images
- Image deletion
- Next.js 14 - React framework
- NextAuth.js - Authentication for Next.js
- Prisma - Database ORM
- Cloudinary - Image storage and management
- Tailwind CSS - Styling
- Shadcn UI - UI components
- Sonner - Toast notifications
- Node.js 18+ installed
- A Cloudinary account for image storage
- A database (this project uses PostgreSQL by default)
Create a .env file in the root directory with the following variables:
DATABASE_URL="your-database-connection-string"
NEXTAUTH_SECRET="your-nextauth-secret" NEXTAUTH_URL="http://localhost:3000"
CLOUDINARY_CLOUD_NAME="your-cloud-name" CLOUDINARY_API_KEY="your-api-key" CLOUDINARY_API_SECRET="your-api-secret"
# Install dependencies
npm install
# Run Prisma migrations
npx prisma migrate dev
# Start the development server
npm run dev
Open http://localhost:3000 with your browser to see the application.
- /src/app - Application routes
- /src/components - Reusable UI components
- /src/lib - Utility functions, auth configuration
- /prisma - Database schema and migrations
- / - Home page with login form
- /signup - Registration page
- /dashboard - Main dashboard with user information
- /dashboard/profile - User profile management
- /dashboard/account - Photo gallery management
This is a demonstration project showcasing authentication and file management capabilities using the Next.js App Router. It's intended for educational purposes and as a starting point for similar applications.