Designr

Designr is a fullstack AI-Powered SaaS Graphic design tool, developed to speed up prototyping of custom designs. Leverage our vast collection of community templates to speed your next design idea.

The core logic for the editor is being rewritten into a hook that encapulates all the editor functionality. The editor is currently in a broken state as a result of this.

I did a course in my final year called Graphics and Animation, the information taught there did not really scratch the surface, so I wanted to do a deep dive into the topic by building this application which also takes some inspiration from Figma and Canva in terms of design.

It's a monorepo powered by TurboRepo with the following project structure:

• apps/web: 🌐 The main web application
• packages/use-editor: 🎨 A hook that encapsulates all the editors functionality
• packages/ui: 💅 The shared Shadcn UI components and Tailwind CSS config used by both the web app and editor
• packages/eslint-config: 📏 The ESLint config used throughout the app
• packages/typescript-config: 📘 Shared TypeScript configuration throughout the app
• packages/validators: 🛡️ Shared validation functions used throughout the app

Designr makes use of an up to date tech stack to support its features:

• Frontend: Next js, Tailwind CSS(v3), Fabric.js, Zustand
• Backend: Convex
• Authentication: Clerk
• Payments: Stripe (for handling subscriptions)
• Media: Cloudinary (for image storage) and Unsplash API (for stock images)

Ensure you have the following installed:

• Node.js (v18 or higher)
• TurboRepo for managing the monorepo
• npm for package management

1. Clone the Repository:

   git clone https://github.com/yourusername/designr.git
   cd designr

2. Install Dependencies:

   npm install

3. Running the Web Application: Navigate to apps/web and start the Next.js server:

   cd apps/web
   npm dev

1. Running Unit Tests:

   npm test

2. Linting and Formatting:

   npm lint
   npm format

• Build all packages:

  npm turbo run build

• Clean all packages:

  npm turbo run clean

• Run dev for all packages:

  npm turbo run dev

The app is deployed on Vercel, which has awesome support for monorepos.

If you want to contribute, please follow these steps:

1. Fork the repository.
2. Create a new branch (git checkout -b feature-branch-name).
3. Commit your changes (git commit -m 'Add some feature').
4. Push to the branch (git push origin feature-branch-name).
5. Open a pull request.

If you’d like to discuss what you want to contribute, please feel free to file an issue!

• TurboRepo Documentation
• Clerk Documentation
• Convex Documentation

Happy coding! 😊 Let’s create something amazing together with Designr!