🏆 Awarded 2nd Place in JR ACADEMY Full-stack Bootcamp 10th Commercial Project Competition.
- Content
- About JR Academy Projects 3 - Campus system 1.0
- How to interact with the client site
- UI Design
- Supported Features
- About Redux Dev Tool
- Future Improvement
This is project three from JR Academy. We are team RMR101. Objective of the project is to deliver a learning management system for an educational purpose.
Tech stack for frontend summary:
Websites & UI:
- React
- Sass (module)
- React-redux
- React-router
- Axios
Testing & Type Checking:
- Jest & Jest-dom
- Testing library
- PropTypes library
Security:
- Jwt
Clouds:
- AWS S3 & Presigned URL
- AWS SDK
CI/CD:
- Travis CI
- Github page
- Docker
Development:
- Agile (Scrumn)
- Github flow
Miscellaneous:
- Particle.js
For website, Visited here. However, you do need to run the backend for this website in order to interact with it. Quick guide to set up backend of this project.
All following options REQUIRE a set up of backend at localhost:8080
Set up Backend and docker container for MySql image. Quick guide to set up backend of this project.
This website is hosted at github page, all you need is to log in as admin account.
ADMIN account:
Username: admin
Password: admin
Then you can kick off from there.
For student and teacher account, initial password is the same as the user ID.
eg:
Username: S29036164
Password: S29036164
- Navigate to the file where you want to test this application, then on your terminal run
git clone https://github.com/rmr101/campus-frontend.git
- Change directory into
cd campus-frontend
. - Under to the root directory run
docker-compose up -d --build
. - Then visit
https://localhost:3010
on your browser.
- Navigate to the file where you want to test this application, then on your terminal run
git clone https://github.com/rmr101/campus-frontend.git
- Change directory into
cd campus-frontend
. - run
npm install
oryarn install
npm start
oryarn start
, make sure you have set up the back end for this project.- This project also implement Redux Dev Tool extension on chrome. If haven't installed them please check here.
- Pull the image from docker hub using the following command :
$ docker pull jackytsheng/campus-frontend
$ docker run --rm -it -d --name campus-frontend -p 3010:80/tcp jackytsheng/campus-frontend
- Then visit
https://localhost:3010
on your browser.
For more technical detail about how to upload using file to AWS S3 using presigned url, checkout Jacky's article here.
- Support file type: .pdf
- File size limit : Less than 15 MB.
Note: student can re-upload assignment until due date has passed.
After reviewing, teacher can leave a report.
Note: student is not allowed to view assignment again after teacher has marked it, for academic confidentiality.
Note: login in as admin, create student/teacher at dashboard.
Upon successful creation you will receive email notification.
Note: Search bar supports fuzzy searching
Note: Currently admin can:
- Reset user password
- Deactivated a user
Upon deactivation, user can no longer login, and will not appear in any search result.
Note: login in as admin, create subject at dashboard.
- Only accept 3 letter alphabet for subject code (regex implemented).
- Course code is made out of 3 letter alphabet and 8 numbers.
Upon creation subject will appears in course market subject list.
Note: login in as admin, create course under any selected subject. Teacher must be assigned.
Once click, a pop up shows up.
Note: debounce associative-word searching is supported
Before confirming, teacher can still be re-assigned. But once post, teacher can't be reassigned for this course at this semester.
Two ways that an admin can find a course:
- Through global searching.
- Through Navigating to the subject that has this course.
Under course detail page, admin has the authority to change course content (excpet: year, semester, teacher)
Upon enrollment, student can find it at the Nav bar.
Any user (except administration account) can change their password at the profile page.
Upon successfully changing password you will receive email notification.
This project have used redux dev tool.
If you haven't already installed it for your browser, you could do so at this link
- Implement Router for component navigation
- Implement TS, or better managed with PropTypes, for maintainability
- Use Style Component / System for better readability and maintainability
- Deploy App on EC2 as docker image
- Improve UX by caching necessary formation
- Improve unit test coverage
- Support multiple teachers teaching
- Support payment system
- Support file sharing for all courses
- Make changing password after first login mandatory