React Node Express TypeScript Elearn App about UWB

---

Table of Contents

• Quick start
  • npm
  • docker-compose
• Overview
  • Features
• Use Case Diagram
• User Roles and Functionality
  • Unauthenticated
  • Student
  • Teacher
  • Admin
• Database Model
• Docker
  • Docker run
  • Docker compose
  • Env variables
• App design & components
• License

Quick start

npm

1. Run npm install
2. Rename config.env.example to config.env
3. Set valid DATABASE_URL in config.env file
4. Run npm start
5. App is running at http://localhost:8080/

Docker compose

• Run docker compose up

Overview

This application is a Web Elearning application about the UWB technology, which is the result of my bachelor thesis rework. It's a full stack application, which consists of React, Nodejs and Typescript technology. App uses REST API for communication between FE & BE using Express framework. I used Prisma for ORM and MySQL database.

• Example application is running on Microsoft Azure: https://elearn-uwb-app.azurewebsites.net
• Admin credentials: admin@random.sk password1

Features

• Authentication/Authorization
• JWT tokens
• Client/server input validation
• REST API (Express)
• Swagger OpeAPI
• Password reset
• Roles
• Dynamic forms using formik
• Multiple question types
• React PDF
• Responsive design
• Nodemailer
• 2 languages
• Passport jwt
• Bootstrap
• Axios
• Docker & docker compose
• & many others..
  

Use Case Diagram

Use Case diagram contains the role-based functionality of the application mentioned at User Roles And Functionality, that the user can perform.

User Roles and Functionality

Unauthenticated

User without authentication has the folowing functionality:

Register

Login

Password reset

Visit pages with list of topics, videos, tests, without taking the test or seeing specific topic.

---

User/Student

User with role Student has the following functionality:

Explore/view specific topic from the topic list

Take and submit a test from test list.

Display user profile

Change user information

Change user password

Get the list of all taken tests

See the test details after submiting or after clicking on a particular test from taken tests list

Logout

---

Teacher

In addition to the same functionality as the above Student role, a user with the Teacher role also has the following functionality:

Display a list of all registered users

Visit a profile of the specific user

Get the list of all taken tests of particular user

View the result and details of the particular test of the particular user

Manage video, topic and test resources. (Create, Update, Delete)

---

Admin

In addition to the same functionality as the above Teacher role, a user with the Admin role also has the following functionality:

Create new user

Update information of the specific user

Delete existing user

Manage user roles

Database Model

Docker

Docker hub: xmlynek/react-node-elearn-app

Docker run

docker run -p 8080:8080 -e DATABASE_URL=mysql://Filip:password@localhost:3306/uwbdb -e NODE_ENV=production xmlynek/react-node-elearn-app

Docker compose

run docker compose up

version: '3.8'
services:
  mysql_db:
    image: mysql:8.0
    restart: always
    volumes:
      - ./mysql/volume:/var/lib/mysql
      - ./mysql/dump.sql:/docker-entrypoint-initdb.d/dump.sql
    ports:
      - 9906:3306
    environment:
      MYSQL_HOST: localhost
      MYSQL_ROOT_PASSWORD: password
      MYSQL_USER: Filip
      MYSQL_PASSWORD: password
      MYSQL_DATABASE: uwbdb
    healthcheck:
      test: "exit 0"

  server:
    image: xmlynek/react-node-elearn-app
    ports:
      - 8080:8080
    environment:
      - DATABASE_URL=mysql://Filip:password@mysql_db/uwbdb
      - NODE_ENV=production
    depends_on:
      mysql_db:
        condition: service_healthy
    restart: always

Env variables

• PORT
• NODE_ENV - development/production
• DATABASE_URL - mysql://USERNAME:PASSWORD@HOST:PORT/DB_NAME
• JWT_ACCESS_TOKEN_SECRET
• JWT_ACCESS_TOKEN_EXPIRATION
• JWT_REFRESH_TOKEN_SECRET
• JWT_REFRESH_TOKEN_EXPIRATION
• JWT_PASSWORD_RESET_TOKEN_SECRET
• JWT_PASSWORD_RESET_TOKEN_EXPIRATION
• EMAIL_HOST
• EMAIL_PORT
• EMAIL_USERNAME
• EMAIL_PASSWORD
• EMAIL_SERVICE

App design & components

Design of pages and components can be found in client README

License

MIT