A simple Web Page Builder built using Vue.js.
This project was created as a practice project to explore and understand various concepts of Frontend Development — including component-based architecture, responsive design, and client-side authentication.
This project provides an interactive page builder that allows users to create and preview web pages in real time.
You can add various elements such as:
- 🖼️ Images
- 🗂️ Cards
- 📝 Headings
- ➕ And more...
It’s designed to simulate a real-world page builder, giving an opportunity to experiment with UI composition, state management, and responsive design using Vue.js.
- Add, edit, and arrange web page components.
- Supports images, cards, text blocks, and more.
- Built with reusability and modularity in mind.
- Switch between Mobile, Desktop, and Full View.
- Helps you test responsiveness of the page being built directly in the editor.
- Includes a Login Page and Verification Page.
- Authentication handled entirely on the frontend using Vue’s built-in Navigation Guards.
- Login uses fixed password and verification code (for demonstration only).
Through building this project, I gained hands-on experience with:
- Core Vue.js concepts (components, props, reactivity, and routing)
- Implementing Navigation Guards for route protection
- Designing and testing responsive layouts
- Managing component communication and UI states
- Structuring a small-scale Vue.js project
| Category | Technology |
|---|---|
| Framework | Vue.js |
| Routing | Vue Router |
| Styling | CSS / Tailwind (if used) |
| Authentication | Vue Navigation Guards |
| Build Tool | Vite / Vue CLI (depending on setup) |
# Install dependencies
npm install
# Run development server
npm run serve
# or (if using Vite)
npm run dev
# Build for production
npm run build