Negarkhone Image Gallery

A modern image gallery application built with Next.js, primarily as a learning project to explore Next.js features and capabilities.

Features

• User Authentication: Secure user login and session management using NextAuth.js.
• Image Uploads: Upload and manage images seamlessly with UploadThing.
• Album Management: Create and organize images into custom albums.
• Responsive Gallery: A beautiful, responsive grid layout for viewing images and albums.
• Interactive UI: Built with React, TypeScript, and Tailwind CSS for a smooth user experience.

Tech Stack

• Frontend: Next.js 15, React 19, TypeScript
• Styling: Tailwind CSS
• Authentication: NextAuth.js
• Database: Prisma with PostgreSQL
• Image Upload: UploadThing
• State Management: Zustand
• UI Components: Custom components with clsx for conditional styling

Getting Started

Prerequisites

• Node.js 18 or later
• npm, yarn, pnpm, or bun

Installation

1. Clone the repository:

   git clone https://github.com/Gnkalk/negarkhone.git
   cd negarkhone

2. Install dependencies:

   npm install
   # or
   yarn install
   # or
   pnpm install
   # or
   bun install

3. Set up the database:

   npx prisma generate
   npx prisma db push

4. Configure environment variables: Create a .env.local file in the root directory and add the following:

   NEXTAUTH_URL=http://localhost:3000
   NEXTAUTH_SECRET=your-secret-key
   UPLOADTHING_SECRET=your-uploadthing-secret
   UPLOADTHING_APP_ID=your-uploadthing-app-id
   GITHUB_CLIENT_ID=your-github-client-id
   GITHUB_CLIENT_SECRET=your-github-client-secret

   You can generate a secret for NextAuth with:

   openssl rand -base64 32

5. Run the development server:

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev
   # or
   bun dev

6. Open http://localhost:3000 with your browser to see the result.

Project Structure

negarkhone/
├── app/                    # Next.js app directory
│   ├── _components/        # React components
│   ├── api/                # API routes
│   ├── auth.ts             # NextAuth configuration
│   ├── layout.tsx          # Root layout
│   ├── page.tsx            # Home page
│   └── server/             # Server-side utilities (queries, actions, db)
├── public/                 # Static assets
├── tailwind.config.ts      # Tailwind CSS configuration
├── tsconfig.json           # TypeScript configuration
└── package.json            # Project dependencies and scripts

Key Components

• GalleryControls: Manages gallery view and filtering.
• UploadComponent: Handles image uploads.
• SingleImage: Displays individual images.
• CreateAlbumButton: UI for creating new albums.
• Account: User account management component.

API Routes

• /api/auth/[...nextauth]: Handles authentication.
• /api/uploadthing/: Manages image upload endpoints.

Database Schema

The application uses Prisma to manage the database schema. The main entities are:

• User: Stores user information.
• Image: Stores image metadata and URLs.
• Album: Stores album information and relationships to users and images.

Deployment

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out the Next.js deployment documentation for more details.

Other Deployment Options

• Docker: You can create a Dockerfile for containerized deployment.
• Traditional Servers: Deploy using Node.js on services like AWS, Google Cloud, or DigitalOcean.

Contributing

1. Fork the repository.
2. Create a feature branch (git checkout -b feature/amazing-feature).
3. Commit your changes (git commit -m 'Add some amazing feature').
4. Push to the branch (git push origin feature/amazing-feature).
5. Open a Pull Request.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Acknowledgments

• Next.js for the React framework.
• Tailwind CSS for utility-first CSS.
• Prisma for the database ORM.
• UploadThing for file uploads.
• NextAuth.js for authentication.