🧠 Calenda | Beta Version

A bold step toward redefining productivity.

Calenda is a clean, responsive, and intuitive task management app designed for individuals and teams who value clarity, speed, and control. This Beta version, crafted for a competition, lays the foundation for a powerful, full-featured productivity platform.

---

📚 Table of Contents

• 🚀 Vision
• ⚙️ Tech Stack
• ✨ Features (Beta)
• 📦 Upcoming Features
• 🔗 Links
• 🧪 Beta Usage
• 🛠 Installation (for Developers)
• 🔨 Development Process
  • 🔧 Built With
• 🧠 AI Assistance
• 🧱 Folder Structure
• 👨‍💻 Author
• 📌 Project Status

---

🚀 Vision

Calenda aims to deliver a fully functional, beautifully designed task management platform that balances simplicity with powerful functionality. The beta version establishes core features, setting the stage for a full product with persistent storage, user authentication, and real-time collaboration.

Our mission is to empower users with a tool that streamlines task management, fosters productivity, and adapts seamlessly to individual and team workflows.

---

⚙️ Tech Stack

• HTML5: Semantic, accessible markup
• CSS3: Modular styles with custom properties
• JavaScript (Vanilla): Lightweight, class-based logic with OOP principles
• Material UI Icons: Polished, lightweight icons via CDN
• LocalStorage: Task persistence in the browser
• OOP Principles: Modular, maintainable codebase

---

✨ Features (Beta)

• ✅ Task Management: Add, delete, and manage tasks effortlessly
• 📌 Task Prioritization: Organize tasks by priority
• 🔄 Drag & Drop: Intuitive task reordering across columns
• 🌓 Dark Mode: Toggle between light and dark themes
• 📱 Mobile Support: Responsive design with column switching
• 💾 LocalStorage: Persistent task storage in the browser

---

📦 Upcoming Features

• 🔗 Backend Integration: REST API support via Axios for data syncing
• 👤 User Authentication: Secure login and user management
• ⏰ Due Dates & Notifications: Timely reminders for tasks
• 🔁 Undo/Redo History: Enhanced user control over actions
• 🧪 Session Storage Demo Mode: Try Calenda without saving data
• 📊 Admin Dashboard: Team management and analytics
• 🚀 Progressive Web App (PWA): Offline access and mobile app-like experience

---

🔗 Links

• 🧠 Solution URL: GitHub Repository
• 🌐 Live Site: Live Preview

---

🧪 Beta Usage

To try Calenda's beta version:

1. Visit the Live Preview
2. Create, manage, and prioritize tasks
3. Drag tasks between columns for a seamless organization
4. Toggle dark mode for a comfortable viewing experience
5. Enjoy responsive design on mobile devices with task persistence via LocalStorage

---

🛠 Installation (for Developers)

To set up Calenda locally:

git clone https://github.com/aymansoliman-dev/Calenda
cd Calenda

Open index.html in a browser to run the app locally. No additional dependencies are required.

---

🔨 Development Process

Calenda was designed with a focus on clean architecture, mobile-first responsiveness, and performance. The project adheres to competition constraints while leveraging OOP principles for scalability and maintainability.

🔧 Built With

• Semantic HTML5: Accessible, structured markup
• CSS Custom Properties: Modular, reusable styles
• Desktop-First Workflow: Optimized for all screen sizes
• Flexbox & Grid: Modern, responsive layouts
• Material Icons: Lightweight, professional icons via CDN
• Vanilla JavaScript: Class-based, modular code with animations
• Hover Transitions: Smooth, engaging UI interactions

---

🧠 AI Assistance

This project was enhanced with OpenAI's ChatGPT as a collaborative tool for:

• 🧠 Architectural brainstorming and planning
• ✍️ Writing and refining this README
• 🧩 Debugging JavaScript logic and DOM issues

AI served as a thinking partner, with all code and design decisions handcrafted for precision and ownership.

---

🧱 Folder Structure

├── index.html
│
├── shared/
│   ├── stylesheets/
│   │   ├── panel.css
│   │   ├── task-popup.css
│   │   ├── icons.css
│   │   ├── responsive-un pitiful.css
│   │   └── colors-palette.css
│   │
│   └── objects/
│       ├── Task.js
│       ├── DarkThemeToggleListener.js
│       └── MobileTabsHandler.js
│
├── beta/
│   ├── beta.html
│   ├── beta.js
│   ├── BetaDragAndDropListener.js
│   ├── BetaTaskColumnAddButtonListener.js
│   └── BetaTaskCreator.js
│
├── app/
│   ├── app.html
│   ├── app.js
│   ├── AppDragAndDropListener.js
│   ├── AppTaskColumnAddButtonListener.js
│   ├── AppTaskCreator.js
│   └── NotificationsSystem.js
│
└── landing-page/
    ├── landing-page.html
    ├── login.html
    ├── signup.html
    └── main.js

---

👨‍💻 Author

Ayman Soliman
Frontend Developer

• Website - Ayman Soliman
• Frontend Mentor - aymansoliman-dev
• Twitter - @a_soliman1783

"Calenda began as a competition entry and is evolving into a fully capable productivity platform."

---

📌 Project Status

• ✅ Beta Complete: Core features implemented and live
• 🚧 Full App in Development: Backend, authentication, and PWA in progress
• 🛠 Next Steps: Backend integration, PWA support, and enhanced features

---