https://github.com/darshanas17/react-events-app

A React-based Events App that displays a list of events and their detailed information. Users can explore, filter, and view details for selected events. Built with responsive UI and component-based architecture.
https://github.com/darshanas17/react-events-app

css event event-app frontend html javascript react uicomponents

Last synced: 2 months ago
JSON representation

A React-based Events App that displays a list of events and their detailed information. Users can explore, filter, and view details for selected events. Built with responsive UI and component-based architecture.

• Host: GitHub
• URL: https://github.com/darshanas17/react-events-app
• Owner: Darshanas17
• Created: 2025-04-13T13:27:20.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2025-04-13T13:59:32.000Z (about 1 year ago)
• Last Synced: 2025-04-14T20:19:40.314Z (about 1 year ago)
• Topics: css, event, event-app, frontend, html, javascript, react, uicomponents
• Language: JavaScript
• Homepage: https://darshanas17.github.io/react-events-app/
• Size: 445 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Events App

## 🚀 Live Demo

[Click here to view the demo](https://Darshanas17.github.io/react-events-app/)

## 📌 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**

   ```bash

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

   cd react-events-app

   ```

2. **Install Dependencies**

   ```bash

   npm install

   ```

3. **Run the Application**

   ```bash

   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

![Events Output](https://assets.ccbp.in/frontend/content/react-js/events-output.gif)

#### 📷 Screens

- **No Active Event**  

  ![No Active Event](https://assets.ccbp.in/frontend/content/react-js/events-no-active-event-view-output.png)

- **Yet To Register**  

  ![Yet To Register](https://assets.ccbp.in/frontend/content/react-js/events-yet-to-register-view-output.png)

- **Registered**  

  ![Registered](https://assets.ccbp.in/frontend/content/react-js/events-registered-view-output.png)

- **Registrations Closed**  

  ![Registrations Closed](https://assets.ccbp.in/frontend/content/react-js/events-registrations-closed-view-output.png)

## 👨‍💻 Author

**Darshan A S**  

- [LinkedIn](https://www.linkedin.com/in/darshan-a-s/)  

- [Portfolio](https://darshanas17.github.io/darshan-as-17-portfolio/)

## 📜 License

This project is licensed under the **MIT License**.