Course Prerequisite Visualizer(CPV) banner

Course Prerequisite Visualizer(CPV)

24 devlogs
61h 11m 12s

CPV is built and designed for university students to visualize and understand the structure of courses in their degree. They can understand the prerequisite and follow ups of courses that will help them to easily plan their degree and thus kind of…

CPV is built and designed for university students to visualize and understand the structure of courses in their degree. They can understand the prerequisite and follow ups of courses that will help them to easily plan their degree and thus kind of achieve their goals. Right now there are only 2 degrees, will update gradually😥

This project uses AI

The only AI was the browser AI whenever I searched for something like I forgot a keyword kinda so

Demo Repository

Loading README...

ghost

Shipped this project!

Hours: 61.19
Cookies: 🍪 642
Multiplier: 10.49 cookies/hr

So I built a course pre-requisite visualizer, though visualization is its secondary feature now like I added degrees support in it. The learning and hardest for me was database design kinda like how to manage all the degrees, courses and pre-requiste relationships and yep I learned to create a chat bot. My first chat bot is integrated in it.
In the readme file on github repo, steps are given on how to run this project locally as its main function is its dashboard but that is protected on the live site. So, please do see it.
For the live site, I only added two degrees as these two already took alot of time so anyways that was all.

ghost

Finally, uploaded both backend and frontend online and as inflation u know guys so had to upload on a previous domain of yappy yap. Added readme file and resolved cookies and session errors, and honestly speaking I lost count on the number of errors like after uploading there were error like … but anyways all completed just the data needs to be uploaded for the courses.

Attachment
0
ghost

Added error and success messages for all the dashboard endpoints and also added error support in cpv ai, like if server is down so the user knows….

Attachment
0
ghost

So, I integrated an ai chat bot inside the site, as I’m using free tokens so its abit slow but it works like it answers user queries and it also stays in domain like answering questions using the uploaded data and doesnt answers irrelevant qs.

0
ghost

So I added a basic contact us page with the option of copying the email or phone no to clipboard. N esc key function to leave the input field in the both search field too.

0
ghost

I added degree support on the graph visualizer page, now graph only shows selected degree data and pre requisites of that degree only, not every course like before.

0
ghost

Changed the layout of home page a bit and added 3 basic questions and their answers and yep also added a new instruction on the graph page and set up local storage for the degree page to remember the degree.

Attachment
0
ghost

I added a degree structure page where the degree data of the selected degree is displayed. Users can click on a course to get to know it’s full course details in the search course page. Further there was an error while adding a course to degree like I was checking whether a pre requisite of course existed after but I didn’t check if the follow up course exists before it. So, I added that check too and the dashboard works fine🙃

0
ghost

So last time I worked on associating course with a degree, ofc dis associating is also required so I worked on it and there were multiple ways but I went with the simplest and implemented a simple course delete from degree page.

0
ghost

This has been a long devlog as I was working on associating a course with a degree and I decided to add some checks like there must be some. So no course that violates maximum credit hours per semester or degree is not allowed and the one that took most time was that you cannot add a course if it’s pre requisite is already in higher semesters and yepp ofc no duplicates🤧. N yeah the devlog video was a bit longer so I doubled its speed…

0
ghost

So I decided that course pre requisite should not be for only one degree courses. In fact there should be multiple degrees options so I configured a simple degree add page and so now I will work on that like managing courses per degrees.

0
ghost

There were some errors while adding a course, the page needed to be refreshed before adding another course. Now u can add any courses u want, without the need to refresh. And after each course add new data is fetched from database instead of modifying at the frontend. Further I changed the alignment of the dashboard nav to place logout on right and home on left side.

Attachment
0
ghost

I configured the search page that allows user to search a course both by the code and title. The important part was live suggestions to user as they type in the search bar, this was kinda new to me like I have never created it before. The result of search query provides details about the course including code, title, pre requisites and also follow ups from that course…

0
ghost

For the course pre-requisite visualizer graph I added a border fixed area and there was a problem that it stopped scrolling and took that as zooming in and out. So I added a button for users to enable and disable that zoom as u know, diverse users, for those who want to zoom and those who just want to see the graph.

0
ghost

So before I was just splitting the code and title of courses by - but now when I added real data, it failed because codes of courses often contain ‘-’ 🤦‍♂️🤦‍♂️. So I Resolved the error by separating them so there is no video kinda as there is no visual change like the functionality is same except that codes with ‘-’ are allowed.

Attachment
0
ghost

There were some errors of importing packages, I resolved those. I noticed those now 🙂. And yep I noticed course delete page was very bad like manually typing and remembering the course code so I added a select list, I think that’s make it a bit easier kinda at least to me.

0
ghost

So I created a simple dashboard and a logout button that allows users to logout and the back navigation is a simple home button in the navbar beside the profile icon. I kept it simple as it is not kinda the core and the admins has atleast some knowledge of using a computer’🙃.

Attachment
0
ghost

I worked on the super user page and added basic functionality of adding and removing users and I set the theme of the admin area as light and yepp also configured basic admin check when user tries to reach directly to admin pages using URL

0
ghost

This time I worked on the course update page that allows user to update course name and it’s pre requisites or just pre requisites depending on whatever u want. So yeah that was it, next I’m gonna work on adding super user page that can add and remove admins.

0
ghost

So, I worked on a basic delete page that deletes a course after seeing its code only, no other options are available yet. Got tired of backend so worked on frontend to set the FAQ animation and a bit of responsiveness of a benefit text area.

0
ghost

So I worked on the course add page and removed the AI code that I had to generate urgently last time and added my own functionality allowing the user to add Pre requisites along with the course rather than manually adding the courses. A further development that can be done on this that I check pre requisites chains, infact I tried it but it requires alottttt of db calls, so I m leaving it for now and I’m gonna work on delete course page now.

0
ghost

So, I decided to use this project for college but the presentation was yesterday and the project was too far from complete. So first I tried but then I just had to AI slop. I HATE TO SAY IT BUT THE MOST OF THE CODE IN THIS TIMELINE IS AI SLOP😭😭. But I intend to change it all. So I just added cystoscope, a js library for graphs, to render the graph and add endpoint at backend to recieve data and yep I added student and admin option to differentiate both pages though no work has been done on that side except sign in area.

0
ghost

So I worked on the home page of the site. It only contains one animation though. Like I tried to add for the Q n A area but couldn’t 😟. But I hope to get it done. Like now I’ll focus on the core functionality of site.

0
ghost

So I setup the requirements sort of for the project and created a navbar. I don’t know why like navbar always takes lot of my time. Ig maybe because I m developing a site after a long time with this being my second site😭😭.

0
ghost

I’m working on my first project! This is so exciting. I can’t wait to share more updates as I build.

Attachment
0