{"id":26713413,"url":"https://github.com/darshanas17/appointments-app-react","last_synced_at":"2026-04-05T21:03:15.803Z","repository":{"id":284478582,"uuid":"955074704","full_name":"Darshanas17/Appointments-App-React","owner":"Darshanas17","description":"The Appointments App is a simple yet interactive React application that allows users to add, star, and filter their appointments efficiently. The app leverages React's state management to dynamically update the list of appointments and apply filters.","archived":false,"fork":false,"pushed_at":"2025-03-26T04:29:43.000Z","size":489,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-11T15:54:00.142Z","etag":null,"topics":["appointment-app","css","html","javascript","reactjs","state-management","ui-design"],"latest_commit_sha":null,"homepage":"https://darshanas17.github.io/Appointments-App-React/","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/Darshanas17.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":"2025-03-26T04:17:49.000Z","updated_at":"2025-04-10T05:52:58.000Z","dependencies_parsed_at":"2025-03-26T05:36:41.533Z","dependency_job_id":null,"html_url":"https://github.com/Darshanas17/Appointments-App-React","commit_stats":null,"previous_names":["darshanas17/appointments-app-react"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Darshanas17/Appointments-App-React","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Darshanas17%2FAppointments-App-React","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Darshanas17%2FAppointments-App-React/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Darshanas17%2FAppointments-App-React/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Darshanas17%2FAppointments-App-React/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Darshanas17","download_url":"https://codeload.github.com/Darshanas17/Appointments-App-React/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Darshanas17%2FAppointments-App-React/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266189677,"owners_count":23890065,"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":["appointment-app","css","html","javascript","reactjs","state-management","ui-design"],"created_at":"2025-03-27T12:20:00.962Z","updated_at":"2025-12-30T22:07:01.127Z","avatar_url":"https://github.com/Darshanas17.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Appointments App\n\n## 🚀 Live Demo\n\n[Click here to view the demo](https://Darshanas17.github.io/Appointments-App-React/)\n\n## 📌 Overview\n\nThe **Appointments App** is a simple yet interactive React application that allows users to add, star, and filter their appointments efficiently. The app leverages React's state management to dynamically update the list of appointments and apply filters.\n\n\n### ✅Refer to the image below:\n\n\u003cbr/\u003e\n\u003cdiv style=\"text-align: center;\"\u003e\n    \u003cimg src=\"https://assets.ccbp.in/frontend/content/react-js/appointments-app-output.gif\" alt=\"appointments app output\" style=\"max-width:70%;box-shadow:0 2.8px 2.2px rgba(0, 0, 0, 0.12)\"\u003e\n\u003c/div\u003e\n\u003cbr/\u003e\n\n## ✨ Features\n\n- **Add Appointments:** Users can enter an appointment title and date, which will be added to the list.\n- **Star Appointments:** Users can mark important appointments by clicking the star icon.\n- **Filter Starred Appointments:** Users can filter and view only starred appointments.\n- **Responsive Design:** The app is optimized for various screen sizes.\n\n## 🛠️ Tech Stack\n\n- **React.js** - Frontend UI\n- **CSS** - Styling\n- **date-fns** - Formatting dates\n\n## ⚙️ Installation \u0026 Setup\n\nFollow these steps to set up the project locally:\n\n1. **Clone the Repository**\n   ```bash\n   git clone https://github.com/Darshanas17/Appointments-App-React.git\n   cd Appointments-App-React\n   ```\n2. **Install Dependencies**\n   ```bash\n   npm install\n   ```\n3. **Run the Application**\n   ```bash\n   npm start\n   ```\n4. Open the browser and visit `http://localhost:3000/` to see the app in action.\n\n## 📁 Components Structure\n\nThe application consists of the following components:\n\n- **Appointments** (`src/components/Appointments/`)\n- **AppointmentItem** (`src/components/AppointmentItem/`)\n\n## 🎯 Functionality\n\n- The app starts with an empty list.\n- Users can add new appointments using the input fields.\n- Clicking on the **Star** icon marks an appointment as important.\n- Clicking the **Starred** filter displays only starred appointments.\n\n## 🎨 Design \u0026 Assets\n\n- UI designed using **Roboto** font.\n- Colors used:\n  - `#9796f0` (Primary)\n  - `#fbc7d4` (Accent)\n  - `#171f46` (Text)\n  - `#ffffff` (Background)\n- Icons and images sourced from: [CCBP Assets](https://assets.ccbp.in/frontend/react-js/appointments-app/)\n\n## 💡 Quick Tips\n\n- Use `\u003cinput type=\"date\" /\u003e` for date selection.\n- Format dates using `format` from **date-fns**:\n  ```js\n  import { format } from \"date-fns\";\n  console.log(format(new Date(2025, 2, 26), \"dd MMMM yyyy, EEEE\")); // 26 March 2025, Wednesday\n  ```\n\n## 👨‍💻 Author\n\n**Darshan A S**\n\n- [LinkedIn](https://www.linkedin.com/in/darshan-a-s/)\n- [Portfolio](https://darshanas17.github.io/darshan-as-17-portfolio/)\n\n## 📜 License\n\nThis project is licensed under the **MIT License**.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdarshanas17%2Fappointments-app-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdarshanas17%2Fappointments-app-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdarshanas17%2Fappointments-app-react/lists"}