Events App

🚀 Live Demo

Click here to view the demo

📌 Overview

The Events App is a dynamic React application that allows users to browse through a list of events and interact with their registration statuses. The UI updates based on user interactions, offering a smooth and responsive experience.

✨ Features

• View Events List: Browse a list of interesting events.
• Dynamic Registration Status: The registration status updates based on the selected event.
• Multiple States: Displays views such as "Yet to Register", "Registered", "Registrations Closed", and "No Active Event".
• Responsive Design: Fully optimized layout for large screens.

🛠️ Tech Stack

• React.js - Frontend UI
• CSS - Styling

⚙️ Installation & Setup

1. Clone the Repository

   git clone https://github.com/Darshanas17/react-events-app.git
   cd react-events-app

2. Install Dependencies

   npm install

3. Run the Application

   npm start

4. Open the browser and go to http://localhost:3000/ to use the app.

📁 Components Structure

• Events (src/components/Events/)
• EventItem (src/components/EventItem/)
• ActiveEventRegistrationDetails (src/components/ActiveEventRegistrationDetails/)

🎯 Functionality

• Clicking an event will show its registration status dynamically.
• Different visual states are rendered depending on the event's registration status.
• States include:
  • No Active Event
  • Yet to Register
  • Registered
  • Registrations Closed

🎨 Design & Assets

• Fonts: Roboto
• Colors:
  • #0967d2 (Primary)
  • #ffffff (Background)
  • #64748b (Text)

📸 Screenshots

🎬 App Demo

📷 Screens

• No Active Event
  

• Yet To Register
  

• Registered
  

• Registrations Closed
  

👨‍💻 Author

Darshan A S

• LinkedIn
• Portfolio

📜 License

This project is licensed under the MIT License.