Contest.io: Online Contests Hosting Platform

A Web-based Online Voting and Contest Hosting Solution

Table of Contents

1. About The Project
   • Built With
   • Project Images
2. Getting Started
   • Prerequisites
   • Installation
3. Contributors

About The Project

Motivation: Contest.io is a comprehensive platform designed for hosting contests and facilitating voting. With its user-friendly interface and robust features, it offers a seamless experience for hosts, voters, and participants. The platform supports various types of contests, including photo, video, audio, and polls, allowing for versatile settings. Security and privacy are prioritized, with features such as contest visibility controls for hosts, enabling public or private contests, and participant management. Additionally, voters can maintain their anonymity while casting votes. As an entirely web-based platform, Contest.io brings together all users in a unified and seamless environment.

See Motivations slide for more details.

This project is developed as a full-stack web application, following the MERN (MongoDB, Express, React, Node) stack. The project also went through an extensive design phase, and class and Entity Relationship diagrams were formed. These can be found in this slide. Also, we designed the mock UI of the project in advance, a presentation on which can also be found here.

Developed for the "CSE408: Software Development" course.

(back to top)

Built With

(back to top)

Project Images

(back to top)

Getting Started

This is an example of how to set up your project locally. To get a local copy up and running follow these simple example steps.

Prerequisites

This is an example of list of things you need to use the software and how to install them.

node, react, express, mongoDB (can be online too, but can also be installed locally)

Installation

1. Clone the repo

   git clone https://github.com/mrmajumder/contestIO.git

2. Install NPM packages for the frontend

   # move to frontend folder
   cd frontend
   
   npm install react-router-dom@6
   npm install react-datepicker
   npm install axios
   #for icons (cd to frontend and then run these commands)
   npm i --save @fortawesome/fontawesome-svg-core
   npm install --save @fortawesome/free-solid-svg-icons
   npm install --save @fortawesome/react-fontawesome
   npm install --save @fortawesome/free-brands-svg-icons
   #for cookies
   npm i universal-cookie -s

3. Install NPM packages for the backend

   # move to backend folder
   cd backend
   
   npm install express cors mongoose dotenv
   npm install -g nodemon
   Set-ExecutionPolicy RemoteSigned #(in terminal as administrator)
   npm install multer
   npm install nanoid
   npm install path
   # for authentication 
   npm i jsonwebtoken -s

4. To run, go to frontend and backend folder consecutively and run npm start

For connecting your own MongoDB database, do the following:

1. first, add a new user to the security>database access tab in MongoDB Atlas
2. in the .env file, change the username and password to your new user's username and password.
3. if connection closed error -> add 0.0.0.0/0 to the security>network access tab of MongoDB Atlas

For connecting your own Firebase database, do the following:

1. Go to the frontend directory

   cd frontend/contestio/

2. Add firebase with your own userid uuid

   yarn add firebase uuid

3. Install necessary NPM packages

   npm install compressorjs
   npm install react-photo-view

(back to top)

Contributors

• Shafayat Hossain Majumder - GitHub | LinkedIn | Mail | Website
• Sourov Jajodia - GitHub | LinkedIn | Mail | Website
• Md. Kamrujjaman - GitHub | LinkedIn

(back to top)