Effective time management is an essential skill for software developers. To entrench this behavior, TECHCareers students are encouraged to keep an accurate record of the time spent on studying, practice problems and assignments. With large number of students and simultaneous cohorts, managing student data while relying on spreadsheets is ineffective. Furthermore, there is an opportunity to use timesheet data to gain insights into teaching effectiveness as well as students' understanding of the course content.
It was proposed to replace the existing spreadsheet-based system with a combination of a database backend and a web-based frontend:
-
ASP.NET Core Web API and Microsoft SQL Server (Express) will be used as the backend, with the Entity Framework used to create the DB-Object model, which makes the solution relatively easy to adapt to alternative database solutions should it be required.
-
Frontend solution will be entirely based on the React library, with Bootstrap CSS used for application theming. These have been chosen due to popularity, standardisation, and codebase maturity. Frontend solution is intended as a mobile-first platform, with an adaptation for tablet and desktop users.
- Minimum viable product: Service that accurately and reliably captures student timesheets, that is easy to maintain or expand in the future.
- Three-tiered access (Student, Staff, SuperAdmin), implemented through Google OAuth2 JWT token validation and implementation of an AuthorizationHandler in API. Google OAuth was chosen to avoid the need for password management by staff and is convenient as students already have UofA Google-based student mail accounts.
- Management of cohorts, students and staff accounts (mostly at API level)
- Student time management, directly linked to a maintainable record of assignments, categorized by instructional unit and type of assignment (Frontend)
- Student attendance management, linked to cohorts (API level)
- Basic reporting and analytics on student attendance and time management (Future work)
Internals:
- Asynchronous API, HTTPS protocol,
- API server configuration via config file
- Customized logging interface, either to console or to file, with adjustable logging levels (debug/normal)
- Ability to setup Super Admin user for new installations from command line
- Use of Data Transfer Objects
- Microsoft SQL Server Express Data Storage
- React, Redux and Redux router for the frontend
- For compiling - Visual Studio 2019 with .NET Core 3.1 . Project will not compile for .NET Core 2.2 and below without modifications.
- Microsoft SQL Server Express database
- Apache/Nginx/IIS for frontend deployment, alternatively use of
node.js
withnpm
/yarn
for testing purposes
The following steps can be used to test deploy this project:
- Clone this repository into a folder using
git clone
or by downloading a zipped file version from GitHub. - Set up Microsoft SQL Server Express and create an empty database.
- Once set up, execute the SQL script
setup.sql
within the correct database context using a tool such as SSMS. Script can be found in theInstallation
folder in the repository and will create only the required schema. Sample data is included in thesampledata.sql
script. - Use Microsoft Visual Studio to open the solution. If using from development environment, open the
secrets.json
file via "Manage user secrets" command in the Solution Explorer, and change the connection string to match your setup, i.e:"sqldb:ConnectionString": "Server=<server_address>;Database=<database name>;User Id=<username>;Password=<your password here>;MultipleActiveResultSets=true"
Alternatively, if deploying standalone, add the same line toappsettings.json
file (at the top level) sincesecrets.json
is used exclusively in dev. environment.
If deploying the backend,
- Modify
appsettings.json
file and changeCORSAllowedOrigins
property to the address of the server hosting the frontend (multiple entries are allowed as a JSON array) - Modify
ValidEmailDomains
property to a list of domains from which successful authentication will be accepted (this has to match the domain your Google Auth token will allow).
- Installation of node.js is required for the build (latest stable version can be found here)
- Run
npm install
oryarn
in the folder of choice to download all libraries/dependencies. This will take a while. - To test the code locally, start a local webserver by executing
npm start
oryarn start
in the project folder. - To deploy the website on a server, make sure that the correct server location is specified using the
homepage
field inpackage.json
. - Generate own Google OAuth 2.0 Client ID at link and paste the client ID into the
.env
file,GOOGLE_AUTH_CLIENT_ID
key. Make sure that the Authorised Javascript origins match the URI of your React dev. server (incl. port). Authorised redirect URIs should match the same location.
If deploying the frontend:
- Modify .env file and update the
APIURL
reference to the API server address and port (deployment only) - Use
npm build
oryarn build
to generate a deployment package and upload to target web server. - If deployed, it is recommended to keep the API server behind a reverse proxy (Apache, Nginx) to implement SSL encryption and keep the API running on a local interface.
List of test instructions is provided in the Testplan
folder in the repository.
The project board can be found at the following link
- Authentication and authorization topics from "ASP.NET Core 3 and React", Carl Rippon, Pakt Publishing 2019 (ISBN: 9781789950229)
- Add host address from localsettings.json: link
- CORS configuration: link
- Dealing with JWTBearer events: link
- Extending Identity class and methods: link
- Application shutdown handling: link
- Command line options handling: link , link
- IConfigurationRoot implementation: link
- Serilog configuration: link
- Crow notation and ERD diagrams: link
- SQL Server data types: link
- Recommended length of an email field in DB: link
- Add Context with SQL Server connection with parameters from appsettings.json: link
- JSON timespan deserialization helper: link
- Decimal data type and issues with precision in EF: link
- Precision and scale for decimal datatypes: link
- Guide to choosing HTTP methods: link
- Entity framework logging infrastructure: link
- Getting related data using EF: link