COOPER WORD

Table of Contents

• COOPER WORD
  • Table of Contents
  • Overview
  • Features
  • Tech Stack
  • Installation
  • Usage
  • Contributing
  • License
  • Acknowledgments
  • How to Contribute
  • Contributors
  • Contact

Overview

The COOPER WORD is a web-based tool designed to help users create, manage, and view events in a calendar format. Built using React, Next.js, and TypeScript, this application provides a user-friendly interface with intuitive functionality for effective event management.

Demo Part 1 & 2

Features

• Interactive Calendar: Navigate through months and select specific dates to view or add events easily.
• Add New Events: Click on any date to open a modal dialog and input details for new events, including:
  • Title: The name of the event.
  • Date: When the event occurs.
  • Time: The time the event starts.
  • Priority: Categorize events as High, Medium, or Low.
  • Description: Additional details about the event.
• Event Details View: Click on existing events to view detailed information in a dialog.
• Priority Color Coding: Events are visually categorized by priority, using distinct colors for easy identification.
• Responsive Design: Optimized for both desktop and mobile devices.

Tech Stack

• Frontend:
  • React: A JavaScript library for building user interfaces.
  • Next.js: A React framework for server-side rendering and generating static websites.
  • TypeScript: A typed superset of JavaScript that compiles to plain JavaScript.
  • Tailwind CSS: A utility-first CSS framework for styling.
  • React Icons: A collection of beautiful SVG icons for use in React applications.
  • ShadCn Hexta Ui: A component library used in for Ui.
  • Resend Email: used for sending emails with reminder

Installation

To set up the project locally, follow these steps:

1. Clone the repository: bash git clone https://github.com/B-Mustafa/cooperword.git cd event-management-app

2. Install dependencies: bash npm install

3. Run the application: bash npm run dev

4. Access the application: Open your browser and navigate to http://localhost:3000.

Usage

• Navigating the Calendar: Use the arrow buttons to switch between months.
• Adding Events: Click on a date to open the "Add Event" dialog. Fill in the event details and click "Add Event" or use the copilotkit chat to make it easier to add the events.
• Viewing Event Details: Click on any event bubble on the calendar to open the "Event Details" dialog.

Contributing

Contributions are welcome! If you have suggestions or improvements, please follow these steps:

1. Fork the repository.

2. Create a new branch for your feature or bug fix: bash git checkout -b feature/YourFeature

3. Make your changes and commit them: bash git commit -m 'Add some feature'

4. Push to the branch: bash git push origin feature/YourFeature

5. Open a pull request to the main repository.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Acknowledgments

• Inspired by various event management solutions available online.
• Thanks to the contributors of libraries and tools used in this project.

How to Contribute

Please refer to the CONTRIBUTING.md file for detailed information on how to contribute to this project.

Contributors

Thanks to the contributors who have helped make this project better. Contributions of any kind are welcome!

Contact

If you have any questions or feedback, feel free to reach out to me at github , email , instagram.