A fun and interactive photo editor that lets you add Dojo Coding hats to your photos! Upload your image, position and customize the hat overlay, and download your creation.
- 🎩 Hat Overlay: Add Dojo Coding hats to any photo
- 🎄 Christmas Mode: Toggle festive Christmas hat with animated background decorations
- 🎨 Interactive Controls:
- Rotate hat left/right
- Scale up/down
- Flip horizontally
- Drag to reposition
- Reset to default position
- 💾 Save & Download: Export your edited image as PNG
- 📱 Responsive Design: Works on desktop and mobile devices
- ✨ Modern UI: Clean white background with Dojo Coding branding
- Node.js (v14 or higher)
- Yarn package manager
- Clone the repository:
git clone <repository-url>
cd dojo-hat- Install dependencies:
yarn install- Start the development server:
yarn startThe app will open at http://localhost:3000
Runs the app in development mode at http://localhost:3000. The page will reload automatically when you make changes.
Builds the app for production to the build folder. The build is optimized and ready for deployment.
Launches the test runner in interactive watch mode.
Builds and deploys the app to GitHub Pages (configured in package.json).
- Upload an Image: Click the file input to select an image from your device
- Position the Hat: Click and drag the hat overlay to position it on your photo
- Customize:
- Use rotation buttons to rotate the hat
- Use scale buttons to make it bigger or smaller
- Use flip button to mirror the hat (disabled in Christmas mode)
- Use reset button to return to default position
- Christmas Mode: Toggle the checkbox at the top to switch to festive Christmas hat with animated decorations
- Save: Click "Save Image" to download your edited photo
- React 18.3.1
- TypeScript 4.4.2
- Tailwind CSS - Styling
- Create React App - Build tooling
The app is configured to deploy to GitHub Pages. Run:
yarn deployThis will build the app and deploy it to the gh-pages branch.
© 2024 Dojo Coding™