sergih28 / groc

Grind for the vision, revamp for precision, organize with decision, complete the mission.

👋 Hey, I'm Sergi!

I'm a passionate web developer looking forward to learn and improve every day!
You can check my dotfiles here

💻 My workspace

ℹ️ About me

🔭 I'm currently working on something cool
🎓 I’m currently learning Storybook and Jest
📘 I want to learn: Vue, Vuex, Nuxtjs
💬 Ask me about React, not Angular 🤷
📚 JS Frameworks: ♥️ React / 💔 Angular / 🧐 Vue

🙋 About me: I ♥️ English and I'm very passionate about computers 🖥️
✨ Hobby: I like to drive and program on twitch 🏎️
💭 My Dream: 🇨🇦 Canada 🇨🇦

📚 Languages / Frameworks / Libraries

🛠 Tools

👨‍💻 Projects

Year	Project
2019 🔴	Setup Comparator (rFactor 2)
2021 🛑	Foodies Organizer
2021 🛑	Technergy Academy
2020 🛑	Endurance Planner (private)
2020 🛑	My Simracing Stats (private)
2020 🟢	Downloads Automation
2018 🟢	Engineer me (private)

📊 Stats

🏆 Trophies

groc's Issues

Decide which global state library to use

Decide which react global state library to use.

The main candidates are:

• Legend
• Zustand

Add MADR to the project

Markdown Any Decision Records

The format should be the short version.

I don't think it's necessary to add subfolders, so they should be placed in /docs/decisions/0000-decision-example.md.

Add favicon

Add this emoji 🟡 as favicon.

This needs a bit of investigation, maybe this works.

Install and config bun + astro + react (with typescript)

Update astro to latest version (v4)

Decide what js date library to use

A decision has to be made regarding what js date library to use, as I think it will be useful when doing calculations with dates.

Install and config automatic changelog (conventional changelog)

Description

Install and config:

• Conventional changelog

Update eslint config with this to sort imports and stuff

Here's an example, but it can probably be improved.

Make a counter component (to 0 or from 0) in Storybook

For now, the counter can start the count right after being mounted.

Test the component.

Remove the issue template titles

It feels weird to have the OTHER word and the emoji in most of the standard issues, so I'd like that to be removed from the general issue template.

The same thing should be applied for the other issue templates as well, so that when you use them it does not have a default name.

How to solve this issue:

• Leave the title attribute from the issue templates as an empty string.

Create a Switch component to toggle light/dark theme

Keep it very simple.

This should just be a Switch component (need to create it) with specific props.

Add code of conduct

Description

Add a code of conduct file like this one.

Add an mdr for conventional commits

Install and config global state library

Description

Install and config:

• Global State library

Create fake data so we can have some data without manually creating it every time

Do this once #66 has been decided.

This functionality should read the local storage, and if it has no data, add the fake data.

The fake data should be always the same, so we are able to have an easier experience when developing.

Translate main readme to other languages

Translate the main readme to these languages:

• Catalan @ehdlg
• Spanish @ehdlg
• Korean @ehdlg
• Japanese @ehdlg

Add the readme files in /translations/readme/. Name the files as README.locale.md.
Example: README.es.md

Add tmuxinator template

Add a local tmuxinator project that contains the following.

Tab 1

• Name: dev
• Split window left: root folder.
• Split window right: run bun dev

Tab 2

• Name: tests
• Split window left: run bun test (need to create command in package.json)
• Split window right: run bun test:e2e

Create a Settings component in Storybook

This is what the Settings component (which will be a page) should have:

• Can be a form (use Formik)
• Include:
  • Pomodoro duration (default 25)
  • Break duration (default 5)
  • Long break duration (default 15)
• Mode (auto / manual) This is where you have to start each pomodoro or it just goes on and does not stop.
• DANGER: Remove data button option.

Look for a way to add autogenerated translations in React

Look if there is a free way to integrate autogenerated translations with React i18next.

Install and config translations

Description

Install and config:

• react-18next
• Translations

Translations will not be automatically generated, we will rely on DeepL, google translate and ChatGPT, as decided in #25.

This is the list of languages that the project should have when setting this up:

• English (the default one)
• Spanish
• Catalan
• Korean
• Japanese

Update tmux and tmuxinator related docs

Update app docs:

• Add here an "Optional Setup" title (###) and add tmux and tmuxinator local installations. As without that you cannot run bun dev, but it's still optional.
• Add dot here

Add to madr that every time we install a package, we will leave the exact version in the package.json

Create a play/pause button component in storybook

Keep it simple.

On click it should be toggled from play to pause state and visuals, and viceversa.

Install and config bun + astro + react (with typescript)

Description

Install and config:

• Bun
• Astro
• React + Typescript

Install and config linters and formatters (ESLint, Prettier, MarkdownLint, CommitLint)

Description

Install and config:

• ESLint
• Prettier
• MarkdownLint
• CommitLint

Add stylelint with a config for tailwind

Here's an example

Add progress bar component

Add a progress bar that will be used at the top of the page when a podomoro is ongoing.

Have the option to show or not the percentage completed inside the progress bar.

Have the option to select the 2 main colors (having, 1 default value for each one).

Decide where to host the website (vercel or github pages probably?)

Look specifically to host an Astro project.

Create a "next" button in storybook

Keep it very simple.

This should just be the main button component with specific props.

Propose a json structure to save the pomodoro data (in localstorage)

Keep in mind that you have to know when you start and finish in terms of datetimes, but you can have pauses in between.

Feel free to write the example with invented data to see the json structure.

Install formik

Install and config husky

Description

Install and config:

• Husky

Add 1 or multiple (pre-commit?) hooks to lint everything using the commitlint, eslint, prettier and markdownlint commands.

Once this is setup, you can probably add an extra commit with everything linted.

Create the footer component in storybook

The footer should be simple.

It should have the following lines:

Copyright © 2023, Sergi Heras & Contributors
Released under the MIT License
[Github icon] Github

2023 Should be dynamic. So that when we enter 2023, it says 2023 - 2024.
Sergi Heras should link to my Github profile page.
Contributors sould link to the project repository contributors section.
The word MIT should link to our LICENSE file.
Link both the github icon and the text to the project repository.

Tip: When adding tests, you can test with both just the initial year and with the initial and current year (considering the initial year is 2023 and the current 2024 or later).

Add these badges to the main readme

Add the following badges in the main Readme, at the right side of the main title, like React does.

• ![GitHub repo size](https://img.shields.io/github/repo-size/sergih28/groc?style=for-the-badge&logo=github&label=Repo&labelColor=333&color=6cc644)
• ![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/sergih28/groc?style=for-the-badge&logo=visualstudiocode&label=Code&labelColor=0078d7&color=gray)

If they don't look good there, feel free to put them right at the start of the file, before the main title.

Add contributing guidelines

Description

Add contributing guidelines.

We follow conventional commits.

Add husky hook on push check unit tests

Add security policy

Description

Add security policy.

Make a slider component in storybook

Should the value of the slider visually, as this will be used in the settings page to set up some values.

Name folder imports

Edit tsconfig.

@components
@layouts
@pages
@stories
@styles

Test that it works locally, but don't commit any changes related to testing this.

Add madr for global state management decision (zustand)

Install react query

Even if the data will be stored in local storage, it will be useful for when it eventually reads it from google api.

Install and config tailwind

Description

Install and config:

• Tailwind

Lint all markdown files

Now that commitlint is installed, we can lint all our current markdown files before modifying them or creating new ones.

Create a Notification component in Storybook

Using the library that has been decided before starting to work on this issue.

Think about React folder structure

Look for examples of how to organize the folder structure in a React project.

Keep in mind that there has to be a place for tests, and unit and e2e test should be in separate folders.

Also keep in mind that we are going to use Storybook.

Right now you can see in the app readme our basic folder structure given by astro.

Install and config Playwright

Description

Install and config:

• Playwright

Create a "reset" button in storybook

Keep it very simple.

This should just be the main button component with specific props.

Create the main button component in storybook

All the other buttons should use this main button component.

Install sonner

Install and config storybook

Description

Install and config:

• Storybook