{"id":29328744,"url":"https://github.com/rafi983/lws_learning-portal","last_synced_at":"2026-05-08T00:36:25.613Z","repository":{"id":303410386,"uuid":"1015387076","full_name":"rafi983/lws_learning-portal","owner":"rafi983","description":null,"archived":false,"fork":false,"pushed_at":"2025-07-07T12:56:33.000Z","size":560,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-07T14:11:36.999Z","etag":null,"topics":["emotion-react","react","react-redux","react-router","react-toastify"],"latest_commit_sha":null,"homepage":"https://lws-learning-portal-qmwk.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rafi983.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-07T12:29:51.000Z","updated_at":"2025-07-07T12:59:55.000Z","dependencies_parsed_at":"2025-07-07T14:11:44.336Z","dependency_job_id":"8a1ebb18-3a6f-4d32-90bf-0679eaf1b517","html_url":"https://github.com/rafi983/lws_learning-portal","commit_stats":null,"previous_names":["rafi983/lws_learning-portal"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/rafi983/lws_learning-portal","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafi983%2Flws_learning-portal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafi983%2Flws_learning-portal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafi983%2Flws_learning-portal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafi983%2Flws_learning-portal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rafi983","download_url":"https://codeload.github.com/rafi983/lws_learning-portal/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafi983%2Flws_learning-portal/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264155081,"owners_count":23565300,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["emotion-react","react","react-redux","react-router","react-toastify"],"created_at":"2025-07-07T22:37:01.343Z","updated_at":"2026-05-08T00:36:20.592Z","avatar_url":"https://github.com/rafi983.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Lws Learning Portal\n\nA comprehensive learning management system built with React.js and Redux Toolkit, featuring separate admin and student portals with video courses, assignments, quizzes, and leaderboard functionality.\n\n## 🌟 Features\n\n### Student Portal\n- **Video Learning**: Stream educational videos with progress tracking\n- **Interactive Quizzes**: Take quizzes related to video content\n- **Assignments**: Submit assignments with deadline tracking\n- **Leaderboard**: View rankings based on quiz and assignment performance\n- **Course Player**: Watch videos with sidebar navigation\n- **Student Registration**: Self-registration system for students\n\n### Admin Dashboard\n- **Video Management**: Add, edit, and delete educational videos\n- **Assignment Management**: Create and manage assignments with deadlines\n- **Quiz Management**: Create quizzes with multiple questions and options\n- **Assignment Marking**: Review and grade student submissions\n- **User Management**: Manage student accounts and access\n\n### Authentication \u0026 Security\n- **Role-based Access Control**: Separate access for admins and students\n- **Protected Routes**: Secure routing based on user roles\n- **JWT Authentication**: Secure token-based authentication system\n\n## 🏗️ Tech Stack\n\n### Frontend\n- **React 18** - Modern React with hooks\n- **Redux Toolkit** - State management\n- **React Router v6** - Client-side routing\n- **Mantine UI** - Modern React components library\n- **Tailwind CSS** - Utility-first CSS framework\n- **React Player** - Video player component\n- **Moment.js** - Date manipulation\n- **React Icons** - Icon library\n- **React Toastify** - Toast notifications\n\n### Backend\n- **JSON Server** - REST API simulation\n- **JSON Server Auth** - Authentication middleware\n- **bcrypt** - Password hashing\n\n### Build Tools\n- **Create React App** - React application setup\n- **npm/yarn** - Package management\n\n## 📁 Project Structure\n\n```\n├── public/                     # Static assets\n│   ├── assets/image/          # Images and logos\n│   └── index.html             # Main HTML file\n├── server/                    # Backend API server\n│   ├── db.json               # Database simulation\n│   └── package.json          # Server dependencies\n├── src/\n│   ├── app/                  # Redux store configuration\n│   ├── components/           # React components\n│   │   ├── AdminDashboard/   # Admin-specific components\n│   │   │   ├── Dashboard.js\n│   │   │   ├── AssignmentMarks/\n│   │   │   ├── Assignments/\n│   │   │   ├── Quizzes/\n│   │   │   └── Videos/\n│   │   ├── ProtectedRoutes/  # Route protection components\n│   │   ├── shared/           # Shared components\n│   │   └── StudentPortal/    # Student-specific components\n│   │       ├── CoursePlayer/\n│   │       ├── LeaderBoard/\n│   │       ├── Quiz/\n│   │       └── StudentRegistration/\n│   ├── features/             # Redux slices and API\n│   │   ├── admin/           # Admin-related APIs\n│   │   ├── auth/            # Authentication logic\n│   │   ├── student/         # Student-related APIs\n│   │   └── api/             # Base API configuration\n│   ├── hooks/               # Custom React hooks\n│   └── utils/               # Utility functions\n```\n\n## 🚀 Getting Started\n\n### Prerequisites\n- **Node.js** (v14 or higher)\n- **npm** or **yarn**\n- **Vercel account** (for deployment)\n\n### Local Development\n\n1. **Clone the repository**\n   ```bash\n   git clone https://github.com/rafi983/lws_learning-portal\n   cd lws_learning-portal\n   ```\n\n2. **Install frontend dependencies**\n   ```bash\n   npm install\n   ```\n\n3. **Install backend dependencies**\n   ```bash\n   cd server\n   npm install\n   cd ..\n   ```\n\n4. **Set up environment variables**\n   ```bash\n   cp .env.example .env\n   ```\n   Update the `.env` file with your local API URL: `REACT_APP_API_URL=http://localhost:9000`\n\n### Running Locally\n\n1. **Start the backend server**\n   ```bash\n   cd server\n   npm run dev\n   ```\n   The API server will run on `http://localhost:9000`\n\n2. **Start the frontend application**\n   ```bash\n   npm start\n   ```\n   The React app will run on `http://localhost:3000`\n\n## 🌐 Deployment on Vercel\n\n### Backend Deployment\n\n1. **Deploy the server folder to Vercel**\n   ```bash\n   cd server\n   npx vercel --prod\n   ```\n   Or push to GitHub and connect the `server` folder as a separate Vercel project.\n\n2. **Note the deployed API URL** (e.g., `https://your-api-name.vercel.app`)\n\n### Frontend Deployment\n\n1. **Update environment variables**\n   Create a `.env` file in the root directory:\n   ```bash\n   REACT_APP_API_URL=https://your-deployed-api-url.vercel.app\n   ```\n\n2. **Deploy the frontend**\n   ```bash\n   npx vercel --prod\n   ```\n   Or connect your GitHub repository to Vercel and set the environment variable in the Vercel dashboard.\n\n### Environment Variables in Vercel Dashboard\n\nWhen deploying via Vercel dashboard:\n1. Go to your project settings\n2. Navigate to \"Environment Variables\"\n3. Add: `REACT_APP_API_URL` = `https://your-deployed-api-url.vercel.app`\n4. Redeploy your application\n\n### Live Demo\n\n- **Frontend**: `https://your-frontend-url.vercel.app`\n- **Backend API**: `https://your-backend-url.vercel.app`\n\n## 🔐 Default Credentials\n\n### Admin Access\n- **Email**: `admin@learnwithsumit.com`\n- **Password**: `lws@123456`\n- **Role**: Administrator\n- **Access**: Full admin dashboard with video, assignment, quiz management and grading capabilities\n\n### Student Access\nMultiple student accounts are available for testing:\n\n#### Student 1 - Saad Hasan\n- **Email**: `saad.hasan@learnwithsumit.com`\n- **Password**: `lws@123456`\n- **Role**: Student\n\n#### Student 2 - Akash Ahmed\n- **Email**: `akash.ahmed@learnwithsumit.com`\n- **Password**: `lws@123456`\n- **Role**: Student\n\n#### Student 3 - Mohammad Salahuddin\n- **Email**: `md.salahuddin@learnwithsumit.com`\n- **Password**: `lws@123456`\n- **Role**: Student\n\n#### Student 4 - Ferdous\n- **Email**: `ferdous.shohag@learnwithsumit.com`\n- **Password**: `lws@123456`\n- **Role**: Student\n\n#### Student 5 - Riyadh\n- **Email**: `riyadh.vai@learnwithsumit.com`\n- **Password**: `lws@123456`\n- **Role**: Student\n\n#### Student 8 - Naomi\n- **Email**: `naomi@gmail.com`\n- **Password**: `123456789`\n- **Role**: Student\n\n### Testing Different User Experiences\n- Use the **admin account** to manage content, view submissions, and grade assignments\n- Use any **student account** to experience the learning portal, take quizzes, submit assignments, and view leaderboard\n- Switch between different student accounts to see how rankings and progress vary\n- All student except one accounts have the same password (`lws@123456`) for easy testing\n\n### New User Registration\n- Students can also create new accounts using the registration page at `/register`\n- Only students can self-register; admin accounts must be created manually\n\n## 📋 Available Scripts\n\n### Frontend Scripts\n- `npm start` - Runs the app in development mode\n- `npm test` - Launches the test runner\n- `npm run build` - Builds the app for production\n- `npm run eject` - Ejects from Create React App\n\n### Backend Scripts\n- `npm start` - Starts the JSON server with authentication\n\n## 🎯 Key Functionalities\n\n### For Students\n1. **Registration**: Create a new student account\n2. **Video Learning**: Access course videos with progress tracking\n3. **Quiz Participation**: Take quizzes and receive instant feedback\n4. **Assignment Submission**: Submit assignments before deadlines\n5. **Leaderboard**: View performance rankings\n6. **Profile Management**: Manage personal information\n\n### For Admins\n1. **Content Management**: Add, edit, delete videos, quizzes, and assignments\n2. **Student Monitoring**: View student progress and submissions\n3. **Grading System**: Review and grade student assignments\n4. **Analytics**: Track student performance and engagement\n5. **User Management**: Manage student accounts and permissions\n\n## 📊 API Endpoints\n\nThe application uses a RESTful API with the following main endpoints:\n\n- `GET/POST /users` - User management\n- `GET/POST/PUT/DELETE /videos` - Video management\n- `GET/POST/PUT/DELETE /assignments` - Assignment management\n- `GET/POST/PUT/DELETE /quizzes` - Quiz management\n- `GET/POST/PUT /assignmentMarks` - Assignment grading\n- `GET/POST /quizMarks` - Quiz results\n\n## 🔒 Authentication Flow\n\n1. **Login**: Users authenticate with email/password\n2. **Token Generation**: JWT tokens are issued upon successful login\n3. **Route Protection**: Protected routes verify tokens and user roles\n4. **Auto-logout**: Tokens expire and users are redirected to login\n\n## 📱 Responsive Design\n\nThe application is fully responsive and works seamlessly across:\n- **Desktop** computers\n- **Tablet** devices\n- **Mobile** phones\n\n## 🎨 UI/UX Features\n\n- **Modern Design**: Clean and intuitive interface\n- **Dark/Light Themes**: Customizable theme options\n- **Toast Notifications**: Real-time feedback for user actions\n- **Loading States**: Smooth loading indicators\n- **Error Handling**: Graceful error messages and fallbacks\n\n## 📈 Performance Optimizations\n\n- **Code Splitting**: Lazy loading of components\n- **Memoization**: React.memo and useMemo for performance\n- **Efficient State Management**: Redux Toolkit for optimized state updates\n- **Image Optimization**: Compressed assets for faster loading\n\n## 🔧 Configuration\n\n### Environment Variables\nCreate a `.env` file in the root directory:\n```\nREACT_APP_API_URL=http://localhost:9000\n```\n\n### Custom Styling\nThe project uses Tailwind CSS for styling. Customize themes in:\n- `src/index.css` - Global styles\n- `src/App.css` - Component-specific styles\n- `src/utils/customStyles.js` - Mantine theme customization\n\n## 🚨 Assignment Submission Guidelines\n\n### Deadline Policy\n1. **On Time**: Full marks awarded\n2. **1 Hour Late**: 10% marks deducted\n3. **1-24 Hours Late**: 30% marks deducted\n4. **24+ Hours Late**: 50% marks deducted\n5. **After Course End**: No marks awarded\n\n### Important Notes\n- Submit assignments within course duration\n- Code changes after submission deadline will result in mark deduction\n- Final marks will be provided within 7-10 days\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create a feature branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n## 📄 License\n\nThis project is licensed under the ISC License - see the LICENSE file for details.\n\n## 👥 Authors\n\n- **Sumit Saha** - *Learn with Sumit*\n- **Development Team** - *LWS Learning Platform*\n\n## 🆘 Support\n\nFor support and questions:\n- Check the documentation\n- Open an issue in the repository\n- Contact the development team\n\n## 🚀 Future Enhancements\n\n- **Real-time Chat**: Student-teacher communication\n- **Video Conferencing**: Live classes integration\n- **Mobile App**: React Native application\n- **Advanced Analytics**: Detailed progress tracking\n- **Course Certificates**: Completion certificates\n- **Payment Integration**: Paid course functionality\n\n---\n\n**Happy Learning! 🎓**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frafi983%2Flws_learning-portal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frafi983%2Flws_learning-portal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frafi983%2Flws_learning-portal/lists"}