Overview

In this part, we’re going to demonstrate database connections and basic CRUD operations on each of the backend technologies. Since we’re using React for most, we’ll share the front-end where it makes sense.

The application for this doesn’t really matter, so because it is simple to conceptualize, we’re using Projects and Tasks as the models.

FastAPI-React

Database Setup

I used docker-compose to setup a Mysql database, similar to “Part 1” example. I changed the database to fastapidemo.

services:
  mysql:
    image: mysql
    env_file:
      - .env
    ports:
      - '3306:3306'

Called docker compose up from wsl

Backend

I used Cursor AI to handle the recommended database setup.

For the application, I'd like to create and manage projects. For each project, be able to edit attributes like name and description. For each project, I want to manage a list of tasks, where tasks have a name, description, estimate, priority and completion status.

Ran the server again with python .\main.py and navigated to localhost:8000/projects

I’m experimenting with free database utilities

MySQL Workbench doesn’t seem to work right
Beekeeper Studio looks modern but doesn’t seem like you can edit data
HeidiSQL allows editing.. seems to work
I haven’t tried DBeaver yet.. TBD

I manually added a record, and refreshed to see the dummy project.

Frontend

Similarly, worked with Cursor AI for an initial front-end.

Now that the backend appears functional, could you modify the React frontend to add and delete projects, select a project and edit project properties first? We'll do tasks within a selected project later. Please use Bootstrap for components. I'd like to eventually be able to select a project from a list like Jira and see a list of tasks within the project view.

Could you revise to include a navbar, including "Home" and "Projects" links on the left side, as well as a login link on the right side. In general, the site should fill the browser. The present projects tab is a little odd, so perhaps a card style list view, where up to 3 cards can be viewed per row depending browser width.

ProjectService.ts

import axios from 'axios';
import { Project, ProjectCreate } from '../types';

const API_URL = 'http://localhost:8000';

export const ProjectService = {
    getProjects: async (): Promise<Project[]> => {
        const response = await axios.get(`${API_URL}/projects/`);
        return response.data;
    },

    getProject: async (id: number): Promise<Project> => {
        const response = await axios.get(`${API_URL}/projects/${id}`);
        return response.data;
    },

    createProject: async (project: ProjectCreate): Promise<Project> => {
        const response = await axios.post(`${API_URL}/projects/`, project);
        return response.data;
    },

    deleteProject: async (id: number): Promise<void> => {
        await axios.delete(`${API_URL}/projects/${id}`);
    },

    updateProject: async (id: number, project: ProjectCreate): Promise<Project> => {
        const response = await axios.put(`${API_URL}/projects/${id}`, project);
        return response.data;
    }
};

Projects.tsx excerpt for creating a new project


    const handleCreateProject = async () => {
        try {
            await ProjectService.createProject(formData);
            setShowCreateModal(false);
            setFormData({ name: '', description: '' });
            loadProjects();
        } catch (error) {
            console.error('Error creating project:', error);
        }
    };