A comprehensive studio management suite for tattoo artists and studios, featuring AI-powered design generation, customer management, appointment scheduling, and more.

• 🔐 User Authentication: Secure login system with JWT tokens and role-based access control
• 👥 Multi-User Support: Admin, Artist, and Receptionist roles with different permission levels
• 🤖 AI Tattoo Generator: Generate detailed tattoo design descriptions using Google Gemini AI
• 👥 Customer Management: Secure customer database with contact information and notes
• 📅 Appointment Scheduling: Track appointments with customers, artists, and status updates
• 📧 Email Notifications: Automated appointment confirmations, reminders, and updates
• 💰 Dynamic Pricelist: Manage services with categories, pricing, and duration estimates
• 🖼️ Portfolio Gallery: Showcase your work with images, descriptions, and tags
• ⚙️ Settings Management: Configure API keys and application preferences
• 🔒 Secure Local Storage: All data stored locally using SQLite database

• Frontend: React 18 + Vite
• Backend: Node.js + Express
• Database: SQLite (better-sqlite3)
• Email: Nodemailer
• AI Integration: Google Gemini API
• Styling: Custom CSS with responsive design
• Routing: React Router v6

• Node.js 18.x or higher
• npm or yarn

See QUICKSTART.md for a rapid getting-started guide.

1. Clone the repository

   git clone https://github.com/GizzZmo/Tattoo-Workshop.git
   cd Tattoo-Workshop

2. Install dependencies

   npm install

3. Start the development server

   npm run dev

   This will start both the backend server (port 3001) and frontend dev server (port 3000).

4. Access the application

   • Open your browser and navigate to http://localhost:3000
   • The backend API runs on http://localhost:3001

5. (Optional) Add sample data

   npm run seed

For detailed installation instructions, see INSTALLATION.md.

To use the AI Tattoo Generator feature:

1. Visit Google AI Studio
2. Sign in with your Google account
3. Create a new API key
4. In the application, navigate to Settings
5. Enter your API key and save

To enable email notifications for appointments:

1. Configure SMTP settings via the API or Settings page
2. Supported providers: Gmail, SendGrid, Mailgun, Office 365, etc.
3. Enable appointment confirmations and reminders
4. For detailed setup instructions, see EMAIL-NOTIFICATIONS.md

The dashboard provides an overview of your studio statistics and quick access to all features.

• Add, edit, and delete customer records
• Store contact information, addresses, and custom notes
• Search and filter customers

• Schedule appointments with specific customers
• Assign artists to appointments
• Set duration and add notes
• Track appointment status (scheduled, completed, cancelled)
• Receive email confirmations and reminders automatically

• Create service categories
• Add services with pricing and estimated duration
• Edit and organize your offerings

• Add images of your work
• Include descriptions and artist information
• Tag pieces with relevant keywords
• Organize and showcase your best work

• Enter detailed descriptions of tattoo ideas
• Receive professional design recommendations
• Get style suggestions and placement advice
• View generation history

• npm run dev - Start both frontend and backend in development mode
• npm run dev:client - Start only the frontend dev server
• npm run dev:server - Start only the backend server
• npm run build - Build the application for production
• npm run preview - Preview the production build
• npm run lint - Run ESLint
• npm run seed - Populate database with sample data

Tattoo-Workshop/
├── .github/
│   └── workflows/
│       └── ci-cd.yml          # GitHub Actions workflow
├── public/
│   └── tattoo-icon.svg        # Application icon
├── server/
│   └── index.js               # Express server and API routes
├── src/
│   ├── pages/
│   │   ├── Dashboard.jsx      # Main dashboard
│   │   ├── Customers.jsx      # Customer management
│   │   ├── Appointments.jsx   # Appointment scheduling
│   │   ├── Pricelist.jsx      # Service pricing
│   │   ├── Portfolio.jsx      # Portfolio gallery
│   │   ├── TattooGenerator.jsx # AI generator
│   │   └── Settings.jsx       # Settings page
│   ├── styles/
│   │   └── App.css           # Global styles
│   ├── App.jsx               # Main app component
│   └── main.jsx              # Entry point
├── .eslintrc.cjs             # ESLint configuration
├── .gitignore                # Git ignore rules
├── index.html                # HTML template
├── package.json              # Dependencies and scripts
├── vite.config.js            # Vite configuration
└── README.md                 # This file

The project includes a CI/CD pipeline that:

• ✅ Runs on push to main/develop branches and pull requests
• ✅ Tests against multiple Node.js versions (18.x, 20.x)
• ✅ Installs dependencies and runs linting
• ✅ Builds the application
• ✅ Uploads build artifacts
• ✅ Deploys to GitHub Pages on main branch

• All customer data is stored locally in a SQLite database
• API keys are stored securely and only used for AI requests
• No data is shared with third parties except Google AI for design generation
• Regular database backups are recommended

Contributions are welcome! Please read CONTRIBUTING.md for details on our code of conduct and the process for submitting pull requests.

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

For a complete documentation index and navigation guide, see DOCUMENTATION.md.

• README.md - This file, general overview
• ABOUT.md - Project overview, mission, and architecture
• QUICKSTART.md - Get started quickly
• INSTALLATION.md - Detailed installation guide
• API.md - Complete API documentation
• EMAIL-NOTIFICATIONS.md - Email notification system guide
• ROADMAP.md - Detailed product roadmap and planned features
• CONTRIBUTING.md - Contribution guidelines
• PROJECT-SUMMARY.md - Complete project summary
• DOCUMENTATION.md - Documentation index and navigation

This project is open source and available under the MIT License.

For issues, questions, or suggestions:

• Open an issue on GitHub
• Check existing documentation
• Review the code comments

Future enhancements planned:

• ✅ Email notifications for appointments (COMPLETED)
• Invoice generation
• Cloud backup integration
• Mobile app version
• Advanced reporting and analytics
• Integration with payment processors
• Booking widget for website integration

For detailed information about each planned feature, including priorities, technical considerations, and benefits, see ROADMAP.md.

• Google Gemini AI for powering the design generator
• React and Vite communities
• All contributors and users

Built with ❤️ for tattoo artists and studios