Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pheralb/frame
🎨 Generate images with beautiful gradients. Built with Next.js & Zustand.
https://github.com/pheralb/frame
gradients images nextjs screenshot tailwindcss tool vercel zustand
Last synced: 2 months ago
JSON representation
🎨 Generate images with beautiful gradients. Built with Next.js & Zustand.
- Host: GitHub
- URL: https://github.com/pheralb/frame
- Owner: pheralb
- License: mit
- Created: 2023-03-11T21:47:40.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-05-31T20:03:42.000Z (over 1 year ago)
- Last Synced: 2024-10-01T00:43:18.148Z (3 months ago)
- Topics: gradients, images, nextjs, screenshot, tailwindcss, tool, vercel, zustand
- Language: TypeScript
- Homepage: https://myframe.vercel.app
- Size: 1.56 MB
- Stars: 25
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
[](https://nodejs.org/about/releases)
## ⚙️ Stack
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app):
- [**Next.js 13 /app directory** + **Typescript**](https://nextjs.org/) - The React Framework for the Web.
- [**Tailwind CSS** + **Tailwind-Merge** + **clsx**](https://tailwindcss.com/) - A utility-first CSS framework for rapid UI development.
- [**Class Variance Authority** + **Radix-UI** primitives & **shadcn/ui** components](https://ui.shadcn.com/) - Beautifully designed components that you can copy and paste into your apps.
- [**Iconoir** icons](https://iconoir.com/) - An open-source library with 1300+ unique SVG icons, designed on a 24x24 pixels grid.
- [**Sonner**](https://sonner.emilkowal.ski/) - An opinionated toast component for React.
- [**react-dropzone**](https://react-dropzone.js.org/) - Simple React hook to create a HTML5-compliant drag'n'drop zone for files.
- [**react-resizable**](https://github.com/react-grid-layout/react-resizable) - A simple React component that is resizable with a handle.
- [**react-hotkeys-hook**](https://github.com/JohannesKlauss/react-hotkeys-hook) - React hook for using keyboard shortcuts in components.
- [**html2canvas**](https://html2canvas.hertzen.com/) - Screenshots with JavaScript.
- [**Zustand**](https://zustand-demo.pmnd.rs/) - A small, fast and scalable bearbones state-management solution using simplified flux principles.
## 🤔 Known issues/roadmap
- [x] Export images - fix white background.
- [x] Create modal to display user preferences.
- [x] Resolve image resizing.
- [ ] Improve responsive.
- [x] Allow downloading in more file types.
- [x] Upgrade to Next.js 13 /app directory.
## 🚀 Getting Started
**Recommended extensions for VSCode:**
- [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss).
- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode).
- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint).
1. Clone or [fork](https://github.com/pheralb/frame/fork) the repository:
```bash
[email protected]:pheralb/frame.git
```
2. Install dependencies:
```bash
npm install
# or
yarn install
# or
pnpm install
# or
ultra install
```
3. Run the development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
ultra dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result 🚀.
## ☁️ Deploy
- [https://myframe.vercel.app/](https://myframe.vercel.app/).
## 📄 License
- [MIT License](https://github.com/pheralb/frame/blob/main/LICENSE).