An open API service indexing awesome lists of open source software.

https://github.com/asapial/playpulse-client-side

PlayPulse is a dynamic web application for discovering, creating, and managing sports events
https://github.com/asapial/playpulse-client-side

axios firebase framer-motion react react-router tailwindcss

Last synced: 3 months ago
JSON representation

PlayPulse is a dynamic web application for discovering, creating, and managing sports events

Awesome Lists containing this project

README

          

# PlayPulse

**PlayPulse** is a dynamic web application for discovering, creating, and managing sports events. It connects athletes and sports enthusiasts, making it easy to stay active and engaged in your favorite sports.

---

## 🌐 Live URL

[https://playpulse-b8a0d.web.app/](https://playpulse-b8a0d.web.app/)

---

## 🎯 Purpose

The purpose of PlayPulse is to:
- Help users find and join sports events in their area.
- Allow organizers to create and manage events.
- Foster a community of active individuals passionate about sports.

---

## 🚀 Key Features

- **Event Discovery:** Browse and filter a variety of sports events.
- **Event Creation:** Organize and publish your own events.
- **Booking System:** Book your spot in events with instant feedback.
- **Authentication:** Secure login and registration for users.
- **Responsive UI:** Mobile-friendly and visually appealing design.
- **Loading Animations:** Smooth user experience with Lottie-based loaders.
- **Toast Notifications:** Instant feedback for actions and errors.

---

## 📦 NPM Packages Used

| Package | Usage |
|------------------------|-----------------------------------------------------------------------------------------|
| **@tailwindcss/vite** | Integrates Tailwind CSS with Vite for fast development and hot reloading. |
| **axios** | Promise-based HTTP client for making API requests. |
| **firebase** | Provides backend services like authentication, database, and storage. |
| **flowbite-react** | UI components built with Tailwind CSS for React apps. |
| **framer-motion** | Animation library for React to create smooth and complex animations. |
| **lottie-react** | Renders Lottie animations (JSON-based vector animations) in React. |
| **motion** | Utility for advanced animations and gestures, often used with framer-motion. |
| **react** | Core library for building user interfaces. |
| **react-confetti** | Confetti animation for celebration effects. |
| **react-countup** | Animates numbers counting up, useful for stats and counters. |
| **react-dom** | Provides DOM-specific methods for React, enabling rendering to the browser. |
| **react-icons** | Collection of popular icon packs as React components. |
| **react-router** | Declarative routing for React applications. |
| **react-router-dom** | DOM bindings for React Router, enabling navigation in web apps. |
| **react-simple-typewriter** | Adds typewriter animation effects to text in React. |
| **react-toastify** | Displays toast notifications for feedback and alerts. |
| **sweetalert2** | Beautiful, customizable popup boxes for alerts and confirmations. |
| **swiper** | Modern touch slider for creating carousels and sliders. |
| **tailwindcss** | Utility-first CSS framework for rapid UI development. |

---

## 📦 Installation

1. **Clone the repository:**
```sh
git clone https://github.com/asapial/PlayPulse-Client-Side.git
cd PlayPulse-Client-Side
```

2. **Install dependencies:**
```sh
npm install
```

3. **Set up environment variables:**
- Copy `.env.example` to `.env.local` and fill in your Firebase and backend API credentials.

4. **Start the development server:**
```sh
npm run dev
```

---

## 🤝 Contributing

Contributions are welcome! Please open an issue or submit a pull request for any improvements or bug fixes.

---

## 📄 License

All content, including recipes, images, and branding, is the intellectual property of PlayPulse unless otherwise stated. Unauthorized use or duplication without explicit permission is strictly prohibited.