Technigo · gabriellaberko · Jan 12, 2026 · Jan 13, 2026 · Jan 13, 2026 · Jan 13, 2026
diff --git a/README.md b/README.md
@@ -1 +1,12 @@
-# Todo
+# To-do App
+A task management application built with React, focusing on state management and a clean, component-driven architecture. The app uses Zustand for global state handling, enabling centralized task creation, updates, and persistence. Styled Components are used for scoped styling, ensuring a consistent and maintainable UI.
+
+# Netlify link: 
+https://planiture.netlify.app/
+
+# Tech
+- JavaScript
+- React
+- Global State Management / Zustand
+- Styled components
+- CSS + HTML
diff --git a/index.html b/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="./vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="./logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Todo</title>
+    <title>Planiture - Your planning app</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package.json b/package.json
@@ -10,14 +10,19 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "dayjs": "^1.11.19",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "recharts": "^3.6.0",
+    "styled-components": "^6.3.5",
+    "zustand": "^5.0.10"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
-    "@vitejs/plugin-react": "^4.3.4",
+    "@vitejs/plugin-react": "^4.7.0",
+    "babel-plugin-styled-components": "^2.1.4",
     "eslint": "^9.21.0",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.19",

diff --git a/public/logo-white.png b/public/logo-white.png
diff --git a/public/logo.png b/public/logo.png
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,5 +1,16 @@
+import { ThemeProvider } from 'styled-components';
+import { theme } from './styles/Theme.styled';
+import { GlobalStyle } from './styles/GlobalStyles';
+import { TaskOverviewPage } from './pages/TaskOverviewPage';
+
+
 export const App = () => {
   return (
-    <h1>React Boilerplate</h1>
+    <>
+      <ThemeProvider theme={theme}>
+      <GlobalStyle />
+        <TaskOverviewPage />
+      </ThemeProvider>
+    </>
   )
 }
diff --git a/src/assets/bw-confetti.png b/src/assets/bw-confetti.png
diff --git a/src/assets/bwflags.png b/src/assets/bwflags.png
diff --git a/src/assets/confetti-2.png b/src/assets/confetti-2.png
diff --git a/src/assets/confetti-gray.png b/src/assets/confetti-gray.png
diff --git a/src/assets/confetti.png b/src/assets/confetti.png
diff --git a/src/assets/flags.png b/src/assets/flags.png
diff --git a/src/assets/label.png b/src/assets/label.png
diff --git a/src/assets/man-on-the-moon.png b/src/assets/man-on-the-moon.png
diff --git a/src/assets/rocket.gif b/src/assets/rocket.gif
diff --git a/src/assets/tag.png b/src/assets/tag.png
diff --git a/src/components/Chart.jsx b/src/components/Chart.jsx
@@ -0,0 +1,43 @@
+import { useTaskStore } from "../stores/taskStore";
+import { PieChart, Pie, Cell, Legend } from "recharts";
+
+export const Chart = () => {
+
+  const tasks = useTaskStore(state => state.tasks);
+
+  const categories = tasks.map((task)=> task.category);
+
+  //count how many instances of each category
+  const categoryCount = categories.reduce((acc, category) => {
+    acc[category] = (acc[category]||0) + 1;
+    return acc;
+  }, {});
+
+  //turn into an object array to use for pie chart
+  const pieChartCategoryData = Object.entries(categoryCount).map(([name, value])=>({ name, value }));
+
+  const sliceColors = ["#52C5FF", "#14B8A6", "#2563EB", "#4F46E5", "#A78BFA", "#9a64c2", "#a8459f", "#ad2077", "#7C3AED"];
+
+  return(
+      <PieChart width={290} height={180}>
+      <Pie   
+        data={pieChartCategoryData}
+        dataKey="value"
+        nameKey="name"
+        cx="40%"  //make space for legend
+        cy="50%"
+        outerRadius={60}
+      >
+      {pieChartCategoryData.map((entry, index) => (
+        <Cell key={`cell-${index}`} fill={sliceColors[index % sliceColors.length]} />
+      ))}
+      </Pie>
+        <Legend
+          verticalAlign="middle"
+          align="right"
+          layout="vertical"
+          iconType="circle"
+        />
+      </PieChart>
+  );
+}
diff --git a/src/components/EmptyState.jsx b/src/components/EmptyState.jsx
@@ -0,0 +1,41 @@
+import styled from "styled-components";
+import moon from "../assets/man-on-the-moon.png";
+import rocket from "../assets/rocket.gif";
+
+
+export const EmptyTasksMessage = () => {
+  return(
+    <StyledWrapper>
+      <p><b>Things to do? Let us help you get organized!</b><br></br>Add your first task to get started.</p>
+      <StyledAnimation src={rocket} alt="Rocket animation" />
+    </StyledWrapper>
+  );
+}
+
+export const EmptyIncompleteTasksMessage = () => {
+  return(
+    <StyledWrapper>
+      <StyledImg src={moon} alt="confetti"/>
+      <p><b>Hurray, there's nothing left to do!</b><br></br>All tasks are completed.</p>
+    </StyledWrapper>
+  );
+}
+
+const StyledImg = styled.img`
+  width: auto;
+  height: 82px;
+`;
+
+const StyledAnimation = styled.img`
+  width: auto;
+  height: 100px;
+`;
+
+const StyledWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  color: ${props => props.theme.colors.main.secondaryText};
+  margin: 42px;
+`;
diff --git a/src/components/Task.jsx b/src/components/Task.jsx
@@ -0,0 +1,64 @@
+import { TaskStatusBtn } from "./buttons/TaskStatusBtn";
+import { RemoveTaskBtn } from "./buttons/RemoveTaskBtn";
+import { useTaskStore } from "../stores/taskStore";
+import { TaskCategory } from "./TaskCategory";
+import { TaskDeadline } from "./TaskDeadline";
+import styled from "styled-components";
+
+export const Task = ({ task }) => {
+
+  const updateCompletionStatus = useTaskStore(state => state.updateCompletionStatus);
+
+  const removeTask = useTaskStore(state => state.removeTask);
+
+  return(
+    <StyledDiv>
+      <StyledOuterWrapper>
+        <StyledTaskHeader>
+          {task.category && <TaskCategory>{task.category}</TaskCategory>}
+          <RemoveTaskBtn onClick={() => removeTask(task.id)} />
+        </StyledTaskHeader>
+        <StyledInnerWrapper>
+          <div>
+            <h3>{task.name}</h3>
+            {task.description && <p>{task.description}</p>}
+            {task.deadline && task.completed === false && <TaskDeadline deadline={task.deadline}>{task.deadline}</TaskDeadline>}
+          </div>
+          <TaskStatusBtn onClick={() => updateCompletionStatus(task.id, task.completed)} completed={task.completed}/>
+        </StyledInnerWrapper>
+      </StyledOuterWrapper>
+    </StyledDiv>
+  );
+}
+
+const StyledDiv = styled.div`
+  width: 100%;
+  padding: 12px 24px;
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.06);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  min-width: 40vw;
+  border-radius: 12px;
+`;
+
+const StyledOuterWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  margin-bottom: 12px;
+`;
+
+const StyledInnerWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  margin: 12px 0;
+`;
+
+const StyledTaskHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
diff --git a/src/components/TaskCategory.jsx b/src/components/TaskCategory.jsx
@@ -0,0 +1,27 @@
+import label from "../assets/label.png";
+import styled from "styled-components";
+
+export const TaskCategory = ({ children }) => {
+  return(
+    <StyledWrapper>
+      <StyledIcon src={label} alt="label" /> 
+      <StyledParagraph>{children}</StyledParagraph>
+    </StyledWrapper>
+  );
+}
+
+const StyledWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  color: ${props => props.theme.colors.main.secondaryText};
+  margin: 0;
+`;
+const StyledIcon = styled.img`
+  width: auto;
+  height: 18px;
+  margin-right: 8px;
+`;
+const StyledParagraph = styled.p`
+  margin: 0;
+`;
+
diff --git a/src/components/TaskContainer.jsx b/src/components/TaskContainer.jsx
@@ -0,0 +1,32 @@
+import { useTaskStore } from "../stores/taskStore";
+import { Task } from "./Task";
+import { AddTaskBtn } from "../components/buttons/AddTaskBtn";
+import { EmptyTasksMessage, EmptyIncompleteTasksMessage } from "./EmptyState"; 
+import styled from "styled-components";
+
+export const TaskContainer = ({ openForm }) => {
+
+  const tasks = useTaskStore(state => state.tasks);
+  const incompletedTasks = tasks?.filter(task => task.completed === false);
+  const completedTasks = tasks?.filter(task => task.completed);
+
+  return(
+    <StyledDiv>
+      {(!tasks || tasks.length < 1) && <EmptyTasksMessage />}
+      {tasks && incompletedTasks.length > 0 && <h2>To-do list</h2>}
+      {tasks && tasks.length > 0 && incompletedTasks.length < 1 && <EmptyIncompleteTasksMessage />}
+      {tasks && incompletedTasks.map(task => (<Task key={task.id} task={task} />))}
+      {tasks && tasks.length > 0 && <AddTaskBtn onClick={openForm}/>}
+      {completedTasks && completedTasks.length > 0 && <h2>Completed tasks</h2>}
+      {completedTasks.map(task => (<Task key={task.id} task={task} />))}
+    </StyledDiv>
+  );
+}
+
+const StyledDiv = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  margin: 12px 16px 24px 16px;
+`;
diff --git a/src/components/TaskDeadline.jsx b/src/components/TaskDeadline.jsx
@@ -0,0 +1,17 @@
+import styled from "styled-components";
+import dayjs from "dayjs";
+
+export const TaskDeadline = ({ deadline, children }) => {
+
+  const isOverDue = dayjs().isAfter(dayjs(deadline), "day");
+
+  return(
+    <>
+    <StyledParagraph $isOverDue={isOverDue}><i>Deadline: {children}</i></StyledParagraph>
+    </>
+  );
+}
+
+const StyledParagraph = styled.p`
+  color: ${props => props.$isOverDue ? props => props.theme.colors.button.overdue : props => props.theme.colors.main.secondaryText};
+`;