📝 Meetup App

The goal for building this App is to demonstrate Reactjs skills using React Context.

A 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.

---

🚀 Project Purpose

This 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.

---

🧰 Tech Stack

• React.js
• JavaScript (ES6+)
• HTML5
• Git (for version control)

Third-Party-Packages

• Styled-components (for styling)
• react-router-dom (for routing)

---

✅ Features

• Allows users to input their name and select a course/topic.
• On submission, displays a personalized welcome message.
• Utilizes React Context for state management across routes.
• Provides basic error validation for empty inputs or unselected fields.

---

🧪 How to Use

1. On the Home route, click the Register button.

2. You will be redirected to the Register route.

3. Enter your Name and select a Course/Topic from the dropdown menu.

4. Click Register Now.

5. You will be redirected to the Home route with a welcome message:

   "Hello, [Your Name]! Welcome to [Course Name]."

---

Refer to the image below:

Design Files

Home Route

• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Home
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Home Registered View

Register Route

• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Register
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Register Failure

Not Found Route

• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Not Found

---

Resources

Image URLs

• https://assets.ccbp.in/frontend/react-js/meetup/website-logo-img.png alt should be website logo
• https://assets.ccbp.in/frontend/react-js/meetup/website-register-img.png alt should be website register
• https://assets.ccbp.in/frontend/react-js/meetup/meetup-img.png alt should be meetup
• https://assets.ccbp.in/frontend/react-js/meetup/not-found-img.png alt should be not found

Colors

Hex: #334155

Hex: #475569

Hex: #ffffff

Hex: #3b82f6

Hex: #2563eb

Hex: #64748b

Hex: #7b8794

Hex: #cbd5e1

Hex: #ff0b37

Font-families

• Roboto

---

👤 Author

→ GitHub: @bhuvan-007-github → LinkedIn:

---

📝 Notes

• Context API: A built-in React feature used for sharing data across components without prop-drilling. Example: Instead of passing user info from parent to child components, Context allows direct access wherever needed.