fsa-grads-project/competition-site

Data structures and algorithms competition site

The Dispatch

Overview

The Dispatch is an algorithms and data structures competition site where a user's solution to a problem is ranked based on a composite score calculated from the following factors:

• Time to complete the problem
• Time the algorithm takes to run the test cases
• Memory used

Every problem is designed to have multiple solutions with varying time and space complexities and dependent on the problem, the composite score is weighted based on whether the time the algorithm takes to run or the memory usage is determined to be the critical factor.

A new problem is released every calendar month and solutions submitted during that time are ranked and added to the leaderboard. Past problems are available in a playground setting, but solutions submitted for past problems are not included in the leaderboard for the problem.

Features

• New problem every month: The Dispatch releases a new problem every calendar month, providing users with fresh opportunities to test their problem-solving skills.

• Access past problems: Users can access past problems at any time, even without logging in. These problems are available in a playground setting, allowing users to refine their problem-solving skills.

• Real-time leaderboard: The Dispatch features a real-time leaderboard that shows rankings based on the composite score. This allows users to see how their solutions stack up against others and provides an added layer of competition.

Technologies Used

The Dispatch was built using a variety of technologies, including:

• React: A JavaScript library used for building user interfaces.
• Redux Tool Kit: A set of tools for building React/Redux applications.
• OAuth Authentication: A secure way to authenticate users using third-party providers.
• Docker: A tool used for containerization of the application.
• Monaco: A code editor used for the development environment.
• Express: A fast, unopinionated, minimalist web framework for Node.js.
• PostgreSQL: An open-source relational database management system.
• TailwindCSS: A utility-first CSS framework for rapid UI development.

How to Participate In The Competition

To participate in The Dispatch, users can navigate to the website and sign up for an account. Once registered, users can access the current month's problem and begin working on their solution.

After developing a solution, users can submit their code for evaluation, where it will be ranked based on the composite score which consists of the time to solve, time code takes to execute, and memory used. Users can also view the leaderboard to see how their solution compares to others.

Brief Demo

Below is a brief demo displaying the home page along with the submission of the solution

competition-site's Issues

Execute Bug Fix

Bug fix for executing code/problem in docker and retrieve results and consoles

• changing order of executable code (problem then code vs code then problem)
• remove calling runSubmission from problem and move to end of code
• comment out the runSubmission return from the consoleScript to prevent error

Oauth Consolidation

Check to see if we can capture email from LinkedIn

Create 'No Current Problem' Component

Adding a user

When a new user is added it is currently done through the auth slice of the store and the new user is not added to the user slice. An update needs to be made so that the user is added to the state. Potentially this could just be an additional call to the fetchUsers thunk.

Encrypt email addresses and add decryption functionality for future

Use crypto (node tool) to encrypt the emails for storage and build decrypt functionalities

Update past issues component

Update past issues component:

1. Set up the component to use actual past issues and not faker data

Create routes to save user code in backend

• Add 'blurb' to Problem model to only show a small portion of the problem statement
• create softVerifyUser which doesn't require the user to be logged in but if they aren't the route is still accessed
• Edit getCurrentProblem route to only return current problem AND determine if returned item is the full problem or just blurb based on if user is logged in
• Edit problem component to only show code section IF user is logged in
• create route to save user code in db onEvaluate
• update user code in db for problem and enter a 'submitted' date to close

Error handling for login

Errors are placed in the store by the thunk for logging in. If a login fails as an example due to an incorrect password, the error will carryover and display on the sign up page. Need to determine a method for updating the state so that the error is cleared when navigating away from the login page.

Bug Fixes

• Executing code: missing filepath variable in executeCode.js file
• Initial Code update: initial code in editor does not update when going from previous problem to current problem
• Incorrect os determination (ie need to swap intel and apple setup)
• Leaderboard resizing fix
• Minor leaderboard component cleanup

Re-Open Solved Problem

Once a solution for displaying a completed solution code is determined, create a button to re-open a solved problem

• Create button under the displayed solution code
  o onClick should open a modal stating something like 'reopening will affect your time to solve score. Are you sure you want to continue?' Yes or No
• create an asyncThunk to update the solution in the backend
• create a backend route to handle the updating of the solution (remove completeDateTime)
  o route should return the updated solution

Oauth issue w/ Google + Github using Firefox Browser

When trying to sign in to Google / Github using Oauth, I get the following errors:

It works when I use Chrome or Safari. So far, I've tried shutting down any ad blockers or plug-ins that might cause an issue. Also, cleared my cache to no avail.

Add OAuth Options

Add Github and Linkedin as Oauth options

New Login Modal

Login modal should follow new redesign styling/format

If no 'current' problem, website crashes

Complete login modals

Tab Styling

Clean up tab styling

Navigation after logout

Currently after logout the user is redirected back to the landing page. This needs to be modified so that if they are on the current issue page they are redirected back to the landing page on logout, but if they are on any other page they should not be redirected on logout.

Responsive Leaderboard

Two Styles:

Mobile: Similar style to the original layout where clicking on a user shows details, clicking on them again or anywhere else closes the details

Desktop: Shows full table with all details, sortable by total score/time score/space score

Evaluate Loading Spinner

Add a spinner for the evaluate button to indicate to the user when it is loading and when it's complete