Quiz Plus

An ultimate solution for Quiz/Exam/Survey

• created: 08/21/2022
• latest update: 31/05/2024
• by: Sangib Kumar Saha
• email: sangibruse@gmail.com

Thank you for purchasing my script. If you have any questions that are beyond the scope of this help file, feel free to email me.

• Visual Studio Code.

• Node.js (16+) (Browse here to download https://nodejs.org/en/)

• .NET 6 SDK (Browse here to download  https://dotnet.microsoft.com/download)

• Database provider software (SQL Server / MySql / Sqlite / PostgreSql / Oracle).

• Open QuizPlusApi project from Source Code folder on Visual studio code.On appsettings.json file you will find five connection strings for five different database connectivity. Replace the connection string by your one.

"ConnectionStrings": {
 
    "ApiConnStringMssql": "data source=Sangib-PC;initial catalog=QuizPlusdb;
     persist security info=True;Integrated Security=SSPI;",
 
    "ApiConnStringMysql": "server=localhost;port=3306;database=QuizPlusdb;user=root;",
 
    "ApiConnStringOracle": "Data Source=(DESCRIPTION=(ADDRESS_LIST=
    (ADDRESS=(PROTOCOL=TCP)(HOST=localhost)(PORT=1521)))  
    (CONNECT_DATA=(SERVER=DEDICATED)(SERVICE_NAME=orclpdb)));User Id=root;Password=root;",
 
    "ApiConnStringSqlite": "Data Source=QuizPlusdb.db;",
 
    "ApiConnStringPostgreSql": "Server=127.0.0.1;Port=5432;Database=QuizPlusdb;
    User Id=postgres;Password=postgres;"
 
  }

• Then open Startup.cs file, On ConfigureServices method you will see five AppDbContextPool for five Connection Strings that already have on appsettings.json file. Un-Comment your required one and keep other four as commented.Have a look to the below code.I only un-comment the Mysql portion because i used Mysql DB here.

public void ConfigureServices(IServiceCollection services)
 
        {
            //Sql Server Connection String
            /* services.AddDbContextPool<AppDbContext>(opt => opt.UseSqlServer
            (Configuration.GetConnectionString("ApiConnStringMssql"))); */
 
 
            //Mysql Connection String
            services.AddDbContextPool<AppDbContext>(opt=>opt.UseMySql
            (Configuration.GetConnectionString("ApiConnStringMysql")));
 
            //Sqlite Connection String
            /* services.AddDbContextPool<AppDbContext>(opt=>opt.UseSqlite
            (Configuration.GetConnectionString("ApiConnStringSqlite"))); */
 
 
            //PostgreSql Connection String
            /* services.AddDbContextPool<AppDbContext>(opt=>opt.UseNpgsql
            (Configuration.GetConnectionString("ApiConnStringPostgreSql"))); */
 
 
            //Oracle Connection String
            /* services.AddDbContextPool<AppDbContext>(opt=>opt.UseOracle
            (Configuration.GetConnectionString("ApiConnStringOracle"))); */ 

• Now Open terminal on VS Code and write below commands     

               ->dotnet tool install --global dotnet-ef

               ->dotnet ef migrations add MigrationName

               ->dotnet ef database update

• After successful build a folder named Migrations should create on project structure and a database named QuizPlusdb should create with seed data to your MySQL server (if you use MSSQL then you should check to Sql Server and so on for other databases). Now execute "dotnet run"  if  you want to run this Api project locally and you should see that your API listening at http://localhost:5002/.

• Open QuizPlusClient from Source Code folder on Visual Studio Code and on vs code terminal execute "npm install" and "npm run serve".

• After doing above settings your client project will be running at http://localhost:8080

Assuming that you run both api and client projects by following previous steps. Now you just need to open config.js (/QuizPlusclient/public/config.js) from Client project and set hostname as http://localhost:5002 because our api is running here and you need to link with api from client.

export default{
    hostname:'http://localhost:5002'
}

You should use a vps(virtual private server) to host this product. Minimum requirements for vps are

• 2 vCPU Core
• 4 GB Ram
• 30 GB Disk Space
• 4 TB Bandwidth

For Windows Server with IIS

• IIS 10
• .NET 6 hosting bundle (Browse here to download https://dotnet.microsoft.com/download/dotnet/6.0/runtime)
• URL Rewrite (Browse here to download  https://www.iis.net/downloads/microsoft/url-rewrite)
• Sql server / Mysql / Sqlite / PostgreSql / Oracle (based on your preference)

For Ubuntu Server with Nginx

• sudo apt update
• sudo apt install nginx
• sudo apt-get install -y dotnet6
• sudo apt install mysql-server

Here is some resourses so that you can find more detail about above installations-

• https://www.digitalocean.com/community/tutorials/how-to-install-nginx-on-ubuntu-20-04
• https://docs.microsoft.com/en-us/dotnet/core/install/linux-ubuntu
• https://www.digitalocean.com/community/tutorials/how-to-install-mysql-on-ubuntu-20-04

Windows Server

• Open Api project, Here you will get a file named appsettings.json, open that then move to ConnectionStrings and change ApiConnStringMysql as per your Mysql DB.

• Assuming you are going to use https://quizplus.sangibproject.com as Site name for Client. Now on appsettings.json file move to clientUrl and you can see https://quizplus.sangibproject.com set as clientLive and now publish by executing ( dotnet publish ) on terminal

• Now open a new site on IIS with Site name, Physical path, IP address, Port and Host name. Copy the contents of publish folder to the physical path which you created. Now assuming that you set the Host name as quizplusapi.sangibproject.com, copy that name and store somewhere because we need that name just a bit later. 

• Open Client project . Here you will find a config.js file and set that name (quizplusapi.sangibproject.com) on hostname to config.js file.

export default{
    hostname:'https://quizplusapi.sangibproject.com'
}

Now execute ( npm build ) on terminal and you need to copy the contents of dist folder to a physical path on server and open another site with Host name as QuizPlus.com. 

• Now it's time to import the database file to your Mysql database. You will find a database on DB folder.That's all for windows server.

Linux(Ubuntu) Server

• Open Api project .Here you will get a file named appsettings.json, open that then move to ConnectionStrings and change ApiConnStringMysql as per your Mysql DB.

• Assuming you are going to use https://quizplus.sangibproject.com as Site name for Client. Now on appsettings.json file move to clientUrl and you can see https://quizplus.sangibproject.com set as clientLive and now publish by executing ( dotnet publish ) on terminal

•  Now you will need to create a directory named QuizPlus.Api on your Linux server. Execute below command on your linux terminal to create that directory then copy the contents of publish folder to this (/var/www/QuizPlus.Api) path.

                 -> sudo mkdir /var/www/QuizPlus.Api

             Now it's time to configure nginx, open a config file,

                -> sudo nano /etc/nginx/sites-available/QuizPlusApi

             Place the below contents and save that file.

server {
 
    listen        80;
    server_name  quizplusapi.sangibproject.com;
    location / {
        proxy_pass         http://localhost:5002;
        proxy_http_version 1.1;
        proxy_set_header   Upgrade $http_upgrade;
        proxy_set_header   Connection keep-alive;
        proxy_set_header   Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header   X-Forwarded-Proto $scheme;
  }
}

               -> sudo ln -s /etc/nginx/sites-available/QuizPlusApi  /etc/nginx/sites-enabled/QuizPlusApi

          [Unit]
          Description=Api for QuizPlus client App
 
          [Service]
          WorkingDirectory=/var/www/QuizPlus.Api/publish
          ExecStart=/usr/bin/dotnet /var/www/QuizPlus.Api/publish/QuizplusApi.dll
          Restart=always
          # Restart service after 10 seconds if the dotnet service crashes:
          RestartSec=10
          KillSignal=SIGINT
          SyslogIdentifier=QuizPlus.Api
          User=ubuntu-user
          Environment=ASPNETCORE_ENVIRONMENT=Production
          Environment=DOTNET_PRINT_TELEMETRY_MESSAGE=false
          Environment=ASPNETCORE_URLS=http://localhost:5002
 
          [Install]
          WantedBy=multi-user.target

export default{
    hostname:'https://quizplusapi.sangibproject.com'
} 

Now you will need to create a directory named QuizPlus.Client on your Linux server. Execute below command on your linux terminal to create that directory then copy the contents of dist folder to this (/var/www/QuizPlus.Client) path.

                 -> sudo mkdir /var/www/QuizPlus.Client

Next, open a config file,

                -> sudo nano /etc/nginx/sites-available/QuizPlusClient

Place the below contents and save that file.

server {
    listen      80;
    server_name QuizPlus.com;
    charset utf-8;
    root    /var/www/QuizPlus.Client/dist;
    index   index.html;
    #Always serve index.html for any request
    location / {
        root /var/www/QuizPlus.Client/dist;
        try_files $uri  /index.html;
    }
    error_log  /var/log/nginx/vue-app-error.log;
    access_log /var/log/nginx/vue-app-access.log;
}

                -> sudo ln -s /etc/nginx/sites-available/QuizPlusClient  /etc/nginx/sites-enabled/QuizPlusClient

For Admin, Username: admin@quizplus.com Password: abcd1234

• Email: Any valid email
• Card information : 4242 4242 4242 4242 (Visa card)
• MM/YY : Any future month and year
• CVC : Any 3 digit number
• Country or region : Any Country

To find more detail you can browse this link (https://stripe.com/docs/testing)

Once again, thank you so much for purchasing this script. As I said at the beginning, I'd be glad to help you if you have any questions relating to this script. I'll do my best to assist. If you have a more general question relating to this script you may also comment directly on product comment section.

Sangib Kumar Saha