An Interactive Learning Platform built with React, Firebase & Tailwind CSS
🚀 Live Site: https://learnloop-01.netlify.app/
LearnLoop is a modern e-learning platform that connects learners with skill-based resources and instructors.
It features user authentication, dynamic skill listings, and an elegant UI powered by Tailwind CSS and Framer Motion animations.
✅ User Authentication — Signup, Login, and Password Reset using Firebase.
✅ Modern UI — Fully responsive layout with Tailwind CSS v4 and Lucide icons.
✅ Animations — Smooth motion effects using Framer Motion.
✅ Routing System — Page navigation handled with React Router v7.
✅ Toast Notifications — Instant alerts for user actions via React Toastify.
✅ Skill Display — Dynamic cards & Swiper slider integration for interactive browsing.
✅ Alerts & Popups — SweetAlert2 used for stylish confirmations and warnings.
| Package Name | Version | Purpose / Description |
|---|---|---|
| @tailwindcss/vite | ^4.1.15 | Integrates Tailwind CSS with Vite for fast development |
| tailwindcss | ^4.1.15 | Utility-first CSS framework for responsive UI design |
| firebase | ^12.4.0 | Authentication, Database, and Hosting for modern web apps |
| framer-motion | ^12.23.24 | Animation library for smooth UI transitions |
| lucide-react | ^0.546.0 | Beautiful, lightweight React icon library |
| react | ^19.1.1 | Core React library for building UI components |
| react-dom | ^19.1.1 | DOM-specific methods for React |
| react-icons | ^5.5.0 | Icon library including popular sets (Font Awesome, etc.) |
| react-router | ^7.9.4 | Routing system for React apps |
| react-toastify | ^11.0.5 | Toast notification system for alerts and messages |
| sweetalert2 | ^11.26.3 | Customizable popup alerts and modals |
| sweetalert2-react-content | ^5.1.0 | React integration for SweetAlert2 |
| swiper | ^12.0.3 | Modern slider/carousel library for React |
git clone https://github.com/your-username/learnloop.git
cd learnloopnpm installCreate a .env file in the root directory and add your Firebase credentials:
VITE_API_KEY=your_api_key
VITE_AUTH_DOMAIN=your_auth_domain
VITE_PROJECT_ID=your_project_id
VITE_STORAGE_BUCKET=your_storage_bucket
VITE_MESSAGING_SENDER_ID=your_sender_id
VITE_APP_ID=your_app_idnpm run devVisit 👉 http://localhost:5173
LearnLoop/
├── src/
│ ├── components/ # Reusable UI components
│ ├── pages/ # App pages (Home, Login, Signup, etc.)
│ ├── assets/ # Images & icons
│ ├── firebase/ # Firebase config files
│ ├── hooks/ # Custom React hooks
│ ├── context/ # Auth and App context
│ ├── App.jsx # Main app component
│ └── main.jsx # App entry point
├── public/ # Static assets
├── tailwind.config.js # Tailwind setup
├── package.json
└── README.md
👨🎓 MD. Amdad Islam
📍 Dhaka, Bangladesh