Git Product home page Git Product logo

frontend's Introduction

UOS HUB Website Front-End

This repository contains the client-side code of UOS HUB website. We're using a JavaScript web framework called AngularJS to manage and render the data sent from our server-side. As for the visuals of the website, We're implementing the concepts of Google's Material Design. That's by using AngularJS Material, which can be programmed using HTML, CSS, and JavaScript. On top of that, we're using a flat icon pack called Font Awesome.


Screenshot of the dashboard

For more, check out the current state of the website at the following link: https://uoshub.github.io


Details of the Front-End

What do files do?

The layout.html contains the common components of all the website's pages (like a template).
The rest of the *.html files contain html code and components of their specific pages.
The js/scripts.js contains all non-AngularJS JavaScript functions and variables.
The js/app.js contains the main AngularJS app and its configurations and the common controllers.
The rest of the js/*.js files contain AngularJS controller(s) for their specific pages.
The css/*.css files contain styling rules for their specific pages.
The img/ folder contains all the image files of the website.

How are files loaded?

When requesting any link of our website, the server-side always responses with the layout.html first. Then it loads the AngularJS app and logic, which requests the html page desired according to the requested link. After the page and it's AngularJS controllers are loaded, it requests the page's data from the server as a JSON object.

Here's a summary of the general requests sequence:
(1) layout.html --> (2) page.html --> (3) data.json


Things to do in the future

There're a lot of thing we still need to do in the front-end:

  • Link the front-end with the back-end to reflect the retrieved data
  • Process the received data and implement the required filters and factories
  • Add a sub-section for designing next semester's schedule live with drag and drop
  • Add a section to display student's information and frequently looked up data
  • Make the whole website responsive to small screen sizes
  • Dynamically show or hide dashboard cards according to time of the semester
  • Redesign account fees summary and e-services to make it less confusing
  • Show classroom location on a map of the university (for freshmen)
  • Allow students to review all courses together to avoid reading the forms again
  • Add the ability to attach photos or notes to today’s classes
  • Add a feature of sharing schedule with other students to get mutual free time slots
  • Implement PWA concepts for native notifications and offline access

References

frontend's People

Stargazers

 avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

Forkers

thethiny

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.