Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/memgonzales/linquiztics
Language learning web application that allows users to create their own quizzes and to answer those made by the community of users. Features incentivization dynamics designed to gamify learning through customized quiz suggestions, experience points, streaks, leagues, and a global leaderboard.
https://github.com/memgonzales/linquiztics
educational handlebars javascript mongodb mongoose node-js nodejs password-hashing quiz-website session-management web-development website
Last synced: about 2 hours ago
JSON representation
Language learning web application that allows users to create their own quizzes and to answer those made by the community of users. Features incentivization dynamics designed to gamify learning through customized quiz suggestions, experience points, streaks, leagues, and a global leaderboard.
- Host: GitHub
- URL: https://github.com/memgonzales/linquiztics
- Owner: memgonzales
- Created: 2021-05-23T01:54:33.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-12-22T15:10:02.000Z (almost 2 years ago)
- Last Synced: 2024-04-14T11:45:16.968Z (7 months ago)
- Topics: educational, handlebars, javascript, mongodb, mongoose, node-js, nodejs, password-hashing, quiz-website, session-management, web-development, website
- Language: JavaScript
- Homepage: https://linquiztics.up.railway.app
- Size: 5.13 MB
- Stars: 3
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Linquiztics
![badge][badge-html5]
![badge][badge-bootstrap]
![badge][badge-js]
![badge][badge-jquery]
![badge][badge-mongodb]
![badge][badge-express]
![badge][badge-nodejs]
Linquiztics — a play on linguistics and quiz — is a language learning web application that allows users to create their own quizzes and to answer those made by the community of users. It also features incentivization dynamics designed to gamify learning through customized quiz suggestions, experience points, streaks, leagues, and a global leaderboard.
💡 **UPDATE (12/22/2022): With the shutting down of free Heroku services, we have migrated to Railway: https://linquiztics.up.railway.app/**
***Kindly enter a valid email address during the creation of an account. The web application will send an email to this registered email address after the account has been created and in the event of a password change.***
## Task
**Linquiztics** is the major course output in a web development class under Mr. Arren C. Antioquia of the Department of Software Technology, De La Salle University. The students are tasked to create a web application of their choice, provided that it satisfies the minimum requirement of supporting the following operations: log in, log out, register, CRUD (create, read, update, and delete), and search. The application development is divided into three phases:
| Phase | Duration | Description |
| --- | --- | --- |
| 1 | 4 weeks | Implementation of the front-end view using HTML, CSS, and JavaScript (with hardcoded life-like data for each applicable feature) |
| 2 | 7 weeks | Implementation of the back-end logic, including database operations (MongoDB), page rendering using a template engine (preferably Handlebars), and local server hosting (Node.js) |
| 3 | 3 weeks, coinciding with the last weeks of Phase 2 | Implementation of session management and password hashing, refactoring of the project following the MVC architectural pattern, and deployment of the application |
This project consists of the following folders:
| Folder | Description |
| --- | --- |
| controllers | Contains the JavaScript files that define callback functions for client-side requests |
| helpers | Contains the JavaScript files that define helper functions for front-end display and server-side validation |
| misc | Contains the JavaScript files for initial database population |
| models | Contains the JavaScript files for database modeling and access |
| public | Contains the static CSS and JavaScript files, as well as the project assets (images and audio files), for front-end display |
| routes | Contains the JavaScript file that defines the server response to each HTTP method request |
| views | Contains the Handlebars template files to be rendered and displayed upon request |
It also includes the following files:
| File | Description |
| --- | --- |
| package-lock.json and package.json | Store information on the project dependencies |
| index.js | Entry point of the web application |
The complete project specifications can be found in the file Proposed Specifications.pdf.
## Running the Application
### Running on the Web
Open the following website: https://linquiztics.up.railway.app/
### Running Locally
1. Before running the application locally, the following software have to be installed:
| Software | Description | Download Link | License |
| --- | --- | --- | --- |
| Node.js | JavaScript runtime built on Chrome's V8 JavaScript engine | https://nodejs.org/en/download/ | MIT License |
| git *(optional)* | Distributed version control system | https://git-scm.com/downloads | GNU General Public License v2.0 |
2. Create a copy of this repository:
- If git is installed, type the following command on the terminal:
```
git clone https://github.com/memgonzales/linquiztics
```
- If git is not installed, click the green `Code` button near the top right of the repository and choose `Download ZIP`. Once the zipped folder has been downloaded, extract its contents.
3. On the main project directory, run the following command to **install the dependencies**:
```
npm install
```
If the command is executed successfully, the dependencies will be installed into the folder node_modules following the dependency tree found in package-lock.json.
###
***This project uses a pre-populated remote database. DO STEPS 4 TO 8 ONLY AFTER A DATABASE RESET OR MIGRATION TO A LOCAL DATABASE.***
4. On the main project directory, run the following command to populate the database with **user accounts**:
```
node misc/add_profile_data.js
```
If the command is executed successfully, the following will be printed on the terminal (the assigned _id may vary):
```
Added {
displayLanguages: [ 'English', 'Filipino' ],
quizzesCreated: [ 2, 6 ],
_id: 60a32d4fafac3e1430152ae4,
name: 'Gianina Yuchengco',
picture: '../assets/doggo.jpg',
username: 'gianinayuchengco',
email: '[email protected]'
[... truncated ...]
Database population complete! Press Ctrl + C to continue.
```
5. On the main project directory, run the following command to populate the database with **quizzes**:
```
node misc/add_quiz_data.js
```
If the command is executed successfully, the following will be printed on the terminal (the assigned _id may vary):
```
Added {
tags: [ 'animals', 'basic', 'German', 'introductory', 'vocabulary' ],
subjectLanguages: [ 'German' ],
ratings: [
5, 5, 5, 5, 4,
5, 5, 3, 1, 5
],
accuracies: [
100, 100, 86, 86, 71,
71, 57, 43, 29
],
_id: 60a9556188b8f82cdc92368d,
idNum: 1,
status: 'Published',
title: 'Basic Animals',
[... truncated ...]
Database population complete! Press Ctrl + C to continue.
```
6. On the main project directory, run the following command to populate the database with **reported users**:
```
node misc/add_userreport_data.js
```
If the command is executed successfully, the following will be printed on the terminal (the assigned _id may vary):
```
Added {
_id: 60a959da39ac9f0c7cc6fa94,
index: 1,
name: 'Benny Terrier',
username: 'bulljanai',
reportDate: 2021-03-28T00:00:00.000Z,
report: 'Hate speech',
__v: 0
[... truncated ...]
Database population complete! Press Ctrl + C to continue.
```
7. On the main project directory, run the following command to populate the database with **reported quizzes**:
```
node misc/add_quizreport_data.js
```
If the command is executed successfully, the following will be printed on the terminal (the assigned _id may vary):
```
Added {
_id: 60a959f76ea1853bf06ced89,
index: 1,
quizNum: 3,
title: 'Conyo 101',
author: 'danccgabe',
reportDate: 2021-03-31T00:00:00.000Z,
report: 'Hate speech',
__v: 0
[... truncated ...]
Database population complete! Press Ctrl + C to continue.
```
8. On the main project directory, run the following command to populate the database with **reported comments**:
```
node misc/add_commentreport_data.js
```
If the command is executed successfully, the following will be printed on the terminal:
```
Added {
_id: 60a960ec6bc1dc3340e1d967,
index: 12,
commentNum: 21001,
quizNum: 2,
comment: 'Not beginner-friendly, but very cool :)',
author: 'japashiba',
quiz: 'Anime Quotes',
reportDate: 2021-05-22T19:52:12.556z,
report: 'Inappropriate content',
__v: 0
[... truncated ...]
Database population complete! Press Ctrl + C to continue.
```
9. On the main project directory, run the following command to **run the server**:
```
node index.js
```
If the command is executed successfully, the following will be displayed on the terminal:
```
app listening at port 3000
Connected to: mongodb+srv://admin:[email protected]/linquiztics?retryWrites=true&w=majority
```
10. Open the web application by accessing the following link on a browser:
```
http://localhost:3000
```
### Administrator Credentials
To log in as an administrator, go to the Login page and enter the following credentials:
- Username: linquizticsadmin
- Password: ASDFGHJKL123;
### Login Credentials (For Testing)
To test the features of a (non-administrator) user account, it is recommended to log in using the following credentials:
- Username: gianinayuchengco
- Password: ASDFGHJKL123;
Note that there are 23 pre-registered user accounts; the usernames are found in the file misc/add_profile_data.js. The password to all these accounts is ASDFGHJKL123;. (The period is not included.)
## Built Using
This project follows the Model-View-Controller (MVC) architectural pattern:
- **Model:** MongoDB as the database program and Mongoose as the object data modeling tool
- **View:** Handlebars as the template engine
- **Controller:** Node.js as the server environment
This web application is deployed on the cloud platform Heroku. Since Heroku has an ephemeral filesystem, GridFS is used for the persistent storage of image and audio files.
💡 **UPDATE (12/22/2022):** With the shutting down of free Heroku services, we have migrated to [Railway](https://railway.app/), another cloud PaaS.
## Dependencies
This project uses the following dependencies, which can be installed via the npm install command:
| Package | Version | Description | License |
| --- | --- | --- | --- |
| bcrypt | 5.0.1 | Package for hashing passwords | Apache License 2.0 |
| body-parser | 1.19.0 | Package for parsing incoming requests in a middleware before the handlers | MIT License |
| connect-mongo | 3.2.0 | MongoDB session store for Connect and Express | MIT License |
| dotenv | 8.2.0 | Package for loading environment variables from an .env file | BSD 2-Clause "Simplified" License |
| express | 4.17.1 | Unopinionated and minimalist framework for Node.js | MIT License |
| express-session | 1.17.1 | Session middleware for Express | MIT License |
| express-validator | 6.10.1 | Express middleware for validator, a library of string validators and sanitizers | MIT License |
| gridfs-stream | 1.1.1 | Package for streaming files to and from MongoDB GridFS | MIT License |
| hbs | 4.1.1 | Express view engine for Handlebars | MIT License |
| mongodb | 3.6.6 | Official MongoDB driver for Node.js | Apache License 2.0 |
| mongoose | 5.6.13 | MongoDB object modeling tool designed to work in an asynchronous environment | MIT License |
| multer | 1.4.2 | Middleware for handling multipart/form-data, primarily used for file uploads | MIT License |
| multer-gridfs-storage | 4.2.0 | GridFS storage engine for Multer to store uploaded files directly to MongoDB | MIT License |
| nodemailer | 6.6.0 | Package for sending emails with Node.js | MIT License |
*The descriptions are taken from https://www.npmjs.com/.*
## Authors
- Mark Edward M. Gonzales
[email protected]
[email protected]
- Hylene Jules G. Lee
[email protected]
[email protected]
For queries or concerns related to the Linquiztics project, kindly email [email protected].
Assets (images and audio files) are properties of their respective owners. Attribution is found in the file public/assets/credits.txt and displayed publicly on the Credits page.
[badge-html5]: https://img.shields.io/badge/html5-%23E34F26.svg?style=flat&logo=html5&logoColor=white
[badge-bootstrap]: https://img.shields.io/badge/bootstrap-%23563D7C.svg?style=flat&logo=bootstrap&logoColor=white
[badge-js]: https://img.shields.io/badge/javascript-%23323330.svg?style=flate&logo=javascript&logoColor=%23F7DF1E
[badge-jquery]: https://img.shields.io/badge/jquery-%230769AD.svg?style=flat&logo=jquery&logoColor=white
[badge-mongodb]: https://img.shields.io/badge/MongoDB-%234ea94b.svg?style=flat&logo=mongodb&logoColor=white
[badge-express]: https://img.shields.io/badge/express.js-%23404d59.svg?style=flat&logo=express&logoColor=%2361DAFB
[badge-nodejs]: https://img.shields.io/badge/node.js-6DA55F?style=flat&logo=node.js&logoColor=white
[badge-mocha]: https://img.shields.io/badge/-mocha-%238D6748?style=flat&logo=mocha&logoColor=white
[badge-heroku]: https://img.shields.io/badge/Heroku-430098?style=flat&logo=heroku&logoColor=white