-
Home page where its a one-look view at the modules and summary
-
no fuss signup to save your module plan easily.
This idea was conceptualized when my friends and I were planning our modules together across winter, in preparation for LOA or module mappings for Student Exchange Programme. However, we realised that there is an extremely large selection of modules targeting different areas and even more prerequisite and preclusions that hindered a clear and easy way of visualising our academic plan.
Hence, we decided to create NUS Module Planner.
What it does
Our application presents a One Look View (for Computer Science degree only as per of the time limit for this hackathon) of all the modules and criteria required for different Focus areas. The web application will also inform the user that a module cannot be added since its prerequiste modules were not added earlier. The summary page shows a record of the total of MCs taken in each field and calculates if the graduation criteria is met.
How I built it
We build it using ReactJS and NodeJS, using a few libraries such as React Beautiful DnD for the drag and drop modules and Material-UI for a small part of the UI. We deployed our application and linked it to the Real time Database on Firebase as well as Authentication.
Challenges I ran into
While some of us were familiar with React, we were not accustomed to its full flexibility such as creating functions and class styles outside of the component declaration. It was also our first time exploring the usage of Drag and Drop modules and hence, it took a long time to deploy our Drag and Drop function and resolve the bugs. Since we were all working from home, merge conflicts were aplenty but we did our best to resolve it.
Accomplishments that I'm proud of
We am proud that we created something that we were satisfied with within the time limit of the hackathon since the decision to join Hack&Roll was spontaneous and none of us had any concrete experience in the tech stack that we used. We pressed on through the failures and created an MVP which I feel can be expanded on further in future projects.
What I learned
We learned about the different ways to structure a React Component as well as the different drag and drop libraries out there. We also learnt about the importance of documentation from reading multiple Drag and Drop libraries and getting lost before deciding on using the clearest library, React beautiful Dnd.
Most importantly, we learnt that communication is extremely important to prevent overriding each person's hardwork and to save time.
What's next for Nus Module Planner
NUS Module Planner now has a very rudimentary UI and UX. It is also limited to just Computer Science degree in NUS. Moving forward, we hope to have the opportunity to grow this project to a viable product for the betterment of all NUS Students regardless of Degrees. We hope this will do good in coupling with other student-created products such as NUSmods to allow students to have an easier time planning their academia.
Log in or sign up for Devpost to join the conversation.