nedpals / myuic-neo

An unofficial, third-party student portal website for students of the University of the Immaculate Conception (UIC).

MyUIC Neo

An "unofficial", third-party student portal website for UICians.

Demo | Twitter Thread | Feedback Form

Description

MyUIC Neo is a student-made implementation of MyUIC: the student portal web application of the University of the Immaculate Conception. The focus of MyUIC Neo is to provide better user experience and better user interface for UIC students by using modern web standards and design techniques.

It is both a single-page application (SPA) and a progressive web application (PWA) for smooth native-app like experience on any device whether be on the phone, on the tablet, or on the desktop.

Why?

Information through online platforms became the norm after the start of the online class mandate. Thus, any data related to financial payments, student grades were heavily relied on the MyUIC student portal. As a student myself of the school along with others, the experience was not good and the information it provides does not utilize it very well to the point that to get the right information, you must go to a series of links which should be exposed directly in the first place.

With this, it hopefully solves the dissatisfaction and other problems experienced by the students.

Native Application

MyUIC Neo can also be used as a mobile application both for iOS and Android with the help of CapacitorJS. Unlike the web-only version, the mobile app provides features such as offline notifications, fingerprint authentication, persistent session, and etc.

To get started, please refer to the "Run as Android app" and "Run as iOS App" sections.

Prerequisites

Web

• Node 16 or later
• NPM

Android

Android compilation is optional but is required if you want to compile it as an Android app.

• Android SDK (30 and above)

iOS

• Xcode 13 or later
• iDevice or Simulator
• Cocoapod
• CapacitorJS $ sudo gem install cocoapods
  • FOR APPLE SILICON MACS ONLY: $ sudo arch -x86_64 gem install ffi

Installation

To run MyUIC Neo on your local computer, simply execute the following commands:

npm

git clone https://github.com/nedpals/myuic-neo.git
cd myuic-neo
npm install
npm run dev

This will start the Vite webserver at http://localhost:3000. You may login by typing 123456789012 as the student ID and myuicneo as the password.

Run as Android App

See the Android prequisites for requirements on how to build the Android app.

To run the app, simply run:

npm run start-android

This will build the web app, inject it's contents, and install the app to your simulator or your device.

Run as iOS App

See the iOS prequisites for requirements on how to build the iOS app.

To run the app, simply run:

npm run start-ios

This will build the web app, inject it's contents, and install the app to your simulator or your device.

Additional Resources

Wanna contribute? Here are the following resources you can use when working on the MyUIC Neo codebase:

• Vue3 Docs: https://vuejs.org/guide/introduction.html
• ViteJS Docs: https://vitejs.dev/guide/
• Vue Query Docs: https://vue-query.vercel.app/#/
• Typescript Handbook: https://www.typescriptlang.org/docs/handbook/intro.html
• TailwindCSS Docs (For additional information): https://tailwindcss.com
• CapacitorJS Android Docs: https://capacitorjs.com/docs/android

Contributing

1. Fork it (https://github.com/nedpals/myuic-neo/fork)
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create a new Pull Request

License

AGPL v3

Contributors

• Ned Palacios - creator and maintainer
• Al Gabriel Orig - iOS Port

myuic-neo's Issues

Add more Topics

In Community Exchange, GitHub Topics will help the discoverability of your project. You should create topics pertaining to:

• the tech stack you used on the project
• the subject matter of your repo
• the subject(s) covered in your LEARN.md

There is a limit of 20 topics you can add to your repo. There is no need to go overboard with topics. We recommend under 10 topics. You can add topics by following these instructions.

You already have very good topics on the repo, please take time to go through above doc and see if any more topics would be helpful.

Update README

A README is often the first item a visitor will see when visiting your repository. We recommend that your README includes information on:

• What the project does
• Why the project is useful
• How users can get started with the project
• Explain to users that there is a LEARN.md
• Mention your code of conduct
• Who maintains and contributes to the project

Most of the above info is already part of your Readme except a few. So please go through above list and add anything more that'll help others learn more about the project and process.

dependency error

Add Code of Conduct

We recommend that every repo has a code of conduct. If you don’t feel comfortable creating your own Code of Conduct from scratch we highly recommend using one of the templates provided by GitHub. If you do use a template, please read through the template and ensure that you can and will abide by the Code of Conduct.

Please follow these instructions on how to add a Code of Conduct.

Community Exchange Introduction/Tracking

👋 Hi @nedpals,

I am your GitHub mentor for the GitHub Education, Community Exchange (CX) project. I'll be collaborating with you on preparing your repo for CX.

You mentioned in your submission that you wanted to submit a Learn repo. This means that you would like to teach students, step by step, how to build this project. I will generate issues, which will provide guidance on how to prepare your repo for a Learn CX submission on June 1, 2022.

This issue will serve as a tracking issue to track all issues related to CX. I recommend creating a new branch for every issue and opening a pull request to track changes so we can effectively collaborate with each other and merge changes when you and I feel like those changes are ready to be merged on your primary branch.

If you have any questions or concerns, please feel free to leave a comment on this issue or any of the other issues that are generated.

I look forward to working with you

CX Issues

• #3
• #4
• #5
• #6

# Vulnerability found in npm and yarn audit

Hi @aaalgieee,

Maayong buntag! :D

The package manager @nedpals used is Yarn.

I have reproduced your issue by using npm, and I got the same issue when I run npm install

Solution 1

Simply use Yarn as the package manager.

I can see why using Yarn doesn't cause any issues since I found that it handles these peer dependency conflicts differently and reliably well. In this case,

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: @awesome-cordova-plugins/[email protected]
npm ERR! node_modules/@awesome-cordova-plugins/core
npm ERR!   @awesome-cordova-plugins/core@"^5.44.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @awesome-cordova-plugins/core@"^6.0.1" from @awesome-cordova-plugins/[email protected]
npm ERR! node_modules/@awesome-cordova-plugins/printer
npm ERR!   @awesome-cordova-plugins/printer@"^6.4.0" from the root project

Use yarn install instead of npm install

npm install --global yarn then you can run yarn install and you're good to go 👍🏻

Solution 2

If you still want to use npm as the package manager, you can add a --legacy-peer-deps flag when running npm install --legacy-peer-deps

legacy-peer-deps

Both worked for me. Let me know if this helped you. Thanks!

Originally posted by @aidrecabrera in #10 (comment)

Add LEARN.md

Learn repos should have a LEARN.md file to teach another student how to build your project step by step. You can explain how to build your project with text, code snippets, images, or even short (5 minute) long video lessons. As the maintainer of a Learn repo, the LEARN.md file requires you to think critically about how to explain the building of your project and how to also make it engaging. We don't expect you to be an expert teacher, but we would like you to reflect on how difficult it was to get to your level of knowledge, and then provide friendly guidance to help other students to learn.

If your project is very large, consider just teaching a certain tool or implementation that your project utilizes.