ucode connect chronos "Calendula" is the project of ucode connect the Track FullStack programming bootcamp
lasting 4 weeks (March 3, 2025 - March 28, 2025),
where the Node.js with JavaScript and React with TypeScript and FullCalendar were used to develop the event planner web-application.
The purpose: build a simple and powerful time planner
using the whole cycle of Challenge Based Learning framework with a team.
- ποΈ About "Calendula" App
- π§βπ» Team
- πΌ About "Calendula" Frontend
- π― Features and Functionality
- π€ Use case diagram
- 𧲠Activity diagram
- π Deployment Diagram
- π Get started
Calendula is an enterprise web app that transforms time management with flexible calendars, interactive events, and team sync.
Organise your day, share ideas, and streamline your workflow with easy search, notifications, and a personalised design.
Here is a link to the presentation file.
-
π§πΌβπ» Andrew Laskevych
-
π©πΌβπ» Inessa Repeshko
-
π§π»βπ» Vadym Zharyi
Calendula is a calendar project inspired by Google Calendar. It is built using React, TypeScript, and Tailwind CSS, featuring a highly responsive and intuitive interface.
The Calendula project is designed for convenient task and event planning. It combines a minimalist design with robust functionality, allowing users to easily manage their time while also supporting customizable color themes.
The application provides comprehensive calendar management with multiple calendar types, event creation and editing, participant management, and advanced collaboration features.
Built with modern web technologies, Calendula delivers a seamless experience for both individual users and teams, offering features like drag-and-drop event scheduling, real-time notifications, and flexible role-based access control.
Calendula is a comprehensive calendar management application that provides the following features:
- User registration with email confirmation
- Secure login system with JWT tokens
- Password reset functionality with email verification
- Email confirmation system for new accounts
- Protected routes with authentication guards
- Session management with automatic token refresh
- User profile with avatar support
- Personal data viewing
- Birthday tracking for user profiles
- User search functionality by full name or email
- Searchable dropdown lists for user participation
-
Multiple Calendar Types:
- Personal "Main" calendars for each user
- Shared calendars with collaboration features
- "National Holidays" calendars by country
- "Birthdays" calendars for company employees
- System calendars for special events
-
Calendar Operations:
- Create, read, update, and delete calendars
- Calendar color customization per user
- Calendar visibility toggling (show/hide)
- Calendar grouping into team and system categories
- Unsubscribe functionality from shared calendars
-
Role-Based Access Control:
- Owner: Full CRUD operations, participant management
- Member: View calendar, CRUD own events, invite participants
- Viewer: Read-only access to calendar and events
-
Participant Management:
- Invite participants via email
- Role assignment (Owner, Member, Viewer)
- Color customization for each participant
- Owner identification markers
-
Event Creation & Editing:
- Create events via calendar click or dedicated page
- Quick event creation with pop-up interface
- Detailed event creation page for complex events
- Event editing with draft system
- Duplicate event prevention
-
Event Properties:
- Title, description, and location
- Start and end date/time configuration
- All-day event support
- Event categories: Work, Home, Hobby
- Event types: Meeting, Reminder, Task
- Custom color assignment per event
- Notification settings (10 min, 30 min, 1 hour, 1 day)
-
Event Interaction:
- Drag and drop to reschedule events
- Resize to change event duration
- Click to view detailed information
- Event deletion with confirmation
- Type and category icons in event display
-
Participant Management:
- Invite participants via email
- Attendance status tracking: Yes, No, Maybe
- Visual attendance status indicators
- Participant color customization
- Event creator identification
-
Color Management:
- Calendar-specific color themes
- Event color customization
- User-specific color preferences
- Default color inheritance from calendars
- Visual striping for custom colored events
-
Event Styling:
- Attendance-based visual styling
- Special calendar type styling (holidays, birthdays)
- Type-specific icons (meeting, reminder, task)
- Category-specific icons (work, home, hobby)
- Color-coded event borders and backgrounds
-
Calendar Views:
- Month view with full event display
- Week view with time slots
- Day view for detailed scheduling
- Responsive design for mobile devices
-
Navigation:
- "Today" button for quick navigation
- Previous/Next navigation controls
- Mini calendar in sidebar for date jumping
- Synchronized views between main and sidebar calendars
- Current day and time highlighting
-
Search & Filtering:
- Event search by title and description
- Real-time search with live results
- Calendar-based filtering
- Event type and category filtering
- User-based participant filtering
- Event reminder system with customizable timing
- Toast notifications for user actions
- Success/error message system
- Real-time feedback for all operations
- Status change notifications
- Event duration visualization
- Attendance status summaries
- Participant count displays
- Event timing with time zone support
- Recurring event pattern display
-
State Management:
- Redux for global state management
- React hooks for local state
- Context API for draft management
- Persistent state across sessions
-
API Integration:
- RESTful API communication
- Axios for HTTP requests
- Error handling and validation
- Token-based authentication
-
Performance Optimization:
- Memoized components and calculations
- Efficient event filtering and rendering
- Lazy loading of calendar data
- Optimized re-renders
-
Event Draft System:
- Save and restore event drafts
- Cross-page draft persistence
- Edit mode with pre-filled data
- Draft cleanup on completion
-
Interactive Features:
- Popover-based event details
- Modal-based calendar management
- Confirmation dialogs for destructive actions
- Tooltip information displays
-
Time Management:
- Automatic scroll to current time
- Time slot selection and highlighting
- Duration-based event creation
- Time zone awareness
- Run the calendula-backend project.
- Clone this repository and move to the project directory:
git clone <repository-url> calendula-frontend cd calendula-frontend
- Install the dependencies:
npm install
- Run commands:
npm run build:dev
npm run start:dev
- Application will be launched on http://localhost:3000/.
Β© Inessa Repeshko. 2025