Hey there! Welcome to our collection of fun tools for Blue Archive fans.
We created Blue Archive Tools as a passion project for fellow Blue Archive players. Right now, we've got a pretty cool Sticker Maker up and running, and we're excited to add more stuff like a Momotalk Generator and Music Archive soon!
- Pick Your Character: We've included tons of your favorite Blue Archive characters
- Add Your Text: Type whatever you want and make it look just right
- Move Stuff Around: Use sliders or just drag things where you want them
- Make It Pretty: Change the font size, spacing, colors, and add outlines
- Get Creative with Layout: Put text behind characters, rotate it, change backgrounds
- Save It: Just hit download and your sticker is ready to share!
- Create your own Momotalk conversations with your favorite characters
- Listen to all those catchy Blue Archive tunes in one place
So you're curious about the tech? Here's what we used:
- Next.js 14: This powerhouse let us create both server and client components
- TypeScript: Helps us catch bugs before they happen
- Tailwind CSS: Made styling super quick and consistent
- Radix UI: Gave us accessible components that we could customize
- Lucide Icons: These icons just look nice, don't they?
- Custom Components: We built everything to fit the Blue Archive vibe
- Works Everywhere: Use it on your phone, tablet, or computer
- Consistent Look: Everything follows the same style guide
- Supabase Auth: Log in with your Google account
- Vercel: Handles all the hosting magic for us
app/
├── (main)/ # Main application routes
│ ├── momotalk/ # Momotalk simulator
│ ├── music/ # Music archive
│ └── sticker/ # Sticker maker
├── @modal/ # Intercepting routes for modals
├── components/ # Reusable UI components
│ ├── auth/ # Authentication components
│ ├── layouts/ # Layout components
│ ├── momotalk/ # Momotalk-specific components
│ ├── music/ # Music-related components
│ ├── sticker/ # Sticker maker components
│ └── ui/ # Base UI components
├── config/ # Application configurations
├── data/ # Static data for the application
├── lib/ # Utility functions and services
│ ├── auth/ # Authentication utilities
│ └── supabase/ # Supabase client config
├── providers/ # React context providers
└── styles/ # Global styles
The Sticker Maker allows users to:
- Select a character from the Blue Archive universe
- Add custom text with various styling options
- Position and rotate text using intuitive controls
- Download the finished sticker as a PNG file
The application uses a custom Canvas component that:
- Renders characters and text on an HTML5 canvas
- Provides real-time preview while editing
- Supports transparent backgrounds for versatile use
The application is fully responsive with:
- Mobile-optimized controls using tabs interface
- Desktop layout with side-by-side preview and controls
- Adaptive canvas sizing based on screen dimensions
User authentication is implemented using:
- Supabase Authentication
- Google OAuth provider
- Server-side session management
- Node.js 18+
- npm, yarn, or pnpm
- Grab the code
git clone https://github.com/TraFost/ba-tools.git
cd blue-archive-tools- Install all the goodies
npm install
# or
yarn install
# or
pnpm install- Create your secret sauce
Make a
.envfile with these ingredients:
SUPABASE_PROJECT_URL=your_supabase_url
SUPABASE_API_KEY=your_supabase_key
SUPABASE_DB_PASSWORD=your_db_password
SUPABASE_CALLBACK_URL=your_callback_url
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
- Fire it up!
npm run dev
# or
yarn dev
# or
pnpm run dev- Head to http://localhost:3000 and have fun!
This project is licensed under the MIT License - see the LICENSE file for details.
- Galih Aditya Dwisevi - Original Idea & Contributor
- Rahman Nurudin - Contributor
- Blue Archive game by Nexon and Yostar
- All the amazing art creators from the Blue Archive community
Note: Blue Archive Tools is a fan-made project and is not affiliated with Nexon or Yostar.