{"id":28962375,"url":"https://github.com/bhuvan-007-github/meetup-reactpracticeproject","last_synced_at":"2026-05-07T06:32:52.103Z","repository":{"id":296155290,"uuid":"991779422","full_name":"bhuvan-007-github/meetup-ReactPracticeProject","owner":"bhuvan-007-github","description":"A simple app built in React.js for hands-on practice and skill demonstration.","archived":false,"fork":false,"pushed_at":"2025-05-29T08:18:42.000Z","size":190,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-05-29T08:31:57.325Z","etag":null,"topics":["context","context-api","html5","javascript","jsx","meetup-app","react-practice-project","reactjs","styled-components"],"latest_commit_sha":null,"homepage":"http://bhuvanameetup.ccbp.tech/","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/bhuvan-007-github.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,"zenodo":null}},"created_at":"2025-05-28T06:23:31.000Z","updated_at":"2025-05-29T08:24:20.000Z","dependencies_parsed_at":"2025-05-29T08:34:05.039Z","dependency_job_id":"a867445b-497b-4e29-9fb9-e41a1a68cd75","html_url":"https://github.com/bhuvan-007-github/meetup-ReactPracticeProject","commit_stats":null,"previous_names":["bhuvan-007-github/meetup-reactpracticeproject"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/bhuvan-007-github/meetup-ReactPracticeProject","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhuvan-007-github%2Fmeetup-ReactPracticeProject","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhuvan-007-github%2Fmeetup-ReactPracticeProject/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhuvan-007-github%2Fmeetup-ReactPracticeProject/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhuvan-007-github%2Fmeetup-ReactPracticeProject/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bhuvan-007-github","download_url":"https://codeload.github.com/bhuvan-007-github/meetup-ReactPracticeProject/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhuvan-007-github%2Fmeetup-ReactPracticeProject/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261595737,"owners_count":23182243,"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":["context","context-api","html5","javascript","jsx","meetup-app","react-practice-project","reactjs","styled-components"],"created_at":"2025-06-24T03:05:07.349Z","updated_at":"2026-05-07T06:32:52.063Z","avatar_url":"https://github.com/bhuvan-007-github.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 📝 Meetup App\n\nThe goal for building this App is to demonstrate Reactjs skills using **React Context**.\n\n\nA React.js application developed to **register a students with their name and chosen topic**, and subsequently display a personalized welcome message. This project reflects clean React.js architecture and the utilization of standard third-party libraries.\n\n---\n\n## 🚀 Project Purpose\n\nThis project was built to demonstrate **React.js development skills** using the `Context API`, component-driven architecture, and third-party library integrations. The focus is on state sharing across components using `React Context`, offering a scalable and maintainable pattern for modern React applications.\n\n---\n\n## 🧰 Tech Stack\n\n* **React.js**\n* **JavaScript (ES6+)**\n* **HTML5**\n* **Git** *(for version control)*\n\nThird-Party-Packages\n* **Styled-components** *(for styling)*\n* **react-router-dom** *(for routing)*\n\n---\n\n## ✅ Features\n\n* Allows users to input their **name** and select a **course/topic**.\n* On submission, displays a **personalized welcome message**.\n* Utilizes `React Context` for state management across routes.\n* Provides basic error validation for empty inputs or unselected fields.\n\n---\n\n## 🧪 How to Use\n\n1. On the **Home** route, click the **Register** button.\n2. You will be redirected to the **Register** route.\n3. Enter your **Name** and select a **Course/Topic** from the dropdown menu.\n4. Click **Register Now**.\n5. You will be redirected to the **Home** route with a welcome message:\n\n   \u003e `\"Hello, [Your Name]! Welcome to [Course Name].\"`\n\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/meetup-output-v0.gif\" alt=\"meetup\" 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### Design Files\n\n\u003cdetails\u003e\n\u003csummary\u003eHome Route\u003c/summary\u003e\n\n- [Medium (Size \u003e= 768px), Large (Size \u003e= 992px) and Extra Large (Size \u003e= 1200px) - Home](https://assets.ccbp.in/frontend/content/react-js/meetup-lg-home-output.png)\n- [Medium (Size \u003e= 768px), Large (Size \u003e= 992px) and Extra Large (Size \u003e= 1200px) - Home Registered View](https://assets.ccbp.in/frontend/content/react-js/meetup-lg-home-registered-output.png)\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eRegister Route\u003c/summary\u003e\n\n- [Medium (Size \u003e= 768px), Large (Size \u003e= 992px) and Extra Large (Size \u003e= 1200px) - Register](https://assets.ccbp.in/frontend/content/react-js/meetup-lg-register-output-.png)\n- [Medium (Size \u003e= 768px), Large (Size \u003e= 992px) and Extra Large (Size \u003e= 1200px) - Register Failure](https://assets.ccbp.in/frontend/content/react-js/meetup-lg-register-error-output.png)\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eNot Found Route\u003c/summary\u003e\n\n- [Medium (Size \u003e= 768px), Large (Size \u003e= 992px) and Extra Large (Size \u003e= 1200px) - Not Found](https://assets.ccbp.in/frontend/content/react-js/meetup-lg-not-found-output.png)\n\n\u003c/details\u003e\n\n---\n\n### Resources\n\n\u003cdetails\u003e\n\u003csummary\u003eImage URLs\u003c/summary\u003e\n\n - [https://assets.ccbp.in/frontend/react-js/meetup/website-logo-img.png](https://assets.ccbp.in/frontend/react-js/meetup/website-logo-img.png) alt should be **website logo**\n - [https://assets.ccbp.in/frontend/react-js/meetup/website-register-img.png](https://assets.ccbp.in/frontend/react-js/meetup/website-register-img.png) alt should be **website register**\n - [https://assets.ccbp.in/frontend/react-js/meetup/meetup-img.png](https://assets.ccbp.in/frontend/react-js/meetup/meetup-img.png) alt should be **meetup**\n - [https://assets.ccbp.in/frontend/react-js/meetup/not-found-img.png](https://assets.ccbp.in/frontend/react-js/meetup/not-found-img.png) alt should be **not found**\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eColors\u003c/summary\u003e\n\n\u003cbr/\u003e\n\n\u003cdiv style=\"background-color: #334155; width: 150px; padding: 10px; color: black\"\u003eHex: #334155\u003c/div\u003e\n\u003cdiv style=\"background-color: #475569; width: 150px; padding: 10px; color: black\"\u003eHex: #475569\u003c/div\u003e\n\u003cdiv style=\"background-color: #ffffff; width: 150px; padding: 10px; color: black\"\u003eHex: #ffffff\u003c/div\u003e\n\u003cdiv style=\"background-color: #3b82f6; width: 150px; padding: 10px; color: black\"\u003eHex: #3b82f6\u003c/div\u003e\n\u003cdiv style=\"background-color: #2563eb; width: 150px; padding: 10px; color: black\"\u003eHex: #2563eb\u003c/div\u003e\n\u003cdiv style=\"background-color: #64748b; width: 150px; padding: 10px; color: black\"\u003eHex: #64748b\u003c/div\u003e\n\u003cdiv style=\"background-color: #7b8794; width: 150px; padding: 10px; color: black\"\u003eHex: #7b8794\u003c/div\u003e\n\u003cdiv style=\"background-color: #cbd5e1; width: 150px; padding: 10px; color: black\"\u003eHex: #cbd5e1\u003c/div\u003e\n\u003cdiv style=\"background-color: #ff0b37; width: 150px; padding: 10px; color: black\"\u003eHex: #ff0b37\u003c/div\u003e\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eFont-families\u003c/summary\u003e\n\n- Roboto\n\n\u003c/details\u003e\n\n---\n\n## 👤 Author\n\n→ GitHub: @bhuvan-007-github\n→ LinkedIn: \n\n---\n\n### 📝 Notes\n\n* **Context API**: A built-in React feature used for sharing data across components without prop-drilling.\n  *Example*: Instead of passing user info from parent to child components, `Context` allows direct access wherever needed.\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbhuvan-007-github%2Fmeetup-reactpracticeproject","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbhuvan-007-github%2Fmeetup-reactpracticeproject","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbhuvan-007-github%2Fmeetup-reactpracticeproject/lists"}