Unlock It! (Group Project)

The Educational Scavenger Hunt

Overview

Unlock It! is a virtual scavenger hunt. As a result of the 2020 Covid-19 crisis, remote education is the new normal. The Unlock It! MERN application provides a creative way for educators to engage students while still teaching them useful information.

Goals

• Provide teachers with a platform to share resources
• Design a method of creating and playing a virtual scavenger hunt
• Allow students to explore the world from their very own homes

Project Images

Technology Details

Application Programming Interfaces (APIs)

Google Maps Platform

• https://developers.google.com/maps/documentation

Open Trivia Database

• https://www.opentdb.com

Technologies, Libraries, and Tools Used**

GitHub

• https://github.com/PLKGIT/thehunt
• Version control system

JSX and SCSS

UI/UX design and styling and frontend content

Google Fonts

• https://fonts.googleapis.com/
• Font Families: Banger and Roboto

Frameworks and Libraries

Model-View-Controller (MVC)

• Application architecture

React.js

• https://reactjs.org/
• Interactive user interface.

Node.js

• https://nodejs.org/en/
• JavaScript runtime engine.

Express.js

• https://expressjs.com/
• Node.js web application framework.

Axios NPM

• https://www.npmjs.com/package/axios
• Promise based HTTP client for the browser and Node JS.

Bcryptjs NPM

• https://www.npmjs.com/package/bcryptjs
• Hashes password in Node JS.

MongoDB

• https://www.mongodb.com/
• NoSQL document-based, distributed database.

Mongoose NPM

• https://mongoosejs.com/
• MongoDB object modeling tool for node.js.

JSONWEBTOKEN NPM

• https://www.npmjs.com/package/jsonwebtoken

• Node JS implementation of JSON Web Token (JWT) to safely transfer claims between two (2) parties.

Other Tools

DOTENV NPM

• https://www.npmjs.com/package/dotenv
• Loads environment variables from a .env file into process.env.

IF-ENV

• https://www.npmjs.com/package/if-env
• Helps simplify npm scripts.

is-empty

• https://www.npmjs.com/package/is-empty
• Checks whether a value is empty.

React-Bootstrap

• https://react-bootstrap.github.io/
• Front-end framework for React.

Validator.JS

• https://www.npmjs.com/package/validator
• A library of string validators and sanitizers.

Backend MongoDB Database

Database Name

• heroku_px2kmps9

Collections

• Org
• User
• Role
• Group
• Favorite
• Hunt
• Score

Schemas

Project Assets

Application URL

https://unlock-it.herokuapp.com/

File Structure

Development Details

Requirements

Design and build a full-stack application using the Model-View-Controller (MVC) paradigm. The application must use Node, Express, React, and a backend database and be deployed to Heroku.

Development Team

1. Sonal Bhoraniya
2. Jyochsna Gongal
3. Pam Kelly
4. Hebah Memon
5. Nida Memon

GitHub Repository

GitHub at https://github.com/PLKGIT/thehunt.

Deployed Application

Unlock It deployed at https://unlock-it.herokuapp.com/.

Copyright © 2020 | Sonal Bhoraniya, Jyochsna Gongal, Pam Kelly, Hebah Memon, and Nida Memon