Uplyft – A community-driven event management platform where users can discover, create, and join local social service events such as cleanups, tree plantation drives, and donation programs. The platform features secure authentication, and an intuitive interface for browsing upcoming events. Users can manage the events they create, track the events they’ve joined, and stay engaged in meaningful community activities—all through a modern, responsive single-page application.
git clone https://github.com/syedshafinahmed/Uplyft-Client
cd Uplyft-Client
npm install
npm run dev
npm run build
- Banner: Engaging, animated with Framer Motion for a smooth first impression.
- How It Works: Step-by-step guide with interactive Framer Motion effects.
- Features: Highlighted with animations using Framer Motion.
- Gallery: Swipe through images using Swiper.js, fully responsive.
- Team: Showcases members with clean layouts and hover effects (Tailwind CSS).
- Newsletter: Scroll-triggered animations powered by AOS.
- FAQ: Expandable panels with smooth animations (React + Tailwind CSS).
- Contact: Simple, responsive form built with React + Tailwind CSS.
- Banner with overlay and animated title using React + Framer Motion
- Animated stats for events, participants, cities, and organizers using React CountUp + Framer Motion
- Multi-column success stories gallery with hover effects using Framer Motion
- Skeleton loading placeholders for smooth user experience using React + Tailwind CSS
- Smooth image hover scaling in gallery using Tailwind CSS + Framer Motion
- Interactive step-by-step process using React + Framer Motion
- Clickable steps with animated transitions to highlight the current step using Framer Motion
- Morphing circular progress indicator showing step completion using SVG + Framer Motion
- Smooth enter/exit animations for step details using AnimatePresence + Framer Motion
- Animated info card with opening hours, contact details, and icons using Framer Motion + React Icons
- Floating background elements with subtle bounce animation using CSS keyframes
- Dark/light theme support implemented with Tailwind CSS dark mode
- Smooth enter animations for info card and form on scroll using Framer Motion
- Fetches and filters events from API with live search and event type filter (REST API + fetch)
- Supports client-side pagination for smooth browsing (React state + array slicing)
- Skeleton loading UI while fetching data (Tailwind CSS + Animate Pulse)
- Responsive grid layout for event cards using Tailwind CSS grid
- Interactive search input with keyboard enter support and filter dropdown
- Styled buttons with hover, disabled, and active states (Tailwind CSS)
- Dark/light theme support implemented using Tailwind CSS dark mode
- Skeleton loader while fetching data to improve perceived performance (Tailwind CSS + Animate Pulse)
- Shows a limited number of upcoming events for quick overview (slice method in React)
- Includes a "View All Events" link to navigate to full events list (React Router Link)
- Fully responsive design with dark/light theme support (Tailwind CSS dark mode)
- Displays full event details including title, description, image, and attributes
- Shows event type, date, location, and creator with icons
- Checks if a user has already joined the event and updates button state dynamically (React useState + useEffect)
- Allows logged-in users to join events with API integration (REST API + fetch + AuthContext)
- Provides feedback for actions using modals (SweetAlert2)
- Fetches and displays similar events based on event type (REST API + fetch)
- Skeleton loader improves perceived performance while fetching data (Tailwind CSS + Animate Pulse)
- Secure Email/Password Authentication allowing users to register and log in safely.
- Social Login Integration with Google for faster sign-in.
- Login Form includes email and password fields, redirecting users back to their intended page after successful authentication.
- Password Validation Rules:
- At least one uppercase letter
- At least one lowercase letter
- Minimum of 6 characters
- Forgot Password feature sends a secure reset link to the registered email.
- Interactive Feedback: All success and error states are displayed using SweetAlert, ensuring smooth and clear communication with users.
- Protected Routes: Users cannot access private pages (Dashboard, Profile) without logging in.
- Displays a personalized greeting with the user’s name
- Shows count cards for Events Created, Events Joined, and Upcoming Events with animated counters (React useState + useEffect + CountUp)
- Fetches and displays Latest Created and Next Scheduled Event using the reusable EventCard component (React + fetch + Promise.all)
- Provides quick navigation links to all relevant pages
- Animated count-up numbers for metrics for smooth visual feedback (useEffect + setInterval)
- Displays skeleton loaders while fetching data to indicate loading state (animate-pulse)
- Tooltip guidance for icons to improve usability (Material UI Tooltip)
- Animated circular border around the avatar for visual enhancement (Tailwind CSS + custom keyframe animation)
- Allows inline editing of the display name with save functionality (React useState + conditional rendering)
- Updates Firebase user profile in real-time (Firebase Auth + updateProfile)
- Provides visual feedback for success or failure using modals (SweetAlert2)
- Includes loading state and disabled buttons during API calls (React useState)
- Accessible only to Logged-in Users, ensuring secure event creation.
- Users can enter: Title, Description, Event Type (Cleanup, Plantation, Donation, etc.), Thumbnail Image URL, Location, Future Event Date (validated using react-datepicker; past dates cannot be selected).
- Automatically stores the creator’s email with the event for ownership verification.
- Shows a success alert upon creation and redirects to the Upcoming Events page.
- Fully responsive form layout with clear input validation messages.
- Displays all events joined by the Logged-in User.
- Events are sorted by upcoming date, keeping the user’s schedule organized.
- Joined events cannot be joined again, preventing duplicates.
- Shows all events created by the Logged-in User.
- Users can update and view event details such as title, description, type, date, location, or image.
- Ensures ownership validation, so no user can modify or delete someone else’s events.
| 🏷️ Category | ⚙️ Technology Used |
|---|---|
| Library | React.js |
| Styling | Tailwind CSS + daisyUI + Styled Components |
| Routing | React Router |
| Authentication | Firebase Authentication |
| Animations / Motion | Framer Motion + AOS |
| Slider / Gallery | Swiper.js |
| Date Picker | React Datepicker |
| Loading / Spinners | React Spinners |
| Alerts / Toasts | SweetAlert2 |
| State Management | React Hooks (useState, useEffect, useContext) |
| Deployment | Netlify / Vercel |
- Fully responsive for all devices.
- Unique UI based on the theme of social development.
- Light-Dark Mode Toggle.
- Protected Routes for event creation & management.
- Smooth routing with no reload errors.
- Dynamic event filtering based on date.
- Polished UX with toast notifications.
- Ensures login persistence on reload (Firebase auth configured correctly).