Mockly 🎨

Create Stunning Screenshots in Seconds

Mockly is an open-source tool that allows developers to create professional-looking screenshots and mockups with ease. With Mockly, you can pick, place, and zoom—done. It's designed for fast, stress-free mockups for developers who'd rather code than design.

✨ Features

• Instant Mockups: Upload, tweak, done. It's like magic, but without the wand.
• Multi-device Preview: Instantly see how your designs look on any screen size—because nobody has time for resizing.
• Zoom & Place: Put your screenshots exactly where you want, and zoom in like a pro—minus the struggle.
• Text & Style: Add text, pick your font, and make it pop. Because plain screenshots are so last year.
• No Login Required: Start creating immediately without any sign-up process.
• No Watermarks: Your designs, your brand—no unwanted additions.
• Free to Use: Powerful features accessible to everyone at no cost.

🚀 Getting Started

Prerequisites

• Node.js (v14 or later)
• npm or yarn

Installation

1. Clone the repository:

   git clone https://github.com/suryanshsingh2001/mockly.git

2. Navigate to the project directory:

   cd mockly

3. Install dependencies:

   npm install
   # or
   yarn install

4. Start the development server:

   npm run dev
   # or
   yarn dev

5. Open http://localhost:3000 in your browser to see the application.

🖱️ Usage

1. Navigate to the editor page.
2. Upload your screenshot or choose from available templates.
3. Use the intuitive interface to adjust, zoom, and place your image.
4. Add text, choose fonts, and style as needed.
5. Preview your design on multiple device sizes.
6. Download your finished mockup.

🔮 Future Scope

We have exciting plans for the future of Mockly, and we welcome contributions in these areas:

1. Video Editor: We're planning to expand Mockly's capabilities to include a video editor that follows the same philosophy as our image editor—quick, intuitive, and designed for developers who want to create professional-looking video content without the complexity of traditional video editing software.

2. AI-Assisted Design: Implementing AI to suggest design improvements and automate repetitive tasks.

3. Template Marketplace: A platform for users to share and download custom templates.

4. Collaboration Features: Real-time collaboration tools for team projects.

5. Plugin System: Allowing developers to extend Mockly's functionality with custom plugins.

We encourage contributors to think creatively about these future directions and propose innovative solutions to help bring these ideas to life.

🎉 Hacktoberfest 2024

We're excited to participate in Hacktoberfest 2024! Here's how you can contribute:

📜 Ground Rules

1. Contributions must be meaningful and add value to the project.
2. Follow our code style and best practices.
3. Be respectful and collaborative in discussions.
4. Test your changes thoroughly before submitting a PR.

🛠️ How to Contribute

1. Fork the repository to your GitHub account.
2. Create a new branch for your feature or bug fix:

   git checkout -b feature/your-feature-name

   or

   git checkout -b fix/your-bug-fix-name

3. Make your changes, ensuring they align with the issue template if addressing a specific issue.
4. Commit your changes with a clear and descriptive commit message.
5. Push your branch to your forked repository:

   git push origin feature/your-feature-name

6. Open a Pull Request (PR) to our main branch.

🔄 Pull Request Process

1. Ensure your PR description clearly describes the problem and solution. Include the relevant issue number if applicable.
2. Include screenshots or GIFs in your PR if you've made UI changes.
3. Make sure your code is properly formatted and passes all tests.
4. Your PR will be reviewed by maintainers. Be open to feedback and make necessary changes.
5. Once approved, your PR will be merged into the main codebase.

📝 Issue Templates

When creating a new issue or PR, please use our provided templates:

• For bug reports: Bug Report Template
• For feature requests: Feature Request Template
• For pull requests: Pull Request Template

🐛 Existing Issues and Contributions

We encourage contributors to explore our existing issues and contribute to them. Here are some ways you can help:

1. Bug Fixes: Look for issues labeled bug and help us squash them!
2. Feature Implementation: Issues labeled enhancement are great opportunities to add new features to Mockly.
3. Documentation: Help us improve our docs by addressing issues labeled documentation.
4. UI/UX Improvements: If you have design skills, look for issues labeled ui or ux.
5. Performance Optimization: Help make Mockly faster by tackling issues labeled performance.

Don't see an issue that matches your interests? Feel free to create a new issue and discuss your ideas with the community!

We look forward to your contributions and hope you enjoy participating in Hacktoberfest with Mockly!

👥 Contributing

We welcome contributions from the community! Please read our Contribution Guidelines for more details on our year-round contribution process.

🤝 Code of Conduct

We are committed to fostering an inclusive and welcoming community. Please read our Code of Conduct before participating.

📄 License

This project is licensed under the MIT License.

📞 Contact

• Project Maintainer: Suryansh
• Project Website: https://www.mockly.site

🙏 Acknowledgments

• Thanks to all contributors who have helped shape Mockly.
• Built with Next.js and shadcn/ui.
• Icons provided by Lucide.

Made with ❤️ by the Mockly community