Design and Development Tools
Where possible, all desktop tools are cross-platform (Win/Mac/Linux) and free / open-source / free for edu.
Database Design
These tools will help you with the design of your database…
| Tool | Purpose | Platform | Notes |
|---|---|---|---|
| DrawSQL | Visual database design | Web | Define relational database tables, fields, relationships, etc. |
UI Design
These tools will help you design the layout and look-and-feel of your UI…
| Tool | Purpose | Platform | Notes |
|---|---|---|---|
| Figma | UI design and prototyping | Web, Desktop, Mobile | Design UI layouts and add interactions to produce a working UI prototype. Free pro accounts |
| Excalidraw | Sketching / wire-framing | Web | Simple hand-drawn style diagrams and wireframes. Great for quick mockups. Can export as PNG/SVG |
| tldraw | Sketching / wire-framing | Web | Similar to Excalidraw but with a bit more polish. Good for quick UI sketches and diagrams |
| Realtime Colors | UI colour design | Web | Select and test UI colour palettes. See colours applied to example UI elements |
| Coolors | Colour palettes | Web | Explore and create colour palettes. Simple to use, with a huge collection of palettes |
| Color Hunt | Colour palettes | Web | Explore colour palettes |
Coding
These coding tools will be key to the development of your web app…
| Tool | Purpose | Platform | Notes |
|---|---|---|---|
| Visual Studio Code | Code editor / IDE | Desktop | Powerful and extensible code editor. See Setting Up VS Code for more details |
| Python | Programming language | Desktop | Required to run Flask. Install Python 3.10 or newer. Verify with python --version |
| GitHub | Code repository hosting | Web | Stores your code, tracks code commits, allows syncing between devices. Free pro accounts |
| GitHub Desktop | Managing code repos | Desktop | Simple GUI for managing Git repositories and syncing with GitHub |
| Rancher Desktop | Managing Docker containers | Desktop | An open-source application that provides all the essentials to work with Docker containers |
UI Debugging
As you develop your web UI, these tools can help debug issues…
| Tool | Purpose | Platform | Notes |
|---|---|---|---|
| Browser Dev. Tools | Inspect / debug HTML/CSS/JS | Browser | Press F12, or Ctrl+Shift+I |
| Responsively | Responsive design testing | Desktop | Preview your web app on multiple screen sizes simultaneously |
| Viewport Resizer | Responsive design testing | Browser | Bookmarklet to quickly test UI at various screen sizes |
Database Management
When working with databases, these tools can help manage and manipulate data…
| Tool | Purpose | Platform | Notes |
|---|---|---|---|
| SQLite Studio | Database management | Desktop | Manage and work with SQLite databases. Add / edit data, run test queries, etc. |
| Azimutt | Database visualisation | Web | Generates ER diagrams: Export database as SQL from SQLite Studio, open file in Azimutt (from SQL Structure) |
Icons and Symbols
If you want to add icons or unicode symbols to your app…
| Tool | Purpose | Platform | Notes |
|---|---|---|---|
| Lucide Icons | Icon collection | Web | Free icons, easy to configure and download / copy SVG code to place inline in HTML |
| &What; (AmpWhat) | UniCode characters | Web | Search and explore UniCode characters to copy/paste into your code |
Hosting
For your web app to be live on the Web, for others to see and use, you need to have it hosted…
| Tool | Purpose | Notes |
|---|---|---|
| Render | Web hosting | Generous free account (with limitations) to host Flask web apps. Auto-deploys from GitHub |
| Turso | SQLite database hosting | Generous free tier for hosting SQLite databases |