Role-based OpenCourseWare Web App in Vue.js + Spring Boot
SUSTech 2024 Fall Project of CS309 - Object-oriented Analysis and Design Led by Professor Yuqun ZHANG
.
├── SUSSYCourses
│ ├── build
│ ├── gradle
│ ├── node_modules
│ └── src
│ ├── frontend # main folder of frontend code
│ │ ├── src
│ │ │ ├── App.vue
│ │ │ ├── assets
│ │ │ ├── components
│ │ │ │ ├── 403.vue
│ │ │ │ ├── 404.vue
│ │ │ │ ├── AccountSecurity.vue
│ │ │ │ ├── AdminPage.vue
│ │ │ │ ├── AnnouncementForm.vue
│ │ │ │ ├── BarChart.vue
│ │ │ │ ├── Chat.vue
│ │ │ │ ├── CommentSection.vue
│ │ │ │ ├── CourseBreakdown.vue
│ │ │ │ ├── CourseList.vue
│ │ │ │ ├── CoursePage.vue
│ │ │ │ ├── Courseware.vue
│ │ │ │ ├── DoughnutChart.vue
│ │ │ │ ├── EditProfile.vue
│ │ │ │ ├── FilePreview.vue
│ │ │ │ ├── Guideline.vue
│ │ │ │ ├── HelpSupport.vue
│ │ │ │ ├── HeroBanner.vue
│ │ │ │ ├── LogIn.vue
│ │ │ │ ├── MainPage.vue
│ │ │ │ ├── Notifications.vue
│ │ │ │ ├── PrivacyPolicy.vue
│ │ │ │ ├── ProfilePage.vue
│ │ │ │ ├── ProfileSidebar.vue
│ │ │ │ ├── PublicCoursePage.vue
│ │ │ │ ├── PublicCourseware.vue
│ │ │ │ ├── PublicFilePreview.vue
│ │ │ │ ├── RatingAndReview.vue
│ │ │ │ ├── Security.vue
│ │ │ │ ├── SignUpStudent.vue
│ │ │ │ ├── SignUpTeacher.vue
│ │ │ │ ├── StreamInfo.vue
│ │ │ │ ├── StudentPage.vue
│ │ │ │ ├── StudentsList.vue
│ │ │ │ ├── TeacherCourse.vue
│ │ │ │ ├── TeacherCourses.vue
│ │ │ │ ├── TeacherCoursesDetails.vue
│ │ │ │ ├── TeacherCourseware.vue
│ │ │ │ ├── TeacherDashboard.vue
│ │ │ │ ├── TeacherNotifications.vue
│ │ │ │ ├── TeacherPage.vue
│ │ │ │ ├── TeacherProfile.vue
│ │ │ │ ├── TeacherStreaming.vue
│ │ │ │ ├── TermsOfUse.vue
│ │ │ │ ├── UserInfo.vue
│ │ │ │ ├── UserList.vue
│ │ │ │ └── VerifyEmail.vue
│ │ │ ├── main.js
│ │ │ ├── router
│ │ │ │ └── index.js
│ │ │ └── services
│ │ │ └── axiosInstance.js
│ │ └── vue.config.js
│ ├── main # main folder of backend code
│ │ ├── config
│ │ │ ├── admin_key.json
│ │ │ └── storage_key.json
│ │ ├── java
│ │ │ └── com
│ │ │ └── sustech
│ │ │ └── cs309
│ │ │ └── project
│ │ │ └── sussycourses
│ │ │ ├── SussyCoursesApplication.java # driver code of Spring Boot
│ │ │ ├── controller
│ │ │ │ ├── AuthController.java
│ │ │ │ ├── CommentsController.java
│ │ │ │ ├── CourseController.java
│ │ │ │ ├── CourseStudentController.java
│ │ │ │ ├── CoursewareController.java
│ │ │ │ ├── CoursewareStudentController.java
│ │ │ │ ├── NotificationController.java
│ │ │ │ ├── RatingController.java
│ │ │ │ ├── StreamController.java
│ │ │ │ └── WebAppUserController.java
│ │ │ ├── domain
│ │ │ │ ├── Comment.java
│ │ │ │ ├── Course.java
│ │ │ │ ├── CourseStudent.java
│ │ │ │ ├── Courseware.java
│ │ │ │ ├── CoursewareStudent.java
│ │ │ │ ├── Notification.java
│ │ │ │ ├── Rating.java
│ │ │ │ ├── Role.java
│ │ │ │ ├── Stream.java
│ │ │ │ └── WebAppUser.java
│ │ │ ├── dto
│ │ │ │ ├── AdminCourseDetailResponse.java
│ │ │ │ ├── ApprovedCoursesResponse.java
│ │ │ │ ├── BasicCourseResponse.java
│ │ │ │ ├── ChangePasswordRequest.java
│ │ │ │ ├── CommentCreationRequest.java
│ │ │ │ ├── CommentResponse.java
│ │ │ │ ├── CourseProgressResponse.java
│ │ │ │ ├── CourseRequest.java
│ │ │ │ ├── CourseStudentListResponse.java
│ │ │ │ ├── CoursewareListResponse.java
│ │ │ │ ├── CoursewareRequest.java
│ │ │ │ ├── CoursewareResponse.java
│ │ │ │ ├── CoursewareVersionResponse.java
│ │ │ │ ├── CourseworkDataResponse.java
│ │ │ │ ├── InstructorCourseDetailResponse.java
│ │ │ │ ├── InstructorDetailResponse.java
│ │ │ │ ├── LoginRequest.java
│ │ │ │ ├── NotificationCreationRequest.java
│ │ │ │ ├── NotificationListResponse.java
│ │ │ │ ├── NotificationResponse.java
│ │ │ │ ├── RatingRequest.java
│ │ │ │ ├── RatingResponse.java
│ │ │ │ ├── RegistrationRequest.java
│ │ │ │ ├── ReplyRequest.java
│ │ │ │ ├── StreamResponse.java
│ │ │ │ ├── StudentCourseDetailResponse.java
│ │ │ │ ├── StudentCourseListResponse.java
│ │ │ │ ├── StudentDetailResponse.java
│ │ │ │ ├── TopRatedCourseResponse.java
│ │ │ │ ├── TopRatedInstructorResponse.java
│ │ │ │ ├── UpdateCoursewareRequest.java
│ │ │ │ ├── UpdateUserRequest.java
│ │ │ │ └── UserResponse.java
│ │ │ ├── repository
│ │ │ │ ├── CommentRepository.java
│ │ │ │ ├── CourseRepository.java
│ │ │ │ ├── CourseStudentRepository.java
│ │ │ │ ├── CoursewareRepository.java
│ │ │ │ ├── CoursewareStudentRepository.java
│ │ │ │ ├── NotificationRepository.java
│ │ │ │ ├── RatingRepository.java
│ │ │ │ ├── RoleRepository.java
│ │ │ │ ├── StreamRepository.java
│ │ │ │ └── WebAppUserRepository.java
│ │ │ ├── security
│ │ │ │ ├── CustomUserDetails.java
│ │ │ │ └── SecurityConfig.java
│ │ │ ├── service
│ │ │ │ ├── CommentService.java
│ │ │ │ ├── CourseService.java
│ │ │ │ ├── CourseStudentService.java
│ │ │ │ ├── CoursewareService.java
│ │ │ │ ├── CoursewareStudentService.java
│ │ │ │ ├── CustomUserDetailsService.java
│ │ │ │ ├── EmailService.java
│ │ │ │ ├── NotificationService.java
│ │ │ │ ├── RatingService.java
│ │ │ │ ├── StreamService.java
│ │ │ │ ├── VerificationTokenService.java
│ │ │ │ └── WebAppUserService.java
│ │ │ └── utils
│ │ │ └── CloudUtils.java
│ │ └── resources
│ │ ├── application.yml
│ │ ├── public
│ │ ├── schema.sql
│ │ ├── static
│ │ └── templates
│ └── test
└── README.md
- Course Management
- Approve course creation requests submitted by instructors
-
Course Management
- Apply for course creation; courses can be:
- Open (anyone can join)
- Semi-open (students must request to join)
- Non-open (instructors manually add students)
- Make announcements to students in a specific course
- Start a live stream for remote learning and automatically notify students
- Apply for course creation; courses can be:
-
Courseware Management
- Upload courseware, including but not limited to DOCX, PDF, MD, PPTX, and MP4
- Categorize courseware into lectures, assignments, and projects
- Update courseware with version tracking
- Set download permissions for courseware
- Enforce video anti-cheat (only one video can be played at a time)
- Upload supplementary materials (e.g., data, code) for students
-
Course Evaluation
- Receive student feedback on content quality, teaching effectiveness, and workload balance
-
Course Management
- Join an open course or request to join a semi-open course
- Receive notifications for updates and course announcements
-
Learning Resources
- View top-rated courses and instructors
- Access and download courseware (if permitted)
- Watch course videos online or join a live lecture stream
- Access a free LLM/AI chatbot
-
Engagement & Feedback
- Like favorite courses
- Comment on courseware and participate in instructor Q&A (supports text and media formats)
- Submit course evaluations with ratings and reviews
-
Homework & Progress
- Submit homework assignments
- Track courseware viewing progress
- Earn points for engagement, including providing feedback and completing course materials
Ensure you have the following installed:
- Node.js (Latest LTS recommended)
- Vue CLI (
npm install -g @vue/cli) - Java 17+
- Gradle
- PostgreSQL
- Start PostgreSQL and create a database:
CREATE DATABASE cs309_project;
- Update
application.ymlinsrc/main/resources/with your database credentials:spring: datasource: url: jdbc:postgresql://localhost:5432/cs309_project username: your_username password: your_password
-
Navigate to the backend directory:
cd main -
Build and run the Spring Boot application:
./gradlew bootRun
-
However, IntelliJ IDEA is a recommended approach to run the backend server.
The backend will start on http://localhost:8081.
- Navigate to the frontend directory:
cd frontend - Install dependencies:
npm install
- Run the server:
The frontend will be available at http://localhost:8080.
npm run serve
- Ensure PostgreSQL is running.
- Start the backend using
./gradlew bootRun. - Start the frontend using
npm run dev. - Open
http://localhost:8080in your browser.
- Port Conflicts: Ensure no other applications are running on ports
8080or8081. - Database Connection Issues: Double-check PostgreSQL credentials in
application.yml. - Vue Not Loading: Clear cache and restart the development server.
rm -rf node_modules package-lock.json npm install npm run serve
| Name | Role |
|---|---|
| Jaouhara Zerhouni Khal | Frontend |
| Tan Hao Yang | Frontend |
| Harrold Tok Kwan Hang | Backend |
| Hok Lay Heng | Backend |
