/Capstone

AI Tattoo designs generator using Leonardo.Ai API

Primary LanguageJavaScript

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

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

You can start editing the page by modifying app/page.jsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Project

Sign up and login will be done with Google auth and next-auth, data will be stored in MongoDB. React is used in the fron-end and next.js in the backend. The project will generate AI tattoo designs based on a prompt. To generate the images the application will make an API request to Leonardo.AI API.

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 our Next.js deployment documentation for more details.

Dependencies

  • react

  • react-hot-toast

  • react switch

  • mui image modal

  • tabler icons

  • sweetalert2

  • tailwindcss

  • next

  • next-auth

  • mongoose

Features

  • MongoDB cluster
  • Sign Up / Log in / Log out with Google auth and Next-auth session
  • Generate Images with 5 Different Leonardo.AI trained models
  • Toaster Notifications
  • Togler for privacy
  • Image Modal
  • Search Bar
  • Open other users profile
  • Delete account button to delete the account and all the related user designs
  • Middleware that redirects to home page for not sign in users

Midleware

Middleware will get a different cookie if you are working in the localhost or in a vercel live deployment. Change between the cookies in middleware.js use "Secure-next-auth" for live server or "next-auth" for localhost.

Enviroment Variables

An .env file with this variables will be required. Update NEXAUTH_URL and NEXAUTH_URL_INTERNAL with your server url if live version.