Skip to main content

​
Contribution workflow

1

Fork the repository

Fork marcoszinga94/Argentista on GitHub, then clone your fork locally:
git clone https://github.com/YOUR_USERNAME/Argentista.git
cd Argentista
2

Create a branch

Create a descriptive branch for your change:
git checkout -b mi-contribucion
Use a short, lowercase, hyphen-separated name that describes what the branch does (e.g., add-tipo-cambio-page, fix-inflacion-chart).
3

Make your changes

Follow the code conventions below. Run the build frequently to catch type errors early:
npm run build
4

Commit your changes

Write clear commit messages in imperative mood:
git commit -m "Añade nueva funcionalidad"
5

Push and open a pull request

git push origin mi-contribucion
Then open a pull request on GitHub against the main branch. Describe what you changed and why.
Run npm run build before every commit. The build runs astro check for TypeScript validation. Pull requests that fail the build will not be merged.

​
Code conventions

React components

Use .jsx extension. Use useState and useEffect hooks. Fetch data from APIs inside useEffect. No class components.

Astro components

Use .astro extension. Import React components with the client:load directive for interactivity.

Styling

Use Tailwind CSS utility classes exclusively. Do not write custom CSS files or inline style attributes.

Naming

PascalCase for component files and function names (e.g., DolarCard.jsx). camelCase for all other functions and variables.

​
Additional rules

  • No code comments unless explicitly requested in the task.
  • Never expose API keys or secrets in source code. Use environment variables.
  • File extensions matter — .jsx for React, .astro for Astro. Do not mix them.

​
Component conventions

​
React components (.jsx)

React components handle data fetching and interactive UI. They use hooks and render JSX: 
import { useState, useEffect } from 'react';

export default function DolarCard() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://dolarapi.com/v1/dolares')
      .then(res => res.json())
      .then(setData);
  }, []);

  if (!data) return <p>Cargando...</p>;

  return <div className="rounded-xl p-4">{data[0].venta}</div>;
}

​
Astro components (.astro)

Astro components define page structure and import React components with client:load for client-side hydration: 
---
import Layout from '../layouts/Layout.astro';
import DolarCard from '../components/DolarCard.jsx';
---

<Layout title="Dólar">
  <DolarCard client:load />
</Layout>
The client:load directive is required for any React component that uses useState, useEffect, or browser APIs. Without it, the component renders as static HTML with no interactivity.

​
Adding a new page

1

Create the React component

Add a new .jsx file in src/components/:
// src/components/ReservasChart.jsx
import { useState, useEffect } from 'react';

export default function ReservasChart() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('/api/reservas')
      .then(res => res.json())
      .then(setData);
  }, []);

  return <div className="w-full">{/* chart content */}</div>;
}
2

Create the Astro page

Add a new .astro file in src/pages/. The filename becomes the URL path:
---
// src/pages/reservas.astro
import Layout from '../layouts/Layout.astro';
import ReservasChart from '../components/ReservasChart.jsx';
---

<Layout title="Reservas">
  <main>
    <h1 class="text-2xl font-bold">Reservas del BCRA</h1>
    <ReservasChart client:load />
  </main>
</Layout>
This file becomes available at /reservas.
3

Verify the build

npm run build
Fix any TypeScript or import errors before committing.

Build docs developers (and LLMs) love

Get started for freeTalk to us