Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sleeplessglory/competition-records
A mobile and desktop application for recording results of competitors with 3 stopwatches
https://github.com/sleeplessglory/competition-records
css cypress html javascript jsdoc react sass vite
Last synced: 15 days ago
JSON representation
A mobile and desktop application for recording results of competitors with 3 stopwatches
- Host: GitHub
- URL: https://github.com/sleeplessglory/competition-records
- Owner: sleeplessglory
- License: mit
- Created: 2024-09-07T17:42:00.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2024-09-11T20:44:57.000Z (2 months ago)
- Last Synced: 2024-10-16T15:33:35.736Z (about 1 month ago)
- Topics: css, cypress, html, javascript, jsdoc, react, sass, vite
- Language: JavaScript
- Homepage: https://sleeplessglory.github.io/competition-records/
- Size: 1.38 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Introduction
The project has been developed using **HTML**, **CSS**, **SASS**, **JavaScript**, **React**, **npm** and **git**. It has been tested with **Cypress** (E2E and Component testing types) and documented with **JSDoc** (for developers) and **MS Word** (for users).
Its main purpose is to record the best results amongst the competitors using 1, 2 or 3 stopwatches, which makes it easier to have different activities set up at the same time.
# Algorithm
Every stopwatch has the algorithm: after hitting a start button, a stopwatch starts showing on its display the elapsed time (updating every 10ms = 0.01s). A stopwatch can't be reset unless a stop button is clicked 3 times to save the best 3 results of competitors. This algorithm prevents from accidental data loss. If users accidentally reload the page, the application will warn about losing all the data before reloading or leaving the page. Also the application has hints for users (glowing animation effects around a stop and a reset button) in case they forget how to use it. Users can interact with 1, 2 or all 3 stopwatches simultaneously, which makes it easier to keep track on different activities at the same time.
# Application styling
## Desktop version
The layout for a desktop version of the application.
## Mobile verison
The layout for a mobile version changes and stores all the stopwatches in a single column.
# Cypress tests
## E2E testing
Here's a video of E2E tests with **Cypress**.
https://github.com/user-attachments/assets/91de7a8f-5d64-4a64-b913-a24e41cd30b6
## Component testing
And a video of Component tests.
https://github.com/user-attachments/assets/b8d8f698-4cbc-4183-a2a4-e781423d9f51
# Documentation
## Developer documentation
The application has been documented for developers with **JSDoc**. Available in this repository.
## User documentation
Finally, a documentation for users has been created with **MS Word**. [User documentation.pdf](https://github.com/user-attachments/files/16967419/User.documentation.pdf) version is available.
