Skip to main content
Get your local development environment set up and add your first Guatemalan slang word to the dictionary.

Prerequisites

Before you begin, ensure you have:
  • Node.js 18+ installed on your system
  • npm, pnpm, or yarn package manager
  • Git for version control
For detailed installation instructions, see the Installation Guide.

Getting Started

1

Clone the repository

Open your terminal and clone the Chapinismos repository:
git clone https://github.com/abisai7/diccionario-chapin.git
cd diccionario-chapin
2

Install dependencies

Install all required packages:
pnpm install
This installs Astro, Tailwind CSS, TypeScript, and all other dependencies.
3

Start the development server

Launch the local development server:
pnpm run dev
Open your browser to http://localhost:4321 to see your site running.
The dev server supports hot module replacement (HMR), so your changes will appear instantly in the browser.
4

Add your first word

Create a new file in src/content/words-es/ with a Guatemalan slang word:File: src/content/words-es/chilero.md
---
word: "Chilero"
meaning: "Algo muy bueno, genial, excelente."
examples:
  - "¡Qué chilero tu carro nuevo!"
  - "La fiesta estuvo bien chilera."
  - "Ese concierto va a estar chilero."
category: "adjetivo"
region: "Guatemala"
featured: true
---
Create the English version in src/content/words-en/chilero.md:
---
word: "Chilero"
meaning: "Something very good, cool, excellent."
examples:
  - "Your new car is so chilero!"
  - "The party was really chilero."
  - "That concert is going to be chilero."
category: "adjective"
region: "Guatemala"
featured: true
---
The filename must be the same in both words-es/ and words-en/ directories (e.g., chilero.md).
5

View your new word

Your new word will automatically appear on the homepage (if featured: true) and in the word index at:The development server will hot-reload and show your changes immediately.

What Just Happened?

You’ve successfully: ✅ Set up a local Astro development environment
✅ Installed all dependencies including Tailwind CSS
✅ Started the development server with HMR
✅ Created a bilingual word entry using Content Collections
✅ Validated your content with Zod schemas

Next Steps

Now that you have Chapinismos running locally, explore these topics:

Add More Words

Learn the complete workflow for adding words, including validation and best practices.

Content Collections

Understand how Astro Content Collections work and how to query word data.

Customize Styling

Modify colors, fonts, and design tokens to match your preferences.

Project Structure

Explore the codebase organization and understand where everything lives.

Internationalization

Learn how the bilingual system works and how to add more languages.

Build & Deploy

Build for production and deploy to Vercel, Netlify, or other platforms.

Common Development Commands

Here are the npm scripts you’ll use frequently:
CommandDescription
npm run devStart development server on port 4321
npm run buildBuild for production
npm run previewPreview production build locally
npm run formatFormat all files with Prettier
npm run lintLint code with ESLint
npm run lint:fixAuto-fix linting issues

Troubleshooting

If another process is using port 4321, you can specify a different port:
npm run dev -- --port 3000
If you see validation errors like "word" is required, check that your word file has all required frontmatter fields:
  • word (string)
  • meaning (string)
  • examples (array of strings)
  • category (valid enum value)
See the Validation Schema page for complete requirements.
If your changes aren’t showing up:
  1. Check the terminal for build errors
  2. Try refreshing the browser with Cmd+Shift+R (Mac) or Ctrl+Shift+R (Windows)
  3. Restart the dev server
If you see module errors:
rm -rf node_modules package-lock.json
npm install

Need Help?

View GitHub Repository

Browse the source code and open issues

Contributing Guide

Learn how to contribute to the project
For a more detailed setup guide, see the Installation page.

Build docs developers (and LLMs) love