4GeeksAcademy · fernando-delrio · Jan 15, 2026 · Jan 15, 2026 · Jan 15, 2026 · Jan 15, 2026
diff --git a/.env.example b/.env.example
@@ -1,14 +1,5 @@
-# This file includes global variables that will be available inside your project
-# 1. In the front end code you can access this variables like this: console.log(import.meta.env.VARIABLE_NAME)
-# 1. In the back end code you access the variable by importing os and then typing print(os.getenv('VARIABLE_NAME'))
+# Frontend
+VITE_MAPBOX_TOKEN=
 
-# Back-End Variables
-DATABASE_URL=postgres://gitpod:postgres@localhost:5432/example
-FLASK_APP_KEY="any key works"
-FLASK_APP=src/app.py
-FLASK_DEBUG=1
-DEBUG=TRUE
-
-# Front-End Variables
-VITE_BASENAME=/
-#VITE_BACKEND_URL=
+# Backend (if needed)
+VITE_BACKEND_URL=http://127.0.0.1:3001
diff --git a/.gitignore b/.gitignore
@@ -80,3 +80,4 @@ database.database
 database.db
 diagram.png
 __pycache__/
+.env
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,10 +1,21 @@
 {
-    "editor.formatOnSave": true,
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
-    "workbench.editorAssociations": {   
-        "*.md": "vscode.markdown.preview.editor"
-    },
-    "[javascriptreact]": {
-        "editor.defaultFormatter": "vscode.typescript-language-features"
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "workbench.editorAssociations": {
+    "*.md": "vscode.markdown.preview.editor"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "vscode.typescript-language-features"
+  },
+  "files.autoSave": "afterDelay",
+  "files.autoSaveDelay": 700,
+  "editor.minimap.enabled": false,
+  "sqltools.connections": [
+    {
+      "previewLimit": 50,
+      "driver": "SQLite",
+      "database": "${workspaceFolder:fs-pt-122_Raul_Alex_Fernando_CrazyMountainBikesocialClub}/src/instance",
+      "name": "test.db"
     }
+  ]
 }
diff --git a/Pipfile b/Pipfile
@@ -20,6 +20,7 @@ typing-extensions = "*"
 flask-jwt-extended = "==4.6.0"
 wtforms = "==3.1.2"
 sqlalchemy = "*"
+colorama = "*"
 
 [requires]
 python_version = "3.13"

diff --git a/Pipfile.lock b/Pipfile.lock
diff --git a/index.html b/index.html
@@ -1,16 +1,35 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="icon" href="/4geeks.ico" />
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
+      integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Hello Rigo</title>
+    <script
+      src="https://upload-widget.cloudinary.com/latest/global/all.js"
+      type="text/javascript"
+    ></script>
   </head>
   <body>
     <div id="root"></div>
     <script type="module" src="/src/front/main.jsx"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
+    <script
+      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
+      crossorigin="anonymous"
+    ></script>
   </body>
-</html>
+</html>
diff --git a/mapbox-react-app/.env.example b/mapbox-react-app/.env.example
@@ -0,0 +1,3 @@
+# Mapbox Access Token
+# Get your token from: https://account.mapbox.com/access-tokens/
+VITE_MAPBOX_ACCESS_TOKEN=your_mapbox_access_token_here
diff --git a/mapbox-react-app/README.md b/mapbox-react-app/README.md
@@ -0,0 +1,28 @@
+# use-mapbox-gl-js-with-react
+
+This is supporting code for the Mapbox tutorial [Use Mapbox GL JS in an React app](https://docs.mapbox.com/help/tutorials/use-mapbox-gl-js-with-react/).
+
+## Overview
+
+This tutorial walks through how to setup [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js/) in an [React](https://react.dev) project.  
+
+
+You'll learn how to:
+- Setup a Vite JS app to use React
+- How to install Mapbox GL JS and its dependencies.
+- Use Mapbox GL JS to render a full screen map.
+- How to add a toolbar which displays map state like `longitude`, `latitude`, and `zoom` level and is updated as the map is interacted with (showing the map to app data flow).
+- How to create a UI button to reset the map to its original view (showing the app to map data flow).
+
+
+## Prerequisites
+
+- Node v18.20 or higher
+- npm
+
+## How to run
+
+- Clone this repository and navigate to this directory
+- Install dependencies with `npm install`
+- Replace `YOUR_MAPBOX_ACCESS_TOKEN` in `src/App.jsx` with an access token from your [Mapbox account](https://console.mapbox.com/).
+- Run the development server with `npm run dev` and open the app in your browser at [http://localhost:5173](http://localhost:5173).
diff --git a/mapbox-react-app/eslint.config.js b/mapbox-react-app/eslint.config.js
@@ -0,0 +1,29 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs['recommended-latest'],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
+  },
+])
diff --git a/mapbox-react-app/index.html b/mapbox-react-app/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="https://static-assets.mapbox.com/branding/favicon/v2/favicon-32x32.png?v=gAd4JjrGWl" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite, React + Mapbox GL JS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>