https://github.com/willahh/coloringbook
A React application for creating personalized coloring books from imported or custom-created images.
https://github.com/willahh/coloringbook
es-toolkit react redux-toolkit render storybook tailwindcss vite
Last synced: 3 months ago
JSON representation
A React application for creating personalized coloring books from imported or custom-created images.
- Host: GitHub
- URL: https://github.com/willahh/coloringbook
- Owner: willahh
- Created: 2024-12-10T13:45:38.000Z (5 months ago)
- Default Branch: master
- Last Pushed: 2025-02-19T00:10:47.000Z (3 months ago)
- Last Synced: 2025-02-19T01:23:17.239Z (3 months ago)
- Topics: es-toolkit, react, redux-toolkit, render, storybook, tailwindcss, vite
- Language: TypeScript
- Homepage: https://coloringbook-frontend.onrender.com
- Size: 51.5 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
A React application for creating personalized coloring books from imported or custom-created images.
Explore the docs »
Live Demo
·
Report Bug
·
Request Feature
## Features ✨
- Upload a book cover image
- Import images and convert them into outlines for coloring.
- Draw custom designs directly in the app.
- Organize pages into a book format, ready for printing.
- Simple and intuitive interface for all age groups.
## Usage 📖
Upload an image to convert it into a coloring outline.
Use the drawing tool to create custom designs.
Arrange pages in the desired order.
Download the final book as a PDF.
## Stack 🧰
This project is built with the following technologies and tools:
- **TypeScript**: For type-safe JavaScript development.
- **React**: To build the user interface. Documentation referenced directly in the app - [React Documentation](https://react.dev/reference/react).
- **Server API**: For server-side rendering or data fetching.
- **Client API**: For client-side interactions and components.
- **Vite**: A fast and modern build tool - [Learn more](https://vite.dev/).
- **Tailwind CSS**: For utility-first styling with rapid development.
- **GitHub Actions**: For automated deployment workflows.
- **Supabase**: Open source Firebase alternative [Learn more](https://supabase.com/).
- **Supabase-js**: [Learn more](https://supabase.com/docs/reference/javascript/start).
## Installation 🛠️
1. Clone this repository:
```bash
git clone https://github.com/willahh/coloringbook.git
cd coloringbook
```
2. Install dependencies:
```bash
npm install
```
3. Start the development server:
```bash
npm start
# Open your browser and navigate to http://localhost:3000.
```
## Resources
### Applications
- Backend and frontend apps: [Render Dashboard](https://dashboard.render.com)
- CI/CD: [Render CI/CD](https://dashboard.render.com)
- Database : [neon/dashboard](https://console.neon.tech/app/projects/icy-butterfly-57903853/branches/br-orange-art-a2b2bsgu/tables?database=neondb)
- Assets : [Supabase Storage](https://supabase.com/)
tps://coolors.co/) Tailwind CSS Color Generator
## Build and deployment
### Build for production
- frontend/readme.md#build
- backend/readme.md#build
### Deploy for production
- frontend/readme.md#deploy
- backend/readme.md#deploy
## Acknowledgments 🙏
Inspired by the creative possibilities of coloring books.
Thanks to open-source libraries and the developer community!
## Contact
- [@twitter](https://twitter.com/willahhravel)
- [Coloringbook repository](https://github.com/willahh/coloringbook)
## License
All Rights Reserved
Copyright (c) 2025 William Ravel