Events Handler App

The Events Handler App is a dynamic events management application built with Next.js 14 (Pages Router). It allows users to browse, search for, and view details of various events. The application includes a responsive interface, modular components, and a smooth navigation experience for exploring event details.

Table of Contents

• Events Handler App
  • Table of Contents
  • Features
  • Folder Structure
  • Gif
  • Getting Started
  • Learn More
  • Deploy on Vercel

Features

• List and view event details.
• Search for events by date (year and month).
• Modular and reusable components.
• Integration of SVG icons for logistics.
• Styled using CSS Modules.

Folder Structure

📁components
 ├── 📁error-alert
 │   ├── error-alert.js
 │   └── error-alert.module.css
 ├── 📁event-content
 │   ├── event-content.js
 │   └── event-content.module.css
 ├── 📁event-item
 │   ├── event-item.js
 │   └── event-item.module.css
 ├── 📁event-list
 │   ├── event-list.js
 │   └── event-list.module.css
 ├── 📁event-logistics
 │   ├── event-logistics.js
 │   └── event-logistics.module.css
 ├── 📁event-search
 │   ├── event-search.js
 │   └── event-search.module.css
 ├── 📁event-summary
 │   ├── event-summary.js
 │   └── event-summary.module.css
 ├── 📁icons
 │   ├── address-icon.js
 │   ├── arrow-right-icon.js
 │   └── date-icon.js
 ├── 📁logistics-item
 │   ├── logistics-item.js
 │   └── logistics-item.module.css
 ├── 📁results-title
 │   ├── results-title.js
 │   └── results-title.module.css
 ├── 📁ui
 │   ├── button.js
 │   └── button.module.css
📁data
 └── dummy-data.js
📁pages
 ├── 📁events
 │   ├── 📁[...slug]
 │   │   └── index.js
 │   ├── 📁[eventId]
 │   │   └── index.js
 │   └── index.js
 ├── _app.js
 ├── _document.js
 └── index.js
📁public
 ├── 📁images
 │   ├── ai-event.avif
 │   ├── coding-event.avif
 │   ├── cybersecurity-event.avif
 │   ├── data-event.avif
 │   ├── extrovert-event.avif
 │   ├── introvert-event.avif
 │   ├── javascript-event.avif
 │   └── uiux-event.avif
 └── icon.svg
📁styles
 └── globals.css
📁wrapper
 ├── 📁header
 │   ├── main-header.js
 │   └── main-header.module.css
 └── 📁layout
     └── layout.js
.eslintrc.json
.gitignore
jsconfig.json
next.config.mjs
package-lock.json
package.json
README.md

## Installation

1. Clone the repository:

   ```bash
   git clone https://github.com/your-username/events-handler-app.git
   ```

2. Navigate to the project directory:

   ```bash
   cd events-handler-app
   ```

3. Install the dependencies:
   ```bash
   npm install
   ```

## Running the App

1. Start the development server:

   ```bash
   npm run dev
   ```

2. Open [http://localhost:3000](http://localhost:3000) in your browser to view the app.

## Technology Stack

- **Next.js 14** (Pages Router)
- **React**
- **CSS Modules** for styling
- **JavaScript**

## Components Overview

- **ErrorAlert**: Displays error messages.
- **EventContent**: Manages event content layout and details.
- **EventItem**: Represents an individual event in the event list.
- **EventList**: Displays a list of events using `EventItem`.
- **EventLogistics**: Displays logistics such as date and location for an event.
- **EventSearch**: Search form for filtering events by year and month.
- **EventSummary**: Provides an overview of an event's title.
- **Icons**: Includes SVG icons for logistics and navigation.
- **LogisticsItem**: Handles the display of logistics-related items (date, location).
- **ResultsTitle**: Displays the title of search results.
- **Button**: Reusable button component for navigation and interactions.

## License

This project is licensed under the MIT License.

This README.md reflects your folder structure, project details, and key components. You can replace the GitHub repository link placeholder with your actual URL when sharing it.

Gif

Here is an expected gif of the preview of the App(Events Handler App)

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.