A responsive React application that displays a list of team members with role-based filtering and online/offline status. Designed with a modern dark mode theme, interactive UI elements, and fully responsive layout for all screen sizes.
- Role-Based Filtering: Filter team members by Developer, Designer, or view All
- Online Status: Shows whether a team member is online or offline
- Responsive Design: Optimized for desktop, tablet, and mobile screens
- Dark Mode Theme: Modern neon-inspired dark UI for visual appeal
- Interactive Cards: Hover effects and smooth transitions for team cards
- Frontend: React.js
- Styling: CSS3 (Dark mode, responsive layout)
- Deployment: Vercel / GitHub Pages
- Node.js and npm installed
- Clone the repository:
git clone https://github.com/FatimaBashirDev/react-team-dashboard.git cd role-based-team-dashboard Install dependencies:
npm install Start the development server:
npm start Open http://localhost:3000 in your browser to view the app
Deployment The project can be deployed using Vercel or GitHub Pages:
Vercel: Automatic deployment from GitHub repo
GitHub Pages: Build with npm run build and deploy the build folder
Live demo: https://react-team-dashboard.vercel.app/
Author Fatima Bashir GitHub: https://github.com/FatimaBashirDev
Future Enhancements Add backend integration for dynamic team management
Include additional roles and filter options
Implement animations for card entry and exit
Add user authentication for interactive team features