🌐 Website | 🛠️ API Docs | 💻 Frontend Code

Design Without Limits

Developed with the software and tools below.

• 📋 Overview
• 🚀 Tech Stack
• 💻 Getting Started
  • ⚙️ Installation
  • 🕜 Running Webster
• 📂 Project Structure
• 🔧 Environment Variables
• 🤝 Contributing
• 📄 License

Webster is a comprehensive design tool platform that empowers teams and individuals to create, edit, and manage professional designs directly in the browser. Featuring a high-performance canvas-based editor built with React and Konva.js, Webster offers real-time collaboration, advanced asset management, and multi-format export capabilities. Its modern, intuitive interface and robust toolset make it ideal for designers seeking flexibility and power.

• Canvas-Based Editor: High-performance, interactive editor for complex shape manipulation and rendering (60 FPS with Konva.js)
• Asset Management: Upload, organize, and search assets in a cloud-synced library
• Multi-Format Export: Export designs in PNG, SVG, PDF, and more with custom resolution settings
• Performance Optimized: Virtualized canvas and optimized rendering for handling 1000+ objects
• User Authentication: Secure login, registration, and account management
• Project Management: Create, open, duplicate, and manage design projects
• Responsive Design: Seamless experience across all devices
• Modern UI/UX: Minimalistic, user-friendly interface

• Core: TypeScript, React, Vite, Konva.js
• State Management: Zustand
• Styling: Tailwind CSS, shadcn/ui, Radix UI
• Icons: Lucide React
• API Communication: KY
• Data Fetching: React Query
• Form Handling: React Hook Form, Zod
• Date Handling: Day.js
• Development: ESLint, Prettier, PostCSS, Husky
• Containerization: Docker
• Deployment: Vercel

1. Clone the webster-frontend repository:

git clone https://github.com/mkloz/webster-frontend

2. Change to the project directory:

cd webster-frontend

3. Install the dependencies:

npm install

Use the following command to run Webster in development mode:

npm run dev

The application will be available at http://localhost:3000 (or the port specified in your Vite configuration).

To build the application for production:

npm run build

To preview the production build locally:

npm run preview

src/
├── assets/           # Static assets like logos
├── config/           # Application configuration
├── modules/          # Feature-based modules
│   ├── auth/         # Authentication related components
│   ├── canvas/       # Canvas editor and related components
│   ├── home/         # Home page and layout
│   ├── project/      # Project management features
│   ├── shared/       # Shared pages and utilities
│   ├── user/         # User profile and settings
│   └── ...
├── shared/           # Shared utilities, components, and hooks
│   ├── api/          # API client setup
│   ├── components/   # Reusable UI components
│   ├── hooks/        # Custom React hooks
│   ├── lib/          # Library configurations
│   ├── store/        # Global state management
│   ├── types/        # TypeScript type definitions
│   ├── utils/        # Utility functions
│   └── validators/   # Form validation schemas
├── styles/           # Global styles
└── main.tsx          # Application entry point

The application may require the following environment variables:

VITE_API_URL=your_api_url
VITE_GOOGLE_CLIENT_ID=your_google_client_id

Create a .env file in the root directory and add these variables with your specific values.

Contributions are welcome! Here are several ways you can contribute:

• Submit Pull Requests: Review open PRs, and submit your own PRs.
• Join the Discussions: Share your insights, provide feedback, or ask questions.
• Report Issues: Submit bugs found or log feature requests for Webster.

git clone https://github.com/mkloz/webster-frontend

git checkout -b new-feature-x

git commit -m 'Implemented new feature x.'

git push origin new-feature-x

This project is licensed under the MIT License - see the LICENSE file for details.