Post

A Realistic Weekly Roadmap (WEBGIS)

Structured roadmap designed for active learning...

Posted
By Ivan Arias
6 min read
A Realistic Weekly Roadmap (WEBGIS)

🧭 1. A Realistic Weekly Roadmap (Claude AI)

Month 1 — Foundations (no React yet)

  • Week 1–2: Vanilla JS deeply. Build a Leaflet map that fetches GeoJSON from a local FastAPI endpoint. No AI code. Use AI only to explain errors.
  • Week 3: Add a search box and clustering by hand. Understand why it’s getting messy.
  • Week 4: Intro to modules, build tools (Vite). Feel the pain of scale.

Month 2 — React makes sense now

  • Week 1–2: React basics. Rewrite your Leaflet app as a React app. Compare the two.
  • Week 3–4: React Router + Context. Build a 2-page WebGIS app with auth state.

Month 3 — Full Stack

  • Week 1–2: FastAPI + SQLAlchemy + Alembic. Build your own API from scratch for spatial data.
  • Week 3–4: Connect your React frontend to your backend. Deploy locally with Docker.

Month 4 — Real Project

  • Build one meaningful WebGIS app, start to finish, with AI only as a tutor using the prompt above. Document every decision in Obsidian.

🧭 2. Clear roadmap (CHATGPT AI tool)

This is the roadmap you asked for — structured and realistic:

🟢 Phase 1 — Fundamentals (YOU ARE HERE)

Goal: Understand everything you already used

Frontend (NO React yet — and this is correct)

  • Vanilla JS (DOM, fetch, events)
  • Leaflet core (no heavy plugins first)

Build:

  • Map + GeoJSON loader
  • Popup system
  • Layer toggle
  • Basic search (even simple)

👉 Why no React yet? Because:

If you don’t understand state & events in vanilla JS, React will confuse you more.

🟡 Phase 2 — Real WebGIS Patterns

Now you level up your current apps:

  • Marker clustering
  • Bounding box queries
  • API-driven layers (not static GeoJSON)
  • Caching / performance

Backend:

  • FastAPI
  • SQLAlchemy + Alembic
  • PostgreSQL + PostGIS

Build:

  • /features?bbox=...
  • /search?q=...
  • /layers

👉 This is where you become a real GIS dev

🔵 Phase 3 — React (ONLY NOW)

Now React makes sense:

  • React
  • React Router
  • State management (Context)

You will understand:

  • why components exist
  • why state matters
  • why routing matters

🟣 Phase 4 — Production Mindset

  • VPS (DigitalOcean)
  • Docker
  • Nginx
  • Performance tuning

🧱 4. Your BIG missing piece: reusable thinking

You asked:

“What generic tool to create?”

Here are the core reusable modules in WebGIS:

Frontend reusable blocks

  • Map initializer
  • Layer manager
  • API client
  • Search component
  • Popup renderer

👉 Start building a “mini framework” for yourself

🧪 5. Your new way of building projects (VERY IMPORTANT)

For your next project:

❌ OLD WAY

“ChatGPT build me a WebGIS app”

✅ NEW WAY

  1. Define feature:

    “I want bbox filtering”

  2. Ask AI:

    “Explain how bbox queries work in PostGIS. Don’t give code.”

  3. Try yourself

  4. If stuck:

    “Give me a hint, not full solution”

  5. Only last step:

    “Show solution and explain mistakes”

🤖 6. Your “AI Tutor Prompt” (use this ALWAYS)

Copy this into ChatGPT every time:

1
2
3
4
5
6
7
8
9
10
11
12

You are my programming tutor.

Rules:
- Do NOT give me full solutions unless I explicitly ask
- Break problems into steps
- Ask me questions before answering
- If I’m wrong, explain why
- Force me to think and write code
- Give hints, not answers
- When I finish, review my code and suggest improvements

Goal: Help me become independent, not dependent on you.

This will completely change your learning.

🗺️ 7. Database confusion (local vs cloud)

Your question is very good:

✅ For learning:

  • Local PostgreSQL + PostGIS

✅ For production:

  • VPS (DigitalOcean)

👉 Rule:

Learn locally → Deploy later

🧰 8. QGIS vs ArcGIS

Use:

  • QGIS ✅ (PRIMARY)
  • ArcGIS → only if job requires

Why QGIS:

  • Free
  • Widely used
  • Better for dev workflows

⚠️ 9. Hard truth (important)

You said:

“I feel I learned nothing”

That’s not true.

You:

  • Built 2 apps
  • Understand ecosystem
  • Know tools

👉 You’re NOT a beginner anymore 👉 You’re in the “fragile knowledge stage”

Now you need:

  • repetition
  • constraints
  • struggle

🚀 10. Your next step (very concrete)

Build this:

Project 3 (MANDATORY RULES)

  • Leaflet (no React)
  • FastAPI backend
  • PostGIS DB

Features:

  • Load features from API
  • BBOX filtering
  • Search box
  • Layer toggle

RULES:

  • No copy-paste full code
  • Write everything yourself first
  • AI only for hints

It is a common “AI trap” to feel like you are building everything but learning nothing. When the AI provides a complete code block, your brain switches from problem-solving to pattern matching, which prevents long-term retention.

Here is a structured roadmap designed for active learning, followed by the specific tools and the “Tutor Prompt” you requested.

2. 🗺️ The WebGIS Mastery Roadmap (GEMINI)

Phase 1: The Foundation (Data & CLI)

Goal: Stop treating the database and GDAL as “black boxes.”

  • PostgreSQL/PostGIS: Set up a local database. Learning locally is better because you can break things without costs or latency issues. Master ST_Intersects, ST_Buffer, and ST_Distance.
  • GDAL/OGR: Instead of asking AI for the command, use ogrinfo --help. Practice converting a Shapefile to GeoJSON manually in the terminal.
  • QGIS: Learn this over ArcGIS. It integrates seamlessly with the PostGIS/Python stack you are building.

Phase 2: The “API First” Backend

Goal: Create a robust data contract.

  • FastAPI + SQLAlchemy: Stick with FastAPI. It forces you to define “Schemas” (Pydantic), which helps you understand exactly what data is entering and leaving your app.
  • Alembic: Practice creating a table, then adding a column via a migration. Understanding how the schema evolves is key to “robust” apps.

Phase 3: The Frontend Pivot (Vanilla → React)

Goal: Understand why React exists.

  • Why wait for React? AI tells you to wait because React adds a layer of “State Management.” If you don’t understand how Leaflet manages layers in Vanilla JS, you will get lost when React tries to re-render the map every time a variable changes.
  • The Transition: Once you can build a search bar that filters a GeoJSON list in Vanilla, move to React. Use React-Leaflet, but focus on how useEffect handles the map initialization.

🛠️ Tool Feedback

  • Database: Keep it local for now. Move to Digital Ocean only when you are ready to “Productionize” and handle Nginx/SSL configurations.
  • GIS Software: QGIS. It is the industry standard for open-source developers. Use it to “check” your PostGIS queries visually.
  • The “Base Template”: Don’t build a massive template yet. Instead, create a GitHub Gist for a “Standard FastAPI Database Connection” and a “Standard Leaflet Map Init.” Small, reusable snippets are better than one giant, rigid template.

🤖 The “Socratic Tutor” Prompt

Copy and paste this into ChatGPT or Claude at the start of a new session. This forces the AI to stop giving you answers and start teaching you.

“I want you to act as my Lead WebGIS Mentor. I am currently working on [PROJECT NAME].

The Rules:

  1. Never give me a full block of code unless I specifically ask for an example of a small syntax.
  2. If I ask ‘how to do X’, explain the logic and the steps first.
  3. Ask me questions to lead me to the answer (Socratic method). For example: ‘What do you think should happen to the data before it reaches the frontend?’
  4. If I provide code with a bug, do not fix it. Point out the line or the logic error and ask me why I think it’s failing.
  5. Suggest the ‘Documentation Search’—tell me which specific part of the Leaflet or SQLAlchemy docs I should read to solve my problem.

Confirm you understand. Let’s start with my first task: [DESCRIBE TASK].”

Programming, Leaflet
roadmap
This post is licensed under CC BY 4.0 by the author.