Non Profit Devs

A website where non profit developers and non profit organizations can meet.

Monorepo Structure

This project is organized as a monorepo containing:

• frontend/ - React SPA (Vite + React)
• backend/ - Rails API with GraphQL
• docs/ - API documentation

Getting Started

This monorepo uses Bun workspaces for package management.

Installation

bun install

Frontend

bun run dev:frontend
bun run build:frontend
bun run serve:frontend

Or work directly in the frontend workspace:

cd frontend
bun start

Backend

See backend/README.md for setup instructions.

API Documentation

API documentation is available in docs/api/.

TypeScript & GraphQL

The frontend uses manual TypeScript types for GraphQL operations. GraphQL Codegen is configured but currently disabled due to Apollo Client version compatibility. To enable automatic type generation:

cd frontend
npm install --save-dev @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-operations @graphql-codegen/typescript-react-apollo
npm run generate  # Generate types from schema

Configuration is in frontend/codegen.ts.

🚀 Deployment

This application is configured for production deployment using Kamal.

VPS Setup

Before deploying, prepare your Linux server. SSH into your server and run these commands:

1. Update system and install Docker:

   sudo apt update
   sudo apt install -y docker.io
   sudo systemctl start docker
   sudo systemctl enable docker

2. Add your user to Docker group (replace username with your actual username):

   sudo usermod -aG docker username
   # Logout and login again for group changes to take effect

3. Create persistent storage directories:

   sudo mkdir -p /mnt/non-profit-devs/storage
   sudo mkdir -p /mnt/non-profit-devs/db
   sudo chown -R $USER:$USER /mnt/non-profit-devs

4. Configure firewall (if using UFW):

   sudo ufw allow 22/tcp    # SSH
   sudo ufw allow 80/tcp    # HTTP
   sudo ufw allow 443/tcp   # HTTPS
   sudo ufw --force enable

5. Verify setup:

   docker --version
   ls -la /mnt/non-profit-devs/

6. Point your domain DNS to the server's IP address (178.156.197.43).

Quick Deploy

1. Set up 1Password (if not already done):

   # Install 1Password CLI if needed
   op signin  # Authenticate with 1Password
   
   # Create vault item "Non-Profit Devs" with:
   # - KAMAL_REGISTRY_PASSWORD: your Docker registry password
   # - RAILS_MASTER_KEY: copy from backend/config/master.key

2. Configure Deployment: Edit config/deploy.yml with your server IP and domain (replace YOUR_SERVER_IP and YOUR_DOMAIN.com).

3. Deploy:

   ./deploy.sh  # Automated deployment script

Manual Deployment

See backend/README.md for detailed deployment instructions.

Requirements

• Linux server with Docker
• Domain name pointing to server IP
• Docker Hub account (or other registry)

Collaboration

If you want to help improve this website, be my guest, you can pick any issue from github, for bugs I'm creating a new branch bug/<number of the issue> and for enhancements I'm creating a branch feat/<number of the issue> and once that is solved merged into dev and branch deleted.

If you want to help but don't know how to contribute to an open source project you can read this or this or even filing a bug/enhancement already helps a ton!

Footnote: before commiting any changes run cd frontend && bun run format, let's keep this tidy and clean 😄

For more information, our slack

Translations

Translations are managed with react-i18next. Key catalogs live in the frontend/src/translations directory, as JSON files named as the language they offer translations for.

|__ frontend
|   |__ src
|   |   |__ translations
|   |   |   |__ en.json
|   |   |   |__ es.json
|   |   |__ i18n.js

Once a translation is complete, it must be registered in the frontend/src/i18n.js file as a resource:

const resources = {
  en: {
    translation: en,
  },
  es: {
    translation: es,
  },
};

Finally, for a user to be able to switch languages, the new language must be added to the ALL_LANGUAGES definition in the Language UI component:

const ALL_LANGUAGES = [
  { code: 'en', label: 'English' },
  { code: 'es', label: 'Español' },
];

---

Non Profit Devs

Un sitio web donde pueden reunirse desarrolladores sin fines de lucro y organizaciones sin fines de lucro.

Estructura del Monorepo

Este proyecto está organizado como un monorepo que contiene:

• frontend/ - SPA de React (Vite + React)
• backend/ - API de Rails con GraphQL
• docs/ - Documentación de la API

Comenzando

Este monorepo usa Bun workspaces para la gestión de paquetes.

Instalación

bun install

Frontend

bun run dev:frontend
bun run build:frontend
bun run serve:frontend

O trabaja directamente en el workspace del frontend:

cd frontend
bun start

Backend

Ver backend/README.md para instrucciones de configuración.

Documentación de la API

La documentación de la API está disponible en docs/api/.

Colaboración

Si desea ayudar a mejorar este sitio web, sea mi invitado, puede elegir cualquier issue de github, para bugs estoy creando una nueva rama bug/<número del issue > y para mejoras estoy creando una rama feat/<número del problema> y una vez que se resuelve, se fusiona en dev y se elimina la rama.

Si desea ayudar pero no sabe cómo contribuir a un proyecto de código abierto, puede leer esto o esto o incluso presentar un error / mejora ya ayuda muchísimo!

Nota al pie: antes de confirmar cualquier cambio, ejecute cd frontend && bun run format, mantengamos esto ordenado y limpio 😄

Para mas informacion en nuestro slack

Traducciones

Las traducciones se gestionan utilizando react-i18next. Los catálogos de texto están en el directorio frontend/src/translations en forma de archivos JSON nombrados por el código de cada idioma.

|__ frontend
|   |__ src
|   |   |__ translations
|   |   |   |__ en.json
|   |   |   |__ es.json
|   |   |__ i18n.js

Cuando una traducción está completa, se la debe registrar en el archivo frontend/src/i18n.js como un recurso:

const resources = {
  en: {
    translation: en,
  },
  es: {
    translation: es,
  },
};

Por último, para que las personas usuarias utilicen el idioma en el sitio, se debe registrar el idioma en ALL_LANGUAGES, en el componente Language:

const ALL_LANGUAGES = [
  { code: 'en', label: 'English' },
  { code: 'es', label: 'Español' },
];