Kiraku is an open-source fashion sharing SNS that lowers the barrier to posting by combining short photo posts, long-form blogs, and social features in a Next.js and GraphQL stack.
What is Kiraku?
Kiraku is a full-stack web application for sharing fashion content, designed around the concept "fashion, casually." It runs on Next.js with TypeScript, uses Chakra UI and Emotion for styling, and connects to a Hasura GraphQL API over PostgreSQL plus Firebase for authentication, storage, and serverless functions. The project is maintained by developer s-kawabe and published on GitHub, with a live test-login available at kiraku.app/about.
What makes Kiraku stand out?
- Dual content formats — Users can post a single image with a caption up to 250 characters, or write unlimited-length blog entries using a WYSIWYG editor built with draft-js and react-draft-wysiwyg.
- Real-time interactions — Comments are implemented with GraphQL Subscriptions, so new comments appear without a page refresh, while likes animate with framer-motion.
- Multiple authentication providers — Sign-in is supported via Twitter, Google, or Email through Firebase Authentication; all forms use react-hook-form for validation.
- Image processing pipeline — Images are compressed client-side with browser-image-compression before being uploaded to Firebase Storage, and profile thumbnails can be cropped with react-image-crop.
- Tagging and discovery — Posts and blogs can carry brand and topic tags created with react-tag-input, and the header search bar queries post content, blog titles, and user names.
- Full responsive design — Every page is fully responsive, as noted in the development challenges, and built with object-oriented UI principles.
- Complete developer tooling — The repo includes Storybook for component development, Jest and React Testing Library for tests, ESLint/Prettier for code quality, and Husky for pre-commit hooks.
Who should use Kiraku?
- Fashion beginners and casual users — People who feel excluded by high-quality, full-coordinate photos on other fashion SNS can share a single item or simple outfit with a short caption.
- Fashion bloggers and enthusiasts — Users who want to write long-form style guides or brand reviews can use the blog feature without length restrictions.
- Full-stack developers — Developers interested in a real-world example of Next.js with TypeScript, Firebase Authentication + Storage, Hasura permissions, GraphQL Subscriptions, Apollo state management, and SSG/ISR can study the open-source codebase.
What can you do with Kiraku?
- Post a quick outfit shot: Upload one photo, add up to 250 characters of text, and optionally tag a brand or topic before publishing.
- Write a long-form fashion blog: Compose rich-text articles of any length, attach images, and share your knowledge about brands, styling, or fashion trends.
- Engage with the community: Comment on posts and blogs in real time, like content with animated feedback, follow other users, and browse their profiles to see their posts, likes, followers, and followees.
How does Kiraku work?
Sign up or log in using Twitter, Google, or Email. After authentication, you can create posts, write blogs, tag brands and topics, comment, like, and follow others. The frontend fetches data through Apollo Client from a Hasura GraphQL endpoint, while images are stored in Firebase Storage and user auth is handled by Firebase Authentication. The live app offers a test-login on the About page so you can explore all functions without registering.
FAQ
Is Kiraku free?
Kiraku's source code is open-source on GitHub. The live site at kiraku.app/about provides a test-login, and there is no mention of any paid tier or premium features.
What do I need to use Kiraku?
You only need a browser to access the live app. To interact with the community, sign in with Twitter, Google, or Email, or use the test-login account provided on the About page.
Can I post without logging in?
Posting, commenting, and liking all require a logged-in account. Visitors who are not signed in can browse the About page and see the app's concept, but cannot create content.
Which database does Kiraku use?
The backend uses Hasura on PostgreSQL. Hasura exposes a GraphQL API, and the app connects to it via Apollo Client. Firebase (Authentication, Storage, Functions) handles user identity, image storage, and serverless API logic.
