Skip to main content
200 Mates is built with vanilla JavaScript and requires no build step, making local development straightforward and fast.

​
Prerequisites

Before you begin, ensure you have:
  • A modern web browser (Chrome, Firefox, Safari, or Edge)
  • A code editor (VS Code, Sublime Text, etc.)
  • Git installed on your machine
This project uses vanilla JavaScript with no build tools or dependencies to install. You can open the HTML file directly in your browser.

​
Setup Instructions

1

Clone the repository

Clone the 200 Mates repository to your local machine:
git clone https://github.com/paintingcreatures-a11y/200mates.git
cd 200mates
2

Open the project

Open the project folder in your code editor:
code .
Or use your preferred editor.
3

Launch the application

Since this is a vanilla JavaScript project, you can open index.html directly in your browser:Option 1: Direct file openSimply double-click index.html or open it from your browser’s File menu.Option 2: Local server (recommended)For better testing and to avoid CORS issues, use a local development server:
# Using Python's built-in server
python -m http.server 8000
# Then visit http://localhost:8000
4

Configure Supabase (optional)

If you need to test database functionality, you’ll need to configure Supabase credentials.The Supabase configuration is located in config/constants.js:
config/constants.js
const SUPABASE_URL  = "your-project-url";
const SUPABASE_ANON = "your-anon-key";
const sb = supabase.createClient(SUPABASE_URL, SUPABASE_ANON);
The production credentials are committed to the repository but are safe as they use Row Level Security (RLS). For local development, consider using a separate Supabase project.
5

Test the application

Open your browser and verify that:
  • The globe renders correctly
  • The form fields are interactive
  • Language switching works (ES/EN/PT)
  • The hamburger menu opens
  • GPS location detection prompts (if allowed)

​
Development Workflow

​
Making Changes

  1. Edit any .js, .css, or .html files in your editor
  2. Save the file
  3. Refresh your browser to see changes
Use your browser’s DevTools (F12) to debug JavaScript, inspect network requests, and test responsive layouts.

​
No Build Required

Unlike modern frameworks, 200 Mates doesn’t require:
  • npm install or package managers
  • Webpack, Vite, or other bundlers
  • Transpilation or compilation
  • Build commands
All code runs directly in the browser, making the development cycle extremely fast.

​
Browser Console

The application logs useful information to the browser console: 
// Check for errors related to:
// - Supabase connection
// - Globe rendering
// - GPS permissions
// - Form submissions
Open DevTools Console (F12 → Console) to monitor application behavior.

​
Testing GPS Features

To test GPS functionality:
  1. Ensure you’re using HTTPS or localhost (browsers restrict geolocation to secure contexts)
  2. Allow location permissions when prompted
  3. Check the GPS status indicator in the form

Next: Project File Structure

Learn about how the project is organized and where to find specific functionality.

Build docs developers (and LLMs) love

Get started for freeTalk to us