Event 360 is a responsive website and dashboard project aimed at creating an immersive experience for event management and service showcasing. This project utilizes TypeScript and React for the frontend, integrating with a RESTful API for fetching and managing data. The dashboard section offers intuitive management of event items, recent events, and services, incorporating Tanstack Query for efficient state management.

• Project Overview
• Features
• Technology Stack
• API Integration
• Responsiveness
• User Interface (UI)
• Installation
• Usage

Event 360 is a comprehensive project that includes both a responsive website and a dashboard section. The website features various sections, including Navbar, Header, Our Services, Event Items, Gallery, Pricing, Review, Recent Events, and Footer, all designed according to the provided Figma design.

• Navbar: A navigation bar for easy navigation between sections.
• Header: Introduces the purpose of the website with a visually appealing design.
• Our Services: Dynamically fetched services displayed using Tanstack Query.
• Event Items: Displays upcoming events with Tanstack Query integration.
• Gallery: Showcases images related to services or events.
• Pricing: Presents pricing details for the offered services.
• Review: Displays customer testimonials for credibility.
• Recent Events: Highlights recent events with Tanstack Query for real-time updates.
• Additional Sections:
  1. FAQ: Answers to common questions about services and events.
  2. Sponsor Updates: Latest news and updates from event sponsors.

• Responsive Dashboard: An intuitive and visually appealing dashboard.
• User-Friendly Layout: Prioritizes ease of use and navigation.
• Event Items Management: CRUD operations for managing event items.
• Recent Event Management: CRUD operations for managing recent events.

• API Integration: Fetches service and event data from a RESTful API.
• Tanstack Query: Efficient data management and state handling.
• Responsiveness: Ensures compatibility with various devices and screen sizes.
• Animations: Incorporates animations for enhanced user experience.
• User Interface (UI): Implements a pixel-perfect design based on provided Figma files.
• Dashboard Functionality: Intuitive management of event items, and recent events.
• CRUD Operations: Allows Create, Read, Update, and Delete operations for events.

• Frontend:

  • TypeScript
  • React
  • Tanstack Query

• Backend:

  • TypeScript
  • Node
  • Express
  • MongoDB

• API Integration:

  • Axios

• Animation:

  • AOS (Animate On Scroll)

• The project fetches data from a RESTful API.
• API endpoints are defined for event items, and recent events.
• Utilizes Tanstack Query for efficient data fetching and updates.

• The website is designed to be fully responsive.
• Compatible with various devices including desktops, tablets, and mobile phones.

• Implements the UI as per the provided Figma design.
• Pixel-perfect design ensuring precise alignment and visual appeal.

1. Clone the repository:

git clone https://github.com/iibrahim70/event-360-client.git

2. Install dependencies::

cd event-360-client
yarn

1. Start the development server:

yarn dev

2. Open your browser and visit:

http://localhost:5173