# CourseWorx - Course Management Platform A comprehensive full-stack course management application built with React, Node.js, and PostgreSQL. CourseWorx enables trainers to create and manage courses while trainees can enroll, track attendance, and complete assignments. ## ⚡ Quick Installation ```bash # Clone the repository git clone https://github.com/mmabdalla/courseworx.git cd courseworx # Install all dependencies npm run install-all # Setup database (requires PostgreSQL) cd backend cp env.example .env # Edit .env with your database credentials npm run setup-db # Start the application cd .. npm run dev ``` ## 🚀 Easy Start/Stop Scripts ### **Windows (Batch Files)** ```bash # Start CourseWorx start-courseworx.bat # Stop CourseWorx stop-courseworx.bat ``` ### **Windows (PowerShell)** ```powershell # Start CourseWorx .\start-courseworx.ps1 # Stop CourseWorx .\stop-courseworx.ps1 ``` ### **Manual Commands** ```bash # Start both frontend and backend npm start # Stop all processes npm run kill ``` **Access the app at:** `http://localhost:3000` **Default login credentials:** - Super Admin: `admin@courseworx.com` / `admin123` - Trainer: `trainer@courseworx.com` / `trainer123` - Trainee: `trainee@courseworx.com` / `trainee123` ## 🚀 Features ### For Super Admins - **User Management**: Create and manage trainers and trainees - **System Overview**: View comprehensive statistics and system health - **Course Oversight**: Monitor all courses and their performance - **Dashboard**: Real-time insights into platform usage ### For Trainers - **Course Creation**: Create and manage courses with rich content - **Student Management**: Track student enrollments and progress - **Assignment Management**: Create and grade assignments - **Attendance Tracking**: Monitor student attendance - **Content Management**: Add course materials and curriculum ### For Trainees - **Course Discovery**: Browse and enroll in available courses - **Progress Tracking**: Monitor course progress and completion - **Attendance Management**: Sign in/out for course sessions - **Assignment Submission**: Complete and submit assignments - **Personal Dashboard**: View enrolled courses and statistics ## 🛠️ Tech Stack ### Frontend - **React 18** - Modern UI framework - **Tailwind CSS** - Utility-first CSS framework - **React Router** - Client-side routing - **React Query** - Server state management - **Axios** - HTTP client - **Heroicons** - Beautiful icons ### Backend - **Node.js** - JavaScript runtime - **Express.js** - Web framework - **PostgreSQL** - Primary database - **Sequelize** - ORM for database management - **JWT** - Authentication - **bcryptjs** - Password hashing - **Express Validator** - Input validation ## 📋 Prerequisites Before running this application, make sure you have the following installed: - **Node.js** (v16 or higher) - **PostgreSQL** (v12 or higher) - **npm** or **yarn** ## 🚀 Installation & Setup ### Prerequisites Before installing CourseWorx, ensure you have the following installed: - **Node.js** (v16 or higher) - [Download here](https://nodejs.org/) - **PostgreSQL** (v12 or higher) - [Download here](https://www.postgresql.org/download/) - **Git** - [Download here](https://git-scm.com/) ### Step 1: Clone the Repository ```bash git clone https://github.com/mmabdalla/courseworx.git cd courseworx ``` ### Step 2: Install Dependencies #### Option A: Install All Dependencies at Once ```bash npm run install-all ``` #### Option B: Install Dependencies Manually ```bash # Install root dependencies npm install # Install backend dependencies cd backend npm install # Install frontend dependencies cd ../frontend npm install cd .. ``` ### Step 3: Database Setup #### 3.1 Create PostgreSQL Database 1. **Open PostgreSQL command line or pgAdmin** 2. **Create the database:** ```sql CREATE DATABASE courseworx; ``` #### 3.2 Configure Environment Variables 1. **Copy the environment template:** ```bash cd backend cp env.example .env ``` 2. **Edit the `.env` file with your database credentials:** ```env # Database Configuration DB_HOST=localhost DB_PORT=5432 DB_NAME=courseworx DB_USER=your_postgres_username DB_PASSWORD=your_postgres_password # JWT Configuration JWT_SECRET=your_super_secret_jwt_key_here_make_it_long_and_random JWT_EXPIRES_IN=7d # Server Configuration PORT=5000 NODE_ENV=development ``` #### 3.3 Initialize Database and Create Default Users ```bash cd backend npm run setup-db ``` This will: - Create all database tables - Set up relationships between models - Create default users (Super Admin, Trainer, Trainee) ### Step 4: Start the Application #### Development Mode (Recommended for first-time setup) ```bash # From the root directory npm run dev ``` This command will: - Start the backend server on port 5000 - Start the frontend development server on port 3000 - Open the application in your browser at `http://localhost:3000` #### Alternative: Start Services Separately ```bash # Terminal 1 - Start Backend cd backend npm run dev # Terminal 2 - Start Frontend cd frontend npm start ``` ### Step 5: Access the Application 1. **Open your browser** and go to `http://localhost:3000` 2. **Login with default credentials:** **Super Admin:** - Email: `admin@courseworx.com` - Password: `admin123` **Trainer:** - Email: `trainer@courseworx.com` - Password: `trainer123` **Trainee:** - Email: `trainee@courseworx.com` - Password: `trainee123` ## 🔧 Troubleshooting ### Common Issues #### 1. Database Connection Error ``` Error: connect ECONNREFUSED 127.0.0.1:5432 ``` **Solution:** - Ensure PostgreSQL is running - Check your database credentials in `.env` - Verify the database `courseworx` exists #### 2. Port Already in Use ``` Error: listen EADDRINUSE :::5000 ``` **Solution:** - Change the port in `.env` file - Or kill the process using the port #### 3. Node Modules Not Found ``` Error: Cannot find module 'express' ``` **Solution:** - Run `npm install` in the respective directory - Or run `npm run install-all` from root #### 4. Frontend Build Errors ``` Error: Module not found ``` **Solution:** - Clear node_modules and reinstall: `rm -rf node_modules && npm install` - Check if all dependencies are properly installed ### Environment Variables Reference | Variable | Description | Default | Required | |----------|-------------|---------|----------| | `DB_HOST` | PostgreSQL host | localhost | Yes | | `DB_PORT` | PostgreSQL port | 5432 | Yes | | `DB_NAME` | Database name | courseworx | Yes | | `DB_USER` | Database username | - | Yes | | `DB_PASSWORD` | Database password | - | Yes | | `JWT_SECRET` | JWT signing secret | - | Yes | | `JWT_EXPIRES_IN` | JWT expiration time | 7d | No | | `PORT` | Backend server port | 5000 | No | | `NODE_ENV` | Environment mode | development | No | ## 👥 Default Users After running the database setup, you can login with these default accounts: ### Super Admin - **Email**: admin@courseworx.com - **Password**: admin123 ### Trainer - **Email**: trainer@courseworx.com - **Password**: trainer123 ### Trainee - **Email**: trainee@courseworx.com - **Password**: trainee123 ## 📁 Project Structure ``` CourseWorx/ ├── backend/ # Node.js/Express backend │ ├── config/ # Database configuration │ ├── models/ # Sequelize models │ ├── routes/ # API routes │ ├── middleware/ # Custom middleware │ ├── scripts/ # Database setup scripts │ └── server.js # Main server file ├── frontend/ # React frontend │ ├── src/ │ │ ├── components/ # Reusable components │ │ ├── pages/ # Page components │ │ ├── contexts/ # React contexts │ │ ├── services/ # API services │ │ └── App.js # Main app component │ └── public/ # Static assets ├── package.json # Root package.json └── README.md # This file ``` ## 🔧 API Endpoints ### Authentication - `POST /api/auth/login` - User login - `GET /api/auth/me` - Get current user - `PUT /api/auth/profile` - Update profile - `PUT /api/auth/change-password` - Change password ### Users (Super Admin Only) - `GET /api/users` - Get all users - `POST /api/auth/register` - Create new user - `PUT /api/users/:id` - Update user - `DELETE /api/users/:id` - Delete user ### Courses - `GET /api/courses` - Get all courses - `GET /api/courses/:id` - Get course details - `POST /api/courses` - Create course - `PUT /api/courses/:id` - Update course - `DELETE /api/courses/:id` - Delete course ### Enrollments - `POST /api/enrollments` - Enroll in course - `GET /api/enrollments/my` - Get user enrollments - `PUT /api/enrollments/:id/status` - Update enrollment status ### Attendance - `POST /api/attendance/sign-in` - Sign in for session - `POST /api/attendance/sign-out` - Sign out from session - `GET /api/attendance/my` - Get attendance history ### Assignments - `POST /api/assignments` - Create assignment - `GET /api/assignments/course/:courseId` - Get course assignments - `PUT /api/assignments/:id` - Update assignment ## 🎨 UI Components The application uses a consistent design system with: - **Responsive Design**: Works on desktop, tablet, and mobile - **Dark/Light Mode**: Built-in theme support - **Accessibility**: WCAG compliant components - **Loading States**: Smooth loading indicators - **Error Handling**: User-friendly error messages ## 🔒 Security Features - **JWT Authentication**: Secure token-based authentication - **Password Hashing**: bcrypt for password security - **Input Validation**: Server-side validation with express-validator - **CORS Protection**: Configured CORS for security - **Helmet**: Security headers middleware ## 🚀 Deployment ### Backend Deployment 1. Set up a PostgreSQL database 2. Configure environment variables 3. Run `npm install` and `npm start` ### Frontend Deployment 1. Run `npm run build` 2. Serve the `build` folder with a web server 3. Configure API proxy or CORS ## 🤝 Contributing 1. Fork the repository 2. Create a feature branch 3. Make your changes 4. Add tests if applicable 5. Submit a pull request ## 📝 License This project is licensed under the MIT License. ## 🆘 Support If you encounter any issues: 1. Check the console for error messages 2. Verify database connection 3. Ensure all environment variables are set 4. Check if all dependencies are installed ## 🔮 Future Enhancements - [ ] Real-time notifications - [ ] Video conferencing integration - [ ] Payment gateway integration - [ ] Mobile app development - [ ] Advanced analytics dashboard - [ ] Multi-language support - [ ] File upload system - [ ] Email notifications --- **CourseWorx** - Empowering education through technology