utdnebula / planner Goto Github PK
View Code? Open in Web Editor NEWA tool for the UTD community to plan out their coursework 📚
Home Page: https://planner.utdnebula.com
License: MIT License
A tool for the UTD community to plan out their coursework 📚
Home Page: https://planner.utdnebula.com
License: MIT License
Nebula Web is meant to be portable. A user must be able to click a button in the planner and obtain a machine-readable copy of their course plan containing a copy of all the courses they intend on taking.
To export a plan, the user must able to download a JSON file with the StudentPlan
format by clicking a button in the degree planner UI.
Currently, schedule data is only persisted locally. However, there are use cases where a user may desire to have their data synced to a remote location:
The following data would be stored in the Comet Planning Cloud Firestore database:
As this is an ACM Development project, Comet Planning will be using ACM's Auth0 setup to easily implement sign-in.
The other option for synchronizing user data across devices is to focus on using a purely file-based system for saving data, but doesn't have the ease of use as a solution built into the app. As such, file-based save data will be complementary to the primary sign-in method of synchronizing data.
Eventually, some Comet Planning data may be retrieved/shared from ACM's member database, but that is not a goal for this initial auth implementation.
The onboarding flow is a way for students to personalize their college planning experience. As of now, the onboarding stands as an HTML shell without any functionality. The form data needs to be saved onto our nebula web database hosted on Google Cloud Platform.
An approach to connect the backend would be to take each question's response and store it in a variable on the firestore database. This would allow for greater freedom when integrating with the algorithm for a personalized degree plan.
Alternatively, each page can be stored as a single variable that can be broken down before integrating responses into the algorithm.
I will give you the freedom to implement a backend solution to this problem. If you have an idea different from those above, feel free to implement it.
The information regarding the current state of the firebase can be found here.
I expected to be able to add past semesters after creating a new degree plan.
Adding a new semester begins with Fall 2021.
Beta 0.1.0
Chrome
No response
There are some issues throughout the repo where we reference nebula.acmutd.co, the ACM discord server, and the [email protected] email among other things. Please examine the codebase for all locations where we reference outdated information and update it.
Please update these outdated values among others you may notice:
@acmutd/nebula-maintainers
-> @UTDNebula/planner
Please prioritize updating documentation files such as README and CONTRIBUTING as soon as possible. Afterwards, update the other files such as the terms webpage.
Upon the circumstance that course duplicates appear on the sidebar as a result of double majors, user might be confused by seeing these duplicates given they can only take one instance of a particular class.
Once user drags an instance of a duplicate on a semester board, the other duplicated instance disappears from the sidebar.
Currently, Nebula has no license. This means that all code contributed to the project is All Rights Reserved to the contributors who contributed it, and cannot be redistributed or modified without explicit permission. Though I doubt anyone in ACM would hold the project hostage, having a proper license will prevent any external contributors from doing so. See more information here: https://choosealicense.com/no-permission/.
I would recommend using the AGPL v3.0 or later, which allows anyone to redistribute and modify Nebula, but requires that anyone who does so provide a license and copyright notice, disclose their modified source, and also license the derived work under the AGPL. The AGPL also considers network use to be redistribution, which would prevent anyone from taking code from Nebula and using it to providing a service which is not open source.
If requiring derived works to license under AGPL is too restrictive, the MIT License is another good choice. It also allows anyone to redistribute and modify Nebula, and requires a license and copyright notice to be distributed with the derived work. However, it does not restrict the license of the derived work or require the derived work's source to be disclosed.
Additionally, there are many more licenses detailed here, if the AGPL or MIT License do not seem right for the project: https://choosealicense.com/licenses/.
Please also note that re-licensing a project (or choosing an initial one) technically requires explicit permission from all past contributors.
I could have sworn the project was already using the MIT License, but we should adopt a license before going any further. We should adopt it because technically, the project isn't an open source project and is possibly subject to legal disputes, something that a university may want to avoid. GitHub's open source guide contains more info on this.
Are all of the maintainers fine with this? Everyone will need to give their written permission.
The MIT License is very simple to understand and generally absolves us from liability. Additionally, all substantial uses of Planner would have to include a copyright notice.
Using "The Project Nebula Maintainers" gives the group as a whole ownership so that maintenance can be efficiently transferred to new groups of contributors without having to get everyone's permission every time a change to the codebase is made. Existing maintainers would still be attributed for the contributions they made.
The MIT License uses this template:
MIT License
Copyright (c) [year] [copyright holder]
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
This is issue will establish the main UI components of our website. The top bar to navigate, the sidebar where the classes for the degree plan are included, and the semester bar where the user will create their four year will be created
The New Plan Dialog is a popup window that appears whenever the button to create new degree plan is clicked. The information collected from this dialog will be used to create the plan metadata. The plan metadata should contain general information about the plan (i.e. major, duration), as well as information that will be used by the degree plan generator.
The dialog has already been created and can be found in '/components/planner/NewPlanDialog.tsx'. All that's left is to complete the dialog and integrate it with the rest of the application.
Here is some information the dialog should get from the user:
Feel free to add to this list. Once the user is done, the data collected should be stored in Redux and the external database.
The dialog should somewhat resemble the image below, but it doesn't have to be exactly like it.
I’ve been using Planner to lay out my real past courses, and I’ve run into an opportunity to improve the speed and usability of doing this. For example, if I add PHYS2325 to a semester, then it would be great if it suggested I add PHYS2125 to the same semester, since they’re required to be taken together. This seems like it could be a fairly easy to way to streamline the process.
In order to achieve this, it would be necessary to know corequisite requirements for all courses. Given this, presumably it would be fairly trivial to check to see if a course’s corequisites are present in a semester at the time a course is added to the degree plan. If not, some sort of UI could be shown to ask the user if they want to automatically add the lab/problem section. This could simply be a pop-up, or maybe an inline “template” course as shown in the attached rough sketch.
Create the page where the user can include their major/minors and course they have already taken.
Include Material-UI components and the information on the markups.
This is to make sure that the information on the sidebar is in a proper layout.
[Tasked List TBD]
Although Comet Planning is a single-page application, routing will make URLs more semantic and allow specific functionality to be separated into different pages. This will allow standard browser "back" functionality to function as intended and aid the user experience.
The app will support a few different pages:
/
- The landing page, provides information about the app when no user is authenticated/schedules
- A list of all the currently authenticated user's schedules/schedules/:id
- A viewing page displaying schedule information and ability to input grades for attempted courses/schedules/:id/plan
- The primary page where schedules are edited/auth
- A page to sign in or be referred to a third-party identity providerI attempted to set up a local copy of the Planner, and I followed the Set-up instructions in the Readme. I cloned the project, with Node.js and NPM installed (as the only listed requirements) and ran npm start
.
When I attempted to set up a local copy of the planner to test changes, I followed the instructions in the Readme only to find that the project appears to require Next.js. When I executed npm start
, I was presented with errors that suggest Next wasn't installed. Even after installing it, I get the following error when running:
Error: Could not find a production build in the '/Users/.../Nebula/planner/.next' directory. Try building your app with 'next build' before starting the production server.
I'm sure I'm missing some easy setup, but the necessary steps should be in the Readme as well if needed.
Beta 0.1.0
No response
No response
I expected to see a manifest.json file inside the repository.
There is no such manifest.json file.
Beta 0.1.0
No response
No response
When #47 is implemented, we will have the ability to export degree plans to files, but that's no use if we can't use the machine-readable format. A user must be able to import a course plan and have it replace their currently active plan or create another plan that displays in their plan list.
At some point, we will have to consider how to handle data syncing, namely whether or not to outright replace the currently loaded plan or to use some more sophisticated conflict resolution strategy, like only overriding future semesters based on an imported plan.
@wbne, how do you think we can handle this?
Comet Planning will function adequately for a self-service degree planner, but the key value added in creating a whole service around the core functionality is guiding the student and providing recommendations on what courses to take. Additionally, for Comet Planning to have long-term relevance and longevity for a student's academic career, it needs to be a place that a student regularly checks, whether right before registration to determine what's next on the path to the student's degree or right after each semester to reflect.
This system should present contextual information to the user on the first screen they see when logged in. This comes in the form of notices featured prominently within the UI supplied by a combination of hard-coded and remotely-fetched admin-specified triggered.
Notices for this system will be generated by two categories of actions:
For user-initiated actions, we designate flags for certain events that are stored with the user and update the UI accordingly. For example, these flags could include:
For such flags, we can recommend actions to the student to better help them academically, personally, or professionally, like reducing courseload or talking to an academic advisor about academic resources.
Automated actions are largely triggered from pre-determined milestones in a student's academic career, including:
On page load, the service will use user information to check for milestones and display notices with actionable links to locations and user flows within the app. The triggers for these will initially be hard-coded into the client app, but they will eventually be customizable by service admin, like setting up monitors based on analyzing a student's academic performance and pre-determined long-term goals.
Additionally, there should be some service administrator-operated means of informing users about important service updates and for trusted users/campus administrators to put announcements.
For convenience sake, Comet Planning should allow school and service administrators to make announcements about important academic policies or at least include a frictionless way to display links to existing academic resources. On the admin side, there should be some console that allows creation of announcements displayed service wide and for students within specific schools/departments. These announcements may have defined start and optional end date and include a title, description, and optional link with call-to-action text.
Announcements could be bundled into the app's UI instead of being fetched from a remote source, but this would require developer input and wouldn't scale well. Thus, a dedicated component of the admin UI is preferable.
Based on the code that was written by Willie, I will use Material-UI and make that page look pretty.
Have interactive and graphical way to view a course's grade distributions and prerequisites/post-requisites
The current way to view grades and prerequisites is scattered across numerous websites and requires lots of effort just to analyze one course. With the data from UTDGrades and the course catalog, it should be possible to create a seamless experience where users can search up a class and get its grade distribution across semesters and which courses it requires and is required for.
Viewing the course should use as many pictures as possible such as nodes/edges, bar graphs, etc. to be as friendly and interesting as possible for the user.
The onboarding flow is a way for students to personalize their college planning experience. While most of the onboarding pages are present in the codebase, some of them are yet to be added. Find a way to add the requested pages and animate them to enhance the onboarding flow.
Here are the pages that need to be added:
You can find the Tailwind CSS code below. Your task is to integrate these into the current onboarding flow (hint: look at how the current onboarding pages are integrated ). Feel free to add animations that enhance the flow of these pages.
Special Note: The disclaimer page currently lacks a disclaimer. Come up with a description to the best of your ability.
Once finished, please commit your changes to the 'feature/new-onboarding' branch
Currently, the landing page on Planner looks a bit basic. It was supposed to be temporary and was meant to be replaced with a more animated and eye-popping page. Having a well-designed landing page is important in order to leave a good first impression on the user.
Below is a mockup of what the landing page should ideally look like.
Animating the page (i.e. adding a typewriter effect on the text, putting videos in the background) would help the page come to life.
https://www.figma.com/file/cycV0bxP6vTJJYUONFoBr0/Planner-Mockups?node-id=26840%3A43579 contains other variations of the page.
The extensive list of plan requirements on the sidebar makes it difficult for users to navigate them.
Once user has already met all the requirements for a specific category, that category automatically collapses to make more space for other courses.
The Degree Planner tool inside Nebula Planner is what students will use to plan out and customize the college experience they want to have. Currently, the Degree Planner has been partially implemented, but some things still need to be done before it is ready to be integrated into the rest of the project.
The design of the Degree Planner will aim to follow mockups from the "Nebula Mockups" Figma file.
The Course Generator should create an example degree plan schedule using the user's preferences.
The Course Generator should be a component that returns a generated degree plan while accommodating for the user's preferences such as minimum and maximum credit hours, AP credits, and summer or winter courses. By using the 2020-catalog.json and future files, the component should be able to generate a list of courses a user should take each semester.
Originally posted by WillieCubed June 29, 2021
A student must be able to input and view information about the courses they've taken.
This information includes:
Is there any information should be included here?
The styling for all of the components are in the same file as the component.
Move all of the Material-UI styling into one file for cleaner code.
At some point, the service will need a landing page for people potentially interested in using Comet Planning that describes its features before someone creates an account. It's also important that this doesn't increase friction for usability; there should be a clear way to navigate straight to the new user experience, access the admin dashboard from this page.
Additionally, the landing should automatically redirect to the app if the user is signed in (a user session is detected), following the functionality of sites like GitHub and Google Drive.
The landing page will include the following sections:
This page will serve as the root of the application. All routes with functionality will be moved to an /app
-prefixed route:
/ -> /app
/plan/:planId -> /app/plan/:planId
The page must be responsive and have a pleasant viewing experience on mobile devices and desktop.
In the toolbar, there must be two links: a shortcut link to the admin dashboard (currently comet-data-service.web.app) and a link to sign in.
Overall, the landing page will function mostly as a marketing page for Comet Planning with clear links to important service functionality.
The landing page should look follow the designs in this Figma document.
The Redux data store is a single source of truth for the Comet Planning app. It contains app state and exposes actions to modify user and (primarily) schedule data.
The Redux store needs to contain state for the current courses displayed on the screen but also contain actions to do the following:
On the Planner landing page, the footer should not incorrectly reference "ACM Development".
The landing page footer currently says, "Built with ❤️ and 💻 by ACM Development".
Beta 0.1.0
Safari
N/A
When I sign into Planner with multiple accounts, I expect to see the correct data for each user.
When you log in with a different account, the data from the previous account appears.
Beta 0.1.0
No response
No response
This aspect will make sure that if you place your cursor around a particular class, it will overlay and make sure that the course description will pop up alongside the pre-req/co-reqs for that class.
[Task List TBD]
There currently is no way to get a machine-readable representation of user schedule data.
For the sake of usability and as a first step towards saving data to user accounts, Comet Planning should have the ability to import and export all schedules to a single file. Having this functionality would make testing data operations more robust.
Using the data types defined in #3, Comet Planning will be able to export all schedule data to a single JSON file. Functions related to this functionality will be found primarily in the src/lib/transfer.js
directory. On the schedule planner page found at /schedules/:id
, there will be a button that reduces all data for the currently open schedule from the Redux data store to a JSON file titled schedule_{id}.json
where id
is the generated unique ID for the schedule.
Eventually, in addition to saving schedule data a user document in the database, we will be able to convert schedules into a variety of forms, perhaps to a PDF or a spreadsheet format.
Planner, originally known as Comet Planning, was originally created on May 9th, 2020. Since then, it has seen many changes in its scope, features, and active maintainers. Because of this, the codebase has become a bit convoluted and verbose. Thus, reducing the entropy inside this repository will help the current maintainers be more productive and improve the future maintainability of the repository.
Anything else that is done will be documented within its own commit('s) and the PR.
This feature is crucial to our website. It will make sure that we are able to drag particular courses from the sidebar and drop that course in a particular card in the semester bar.
Add the option to edit semester names or add other semester types while keeping the default alternating Fall and Spring labels.
When users click the "+" button and a new semester appears, the name will follow the default Fall / Spring pattern.
If the name of a semester is changed (Summer / Maymester / Wintermester), the next semester added with "+" will take the name that was edited.
Allow students to delete plans they don't need / want on the dashboard.
Create "Delete Plan" button in plan settings to delete plans.
I expect to not see error messages in the console.
A reference error appears in the console whenever Planner is run. This seems to be due to Redux Persist not being properly configured with Next.js. Check out '/modules/redux/store.ts' to look at the current configuration. I believe this error is due to the page pre-rendering done by Next.js.
This isn't a pressing issue since data is being persisted across browser sessions.
Beta 0.1.0
No response
Error storing data ReferenceError: window is not defined
at /Users/caleblim/Code/ACM/Nebula/nebula-web/node_modules/@react-native-async-storage/async-storage/lib/commonjs/AsyncStorage.js:81:7
at /Users/caleblim/Code/ACM/Nebula/nebula-web/node_modules/@react-native-async-storage/async-storage/lib/commonjs/AsyncStorage.js:37:21
at new Promise (<anonymous>)
at createPromise (/Users/caleblim/Code/ACM/Nebula/nebula-web/node_modules/@react-native-async-storage/async-storage/lib/commonjs/AsyncStorage.js:35:10)
at Function.setItem (/Users/caleblim/Code/ACM/Nebula/nebula-web/node_modules/@react-native-async-storage/async-storage/lib/commonjs/AsyncStorage.js:80:12)
at writeStagedState (/Users/caleblim/Code/ACM/Nebula/nebula-web/node_modules/redux-persist/lib/createPersistoid.js:98:28)
at Timeout.processNextKey [as _onTimeout] (/Users/caleblim/Code/ACM/Nebula/nebula-web/node_modules/redux-persist/lib/createPersistoid.js:87:7)
Nebula Web is currently a single-page application built using React. However, implementing an SPA architecture is not the best way to develop our app. Certain functionality can and should be done with interactive (JavaScript) components, especially drag and drop functionality for schedule planning and notifications for service announcements, but much of the other functionality can be simplified to CRUD operations usually done in a server-side rendered context.
Next.js will let us do just that and maintain the best of both worlds: allowing us to statically generate pages like those for degree plans or course information while also maintaining the same reactivity that React provides as a framework.
Additionally, a refactor will allow us to simultaneously architect our app to expose routes for the service admin console and eliminate the need for a redundant front-end for Nebula Data Service.
The current codebase has a mix of components for both display and data loading purposes. Next.js dictates pages with separate routes are stored in completely different files.
Additionally, the current SPA has a global state that can be updated from multiple pages and components. However, most of that state only affects process that happen on page load, like determining if the user is authenticated or checking degree plan data that isn't likely to change on a regular basis.
Next.js provides some examples on how to write a Next.js app that uses a data store like Redux. On fetch from the server, app state is statically generated, but once loaded by the browser, interactivity takes over and allows a local data store to manage state.
The following will have to be done to complete the refactor:
react-router
components/
- Landing/home
- Overview/onboarding
- New user onboarding/plans
- Plan overview page/plans/[id]
- Degree planning/profile/[userId]
- The profile of a given user with user ID [userId]When switching to a device with less horizontal resolution, the dashboard should reorganize listed degree plans so that cleanly appear on mobile (or any small) displays. One way to approach this could be to set degree plans to switch to a vertical list on mobile, for example.
The Planner dashboard currently does not properly scale to displays with a lower width, such as most mobile devices. As the device width decreases, the listed degree plans begin to overlap.
Beta 0.1.0
Chrome, Safari
No response
Not everyone who uses Planner would necessarily want to create an account. To support this, I propose adding an option for users to use Planner as a guest user.
Comet Planning will allow students an interactive means of planning out their coursework, but it may be useful to have a static representation of a student's academic career for easy reference.
Comet Planning will have a way to generate printable PDFs of the following:
Essentially, Comet Planning will generate transcripts and customized degree plans for students based on the data they provide. There will be a dedicated route on the Comet Planning web app (/schedules/<id>/view
) that will allow a student to see a (togglable) static visual representation of a degree plan or transcript-like view of all their attempted courses.
Another format that Comet Planning could explore is a spreadsheet containing the above information. However, implementation of this may largely depend on student feedback and demand. One possible compliment to the generated PDFs is to have the ability to share a schedule through a URL which would work with Comet Planning's existing routing solution; however, this would require implementation of some kind of permissions system - whether marking a schedule as public/private or by some other mechanism - which may not be desirable from a practicality standpoint.
Here is a reference to a viewing screen for a student's degree plan.
The profile page provides options to the user to customize and make Nebula their own. The goal of this page is not to overwhelm the user with options that confuse them but as a way to help them modify the settings they want. Keeping consistency with every sub-page of the Profile would promote a better user experience.
The Profile Page would include the following sections:
Find the link to the framework here https://www.figma.com/file/L56XKTwX0gml7vqQWdduBz/Profile-Page?node-id=0%3A1
This segment is in charge of making sure if a particular class meets certain pre-reqs and co-req. If it doesn't then it will display a warning message. It will also determine that a particular student is not exceeding taking 18 credit hours per semester.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.