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.
https://playpulse-b8a0d.web.app/
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.
- 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.
| 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. |
-
Clone the repository:
git clone https://github.com/asapial/PlayPulse-Client-Side.git cd PlayPulse-Client-Side -
Install dependencies:
npm install
-
Set up environment variables:
- Copy
.env.exampleto.env.localand fill in your Firebase and backend API credentials.
- Copy
-
Start the development server:
npm run dev
Contributions are welcome! Please open an issue or submit a pull request for any improvements or bug fixes.
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.