added tailwind and created basic user model.

backend/api/migrations/0002_user_todo_assigned_to_todo_completed_at_and_more.py

@@ -0,0 +1,60 @@
+# Generated by Django 5.0.6 on 2024-06-24 07:33
+
+import datetime
+import django.db.models.deletion
+import django.utils.timezone
+from django.conf import settings
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('api', '0001_initial'),
+        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='User',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('username', models.CharField(max_length=100)),
+                ('email', models.EmailField(max_length=254, unique=True)),
+                ('password', models.CharField(max_length=100)),
+            ],
+        ),
+        migrations.AddField(
+            model_name='todo',
+            name='assigned_to',
+            field=models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.CASCADE, to=settings.AUTH_USER_MODEL),
+        ),
+        migrations.AddField(
+            model_name='todo',
+            name='completed_at',
+            field=models.DateTimeField(blank=True, null=True),
+        ),
+        migrations.AddField(
+            model_name='todo',
+            name='created_at',
+            field=models.DateTimeField(auto_now_add=True, default=django.utils.timezone.now),
+            preserve_default=False,
+        ),
+        migrations.AddField(
+            model_name='todo',
+            name='due_date',
+            field=models.DateField(default=datetime.datetime(2024, 6, 24, 7, 33, 19, 896417, tzinfo=datetime.timezone.utc)),
+            preserve_default=False,
+        ),
+        migrations.AddField(
+            model_name='todo',
+            name='frequency',
+            field=models.IntegerField(default=1),
+            preserve_default=False,
+        ),
+        migrations.AddField(
+            model_name='todo',
+            name='updated_at',
+            field=models.DateTimeField(auto_now=True),
+        ),
+    ]

backend/api/models.py

@@ -4,7 +4,21 @@ from django.db import models
 class Todo(models.Model):
     title = models.CharField(max_length=100)
     description = models.TextField()
+    frequency = models.IntegerField()
+    due_date = models.DateField()
+    assigned_to = models.ForeignKey('auth.User', on_delete=models.CASCADE, null=True, blank=True)
+    created_at = models.DateTimeField(auto_now_add=True)
+    updated_at = models.DateTimeField(auto_now=True)
     completed = models.BooleanField(default=False)
+    completed_at = models.DateTimeField(null=True, blank=True)
 
     def __str__(self):
-        return self.title
+        return self.title
+
+class User(models.Model):
+    username = models.CharField(max_length=100)
+    email = models.EmailField(unique=True)
+    password = models.CharField(max_length=100)
+
+    def __str__(self):
+        return self.username

frontend/package-lock.json

@@ -20,6 +20,9 @@
         "react-scripts": "5.0.1",
         "typescript": "^4.9.5",
         "web-vitals": "^2.1.4"
+      },
+      "devDependencies": {
+        "tailwindcss": "^3.4.4"
       }
     },
     "node_modules/@adobe/css-tools": {

frontend/package.json

@@ -39,5 +39,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.4.4"
   }
 }

frontend/src/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

frontend/src/App.tsx

@@ -1,24 +1,32 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import { useEffect, useState } from "react";
+
+type Todo = {
+  id: number;
+  title: string;
+  description: string;
+  completed: boolean;
+};
+
+function setCompleted(todo: Todo) {}
 
 function App() {
+  const [todos, setTodos] = useState<Todo[]>([]);
+
+  useEffect(() => {
+    fetch("http://localhost:8000/api/todo")
+      .then((res) => res.json())
+      .then((data) => setTodos(data));
+  }, []);
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div className="container mx-auto flex flex-col items-center justify-center h-screen gap-4">
+      {todos.map((todo) => (
+        <div className="shadow-sm border rounded-sm p-4" key={todo.id}>
+          <p>{todo.title}</p>
+          <p>{todo.description}</p>
+          {todo.completed && <p>Completed</p>}
+          <button>Complete</button>
+        </div>
+      ))}
     </div>
   );
 }

frontend/src/index.css

@@ -1,13 +1,3 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

frontend/tailwind.config.js

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+