frame

frame copied to clipboard

Create (🚧)  ●  Getting Started  ●  Stack  ●  License

⚙️ Stack

This is a Next.js project bootstrapped with create-next-app:

• Next.js 13 /app directory + Typescript - The React Framework for the Web.
• Tailwind CSS + Tailwind-Merge + clsx - A utility-first CSS framework for rapid UI development.
• Class Variance Authority + Radix-UI primitives & shadcn/ui components - Beautifully designed components that you can copy and paste into your apps.
• Iconoir icons - An open-source library with 1300+ unique SVG icons, designed on a 24x24 pixels grid.
• Sonner - An opinionated toast component for React.
• react-dropzone - Simple React hook to create a HTML5-compliant drag'n'drop zone for files.
• react-resizable - A simple React component that is resizable with a handle.
• react-hotkeys-hook - React hook for using keyboard shortcuts in components.
• html2canvas - Screenshots with JavaScript.
• Zustand - 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.
• Prettier - Code formatter.
• ESLint.

1. Clone or fork the repository:

[email protected]:pheralb/frame.git

2. Install dependencies:

npm install
# or
yarn install
# or
pnpm install
# or
ultra install

3. Run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
ultra dev

Open http://localhost:3000 with your browser to see the result 🚀.

☁️ Deploy

• https://myframe.vercel.app/.

📄 License

• MIT License.