EcoLuz

EcoLuz is an informative website that allows checking the price of the electricity in Spain during the current day, fetching the data from the ESIOS API, the Spanish electricity market entity.

It is mainly built with ReactJS and TailwindCSS with ViteJS as the bundler, along with other libraries such as Redux or ChartJS.

Contributing: working in local

You can help to improve this website, either by creating some issues for possible enhancements or contributing to the code by cloning the repository and creating a pull request with the changes. The main branch is a protected branch that is only used to deploy stable versions. Therefore, all the WIP must be done in the development branch and it will be merged into main when everything is working fine.

Setting up the environment

It requires to install NodeJS (version v16.13.0). If NodeJS does come with the Yarn package manager already installed, do it manually. Try to use yarn instead of npm to avoid conflicts with yarn.lock and package-lock.json files auto-generated using one or the other, respectively. You can check that everything works with the following commands (note that the versions can differ from the ones that you have installed):

$ node --version
v17.2.0
$ yarn --version
1.22.5

Then, install the dependencies (including the ones for development) with:

yarn install --dev

Dealing with the translations

The application supports the four official languages in Spain: Basque, Catalan, Spanish and Galician. The raw translation file is the CSV file ./translations/translations.csv, which has five columns: the key used in the application to translate to the corresponding language and the translation for that key in each of the four languages. In the following example we create a tag, SETTINGS.TITLE, that will be used later on the web, and it is going to be translated to the selected language.

KEY,BA,CA,ES,GA
...
SETTINGS.TITLE,Konfigurazioa,Configuració,Configuración,Configuración

The idea behind using this centralized CSV file is to avoid inconsistency between translation files, missing translations, non-matching keys, and extra duplicated effort. However, the translations need to be bundled in an appropriate format, in ./translations/build/<LANG>.json with <LANG> being each language code (BA, CA, ES, and GA). These files are not tracked by git and will be overwritten if you run the Python3 script to build the translations:

$ python3 ./translations/buildTranslations.py

In any React component, we can use then the following code to transform the translation key to the corresponding translation in the currently configured language:

const { t } = useTranslation('translation')
t('SETTINGS.TITLE')}

Running it in localhost

Once everything is installed, simply run the server with:

$ yarn dev

This will start a local server at http://localhost:3000/ecoluz/.

Checking the production bundled version

There can be some breaking changes with the production bundled version compared to the development one, especially with some TailwindCSS dynamically generated classes. To check that everything is working correctly, build the bundled code (in the ./dist/ folder) and run it to check that everything is still working fine.

$ Yarn build
$ yarn serve

This will start a local server with the production-ready built at http://localhost:5000/ecoluz/.