henrylin03 / bjj-countdown

Countdown web app for your next BJJ competition!

🥋 BJJ Countdown

👋 Welcome to BJJ Countdown: a ReactJS web application to track your upcoming Brazilian Jiujitsu (BJJ) competitions! ⏳🥋

How to Use

1. Access the web application by visiting https://bjj-countdown.netlify.app/.
2. Click "Add new competition" and enter the name and date of your next BJJ competition.
3. See the countdown begin!
4. The countdown can be deleted and a new one added

Contributions & Feedback

I welcome your feedback and contributions to this project!

If you have any suggestions, ideas, or bug reports, please feel free to submit a GitHub issue.

bjj-countdown's Issues

ensure accurate timer

https://stackoverflow.com/questions/29971898/how-to-create-an-accurate-timer-in-javascript

refactor using barrel import

ensures cleaner folder structure and clarity when maintaining codebase

if existing countdown date is in the past, do not display that countdown date

if there is an existing countdown and it is in the past, clear the localStorage and wait for the user to input a new date (and optional name) of competition

link to smoothcomp account

allows linking to smoothcomp account to automatically populate countdown to the next competition you have signed up for

nb: this task may need to be broken down into further, smaller user stories

multiple countdown timers

as a user, i can input, view, and remove multiple countdown timers so that i can track different competitions

for competition name input, allow dropdown of common competition names

this will help with #10

error when competition name is empty string

error when competition name is empty string

remake using react.js

move from current (vanilla js, vanilla css) to react.js to enable easier implementation of future features, such as #9

add settings to allow option for user to choose their belt, which will change the colour scheme of the countdown timer

this will require coming up with different colour schemes (and potentially even change the icon at the top (optional)) for each of the following belts:

• white
• blue
• purple
• brown
• black

improve look and feel of date picker

see logo of competition

based on competition name entered, as a user, I can see the logo of the competition

as a user, on the day of the competition, see animation to highlight it is comp day to get me hyped up for the comp!

see long date as competition date, so that it is not confusing whether it is DD/MM/YYYY or MM/DD/YYYY

enable calendar view of all competitions

for future - if users able to log in, enable users to also see their historically logged competitions

allow user to enter _time_ of competition

leave optional - if optional, presumes 12am local time

implement tests

using jest perhaps?

ensure responsive design on mobile

currently, design is not very visually appealing on mobile devices

improve typeface, colour scheme for accessibility and visual appeal

improve user interface design: create an attractive and intuitive user interface using CSS.

Focus on typography, colors, and layout to make the timer visually appealing.