{"id":15099594,"url":"https://github.com/mohammad-jamal/react-calendar-app","last_synced_at":"2026-02-28T01:45:16.005Z","repository":{"id":253732261,"uuid":"844203606","full_name":"Mohammad-Jamal/react-calendar-app","owner":"Mohammad-Jamal","description":"This is a fully functional, responsive calendar application built with React. It allows users to view, add, edit, and delete events on a monthly calendar. The application uses React Context for state management, localStorage for data persistence, and Tailwind CSS for styling. Additionally, the application includes memoization for performance","archived":false,"fork":false,"pushed_at":"2024-08-19T05:05:39.000Z","size":60,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-23T01:11:20.479Z","etag":null,"topics":["css-modules","ecmascript6","html5","javascript","react","react-router-dom","reactjs","tailwindcss"],"latest_commit_sha":null,"homepage":"https://react-calendar-app-roan.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Mohammad-Jamal.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-18T17:31:55.000Z","updated_at":"2024-08-19T05:05:42.000Z","dependencies_parsed_at":"2024-08-19T05:59:23.885Z","dependency_job_id":null,"html_url":"https://github.com/Mohammad-Jamal/react-calendar-app","commit_stats":null,"previous_names":["mohammad-jamal/react-calendar-app"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mohammad-Jamal%2Freact-calendar-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mohammad-Jamal%2Freact-calendar-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mohammad-Jamal%2Freact-calendar-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mohammad-Jamal%2Freact-calendar-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Mohammad-Jamal","download_url":"https://codeload.github.com/Mohammad-Jamal/react-calendar-app/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240794953,"owners_count":19858716,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css-modules","ecmascript6","html5","javascript","react","react-router-dom","reactjs","tailwindcss"],"created_at":"2024-09-25T17:24:21.549Z","updated_at":"2026-02-28T01:45:15.947Z","avatar_url":"https://github.com/Mohammad-Jamal.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Calendar App\n\n## Overview\n\nThis is a fully functional, responsive calendar application built with React. It allows users to view, add, edit, and delete events on a monthly calendar. The application uses React Context for state management, localStorage for data persistence, and Tailwind CSS for styling. Additionally, the application includes memoization for performance optimization.\n\n## Features\n\n- **Responsive Design:** The application is fully responsive, adapting to various screen sizes, including mobile devices.\n- **Add, Edit, Delete Events:** Users can easily manage their events with the provided CRUD operations.\n- **Event Search \u0026 Filter:** Allows users to search for events by title and filter them by category.\n- **LocalStorage Integration:** Events are stored in localStorage, ensuring data persistence across sessions.\n- **Optimized Rendering:** The use of `React.memo` in critical components minimizes unnecessary re-renders, improving performance.\n\n## Components\n\n- **Calendar Component:** Displays the monthly calendar view and handles event rendering.\n- **EventAccordion Component:** Displays the event details in an accordion view, enhancing the user experience.\n- **EventDetails Page:** Shows a detailed list of all events with search and filter options.\n- **EventItems Component:** Handles individual event rendering in a table within the EventDetails page.\n\n## Technologies Used\n\n- **React:** A JavaScript library for building user interfaces.\n- **React Context API:** Used for state management across the application.\n- **Tailwind CSS:** A utility-first CSS framework for styling.\n- **Vite:** A fast build tool for development.\n- **LocalStorage:** Used for persisting event data across sessions.\n\n## Initialization\n\n1. Clone the repository:\n\n   ```bash\n   git clone https://github.com/Mohammad-Jamal/react-calendar-app.git\n   cd react-calendar-app\n   ```\n## Installation\n\n1. **Install dependencies:**\n\n   ```bash\n   npm install\n   npm run dev\n   ```\n1. **Run application:**\n\n   ```bash\n   npm run dev\n   ```\n3. **Open your browser and navigate to http://localhost:5173**\n\n## Deployment\n\nThe application is deployed on Vercel. You can access the live version here: [React Calendar App](https://your-vercel-link.vercel.app)\n\n## Usage\n\n- **Adding Events:** Click on the \"Add Event\" button and fill in the form to add a new event.\n- **Editing Events:** Click on an event in the calendar to edit its details.\n- **Deleting Events:** Use the \"Delete\" button in the event details view to remove an event.\n\n## Optimizations\n\n- **Memoization:** The `Calendar` and `EventAccordion` components are wrapped with `React.memo` to prevent unnecessary re-renders.\n- **Responsive Design:** Tailwind CSS classes have been used extensively to ensure the application is fully responsive.\n- **Error Handling:** Basic error handling has been implemented to ensure a smooth user experience.\n\n## Future Enhancements\n\n- **Event Reminders:** Implementing notifications for upcoming events.\n- **Improved Styling:** Enhancing the UI/UX with more custom designs and animations.\n\n## Contributions\n\nContributions are welcome! Please fork the repository and create a pull request with your changes.\n\n## License\n\nThis project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmohammad-jamal%2Freact-calendar-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmohammad-jamal%2Freact-calendar-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmohammad-jamal%2Freact-calendar-app/lists"}