Framely

Abstract

1. Introduction

Framely is a full-stack Next.js application offering multi-tenancy, custom domain support, and a flexible drag-and-drop web editor.

The open-source drag-and-drop website builder boilerplate.

2. Objective

Framely: The open-source, lightweight, multi-tenant drag-and-drop website editor for modern web applications, powered by Next.js

This project demonstrates how TypeScript, MySQL, Next.js can be applied to a real-world Full Stack Web Development problem.

3. Key Features / Modules

• Authentication: User authentication powered by Clerk.
• Dashboard: Create and view sites.
• Backend Logic for the Website Builder: Core backend functionality for handling website structure and data.
• Drag-and-Drop Website Builder: Fully customizable, user-friendly interface for creating websites.
• Multi-Tenancy: Full support for subdomains

4. Technology Stack

• Next.js: React-based framework for building web applications.
• Tailwind CSS: Utility-first CSS framework for styling.
• Shadcn: UI component library.
• Prisma & MySQL: Database ORM and relational database.
• Clerk Authentication: Secure and flexible user authentication service.
• Umami Analytics: Simple, fast, privacy-focused alternative to Google Analytics.

5. System Requirements

General requirements for this technology stack — check the README for exact versions.

• Node.js (LTS) and npm / yarn / pnpm
• VS Code or any code editor
• Git (to clone the repository)

6. Installation & Setup

git clone https://github.com/belastrittmatter/Framely.git
cd Framely

Full setup instructions are in the project README.

7. Future Enhancements

Suggested extensions you can add to make this your own project.

• Add role-based access control
• Deploy on a VPS or cPanel hosting with a custom domain
• Add automated tests and a CI pipeline

8. Viva / Review Questions

Common questions examiners ask for projects in this domain.

1. Explain the frontend, backend and database layers of this application.
2. How is user authentication and authorisation implemented?
3. Describe the main database tables / collections and their relationships.
4. Which REST APIs or routes are exposed and what do they return?
5. How would you deploy this application to production?

9. Source Code & License

This project is developed by belastrittmatter and published on GitHub under the MIT License. Please follow the license terms and credit the original author when you use or modify this code.