Skip to main content

Build Your Guatemalan Slang Dictionary

Learn how to create, customize, and deploy an interactive glossary of chapinismos using Astro, Tailwind CSS, and modern web technologies.

Get StartedView Documentation
Chapinismos logo

Quick Start

Get your local development environment up and running in minutes

1

Clone the repository

Start by cloning the Chapinismos repository to your local machine:
git clone https://github.com/abisai7/diccionario-chapin.git
cd diccionario-chapin
2

Install dependencies

Install the required dependencies using your preferred package manager:
pnpm install
3

Start the development server

Launch the local development server and open your browser:
pnpm run dev
Your site will be available at http://localhost:4321
4

Add your first word

Create a new markdown file in src/content/words-es/ to add a Guatemalan slang word:
---
word: "Chapín"
meaning: "Persona originaria de Guatemala; gentilicio coloquial."
examples:
  - "Me siento orgulloso de ser chapín."
  - "Los chapines somos trabajadores."
category: "sustantivo"
region: "Guatemala"
---
Don’t forget to create the English version in src/content/words-en/ with the same filename.

Explore by Topic

Dive deep into specific areas of the project

Content Management

Learn how to add, validate, and organize Guatemalan slang words using Astro Content Collections.

Architecture

Understand the project structure, routing system, and how components work together.

Internationalization

Implement bilingual support with Spanish and English routing and translations.

Theme Switching

Add dark and light mode support with localStorage persistence.

Styling

Customize the design system with Tailwind CSS and CSS variables.

Deployment

Build and deploy your static site to Vercel, Netlify, or other platforms.

Key Features

What makes Chapinismos a modern, performant dictionary application

Content Collections with Zod Validation

Type-safe word entries with automatic schema validation using Zod and Astro Content Collections.

Bilingual Support

Full Spanish and English support with i18n routing and separate content collections for each language.

Dark/Light Theme Toggle

User-friendly theme switching with localStorage persistence across sessions.

Static Site Generation

Lightning-fast performance with Astro SSG, optimized images, and zero JavaScript by default.

Component API Reference

Explore the reusable components that power the Chapinismos interface

Header Component

Navigation bar with language switcher, theme toggle, and responsive mobile menu.

WordCard Component

Display word entries with definitions, examples, and metadata in a card layout.

SearchBox Component

Real-time search input with keyboard shortcuts and URL parameter handling.

Ticker Component

Animated horizontal carousel displaying random words from the dictionary.

Ready to Build Your Dictionary?

Follow our comprehensive guides to create, customize, and deploy your own interactive glossary of Guatemalan slang words.

Start Building NowContribute to the Project