https://github.com/aymansoliman-dev/calenda
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.
https://github.com/aymansoliman-dev/calenda
crud-application dom-manipulation eventlisteners flexbox grid localstorage oop-principles responsive-layout task-manager vanilla-javascript
Last synced: about 1 year ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/aymansoliman-dev/calenda
- Owner: aymansoliman-dev
- Created: 2025-07-14T18:44:50.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2025-07-14T19:34:58.000Z (about 1 year ago)
- Last Synced: 2025-07-14T23:54:51.695Z (about 1 year ago)
- Topics: crud-application, dom-manipulation, eventlisteners, flexbox, grid, localstorage, oop-principles, responsive-layout, task-manager, vanilla-javascript
- Language: CSS
- Homepage: https://aymansoliman-dev.github.io/Calenda/
- Size: 50.8 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🧠 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](#-vision)
- [⚙️ Tech Stack](#-tech-stack)
- [✨ Features (Beta)](#-features-beta)
- [📦 Upcoming Features](#-upcoming-features)
- [🔗 Links](#-links)
- [🧪 Beta Usage](#-beta-usage)
- [🛠 Installation (for Developers)](#-installation-for-developers)
- [🔨 Development Process](#-development-process)
- [🔧 Built With](#-built-with)
- [🧠 AI Assistance](#-ai-assistance)
- [🧱 Folder Structure](#-folder-structure)
- [👨💻 Author](#-author)
- [📌 Project Status](#-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](https://github.com/aymansoliman-dev/Calenda)
- 🌐 **Live Site**: [Live Preview](https://aymansoliman-dev.github.io/Calenda/)
---
## 🧪 Beta Usage
To try Calenda's beta version:
1. Visit the [Live Preview](https://aymansoliman-dev.github.io/Calenda/)
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:
```bash
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](https://bento.me/ayman-soliman)
- Frontend Mentor - [aymansoliman-dev](https://www.frontendmentor.io/profile/aymansoliman-dev)
- Twitter - [@a_soliman1783](https://x.com/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
---