Creating a To-Do List App with Ollama

Why Ollama?

1. Ease of Use: Ollama makes it incredibly SIMPLE to run language models locally, eliminating the need for complex configurations or depending on crowded server resources.
2. Open-Source: You can build applications that are CUSTOM, with no hidden costs or restrictive policies. Open-source tools like Ollama foster community development.
3. API Support: The seamless API access allows you to connect your app with functionalities like data retrieval quickly, management, & even natural language processing capabilities.

Setting Up Ollama

1. Installing Ollama

1
curl -fsSL https://ollama.com/install.sh | sh

2. Running Your First Model

1
ollama pull phi3

1
ollama run phi3

Designing Your To-Do List App

• Add tasks to their list
• Remove completede tasks
• View all tasks
• Mark tasks as complete

Step 1: Setting Up Project Directory

1
mkdir todo-app && cd todo-app

Step 2: Choosing the Tech Stack

• Node.js: To handle server-side logic
• React: For building user interfaces
• Tailwind CSS: To style our application Keeping it COOL & SIMPLE.

Step 3: Initializing the Project

1
npm init -y

Step 4: Installing Dependencies

1
npm install express cors nodemon body-parser

• Express: Framework for building web servers.
• CORS: Middleware for enabling Cross-Origin Resource Sharing.
• Nodemon: Development tool to auto-reload the server on changes.
• body-parser: It helps us parse incoming request bodies.

Step 5: Creating Server

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
const express = require('express');
const cors = require('cors');
const bodyParser = require('body-parser');

const app = express();
const PORT = process.env.PORT || 5000;

app.use(cors());
app.use(bodyParser.json());

let tasks = [];

app.get('/tasks', (req, res) => {
    res.json(tasks);
});

app.post('/tasks', (req, res) => {
    const task = req.body;
    tasks.push(task);
    res.status(201).send(task);
});

app.delete('/tasks/:id', (req, res) => {
    tasks = tasks.filter((_, index) => index !== parseInt(req.params.id, 10));
    res.sendStatus(204);
});

app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

Step 6: Creating Client Side with React

1
2
npx create-react-app client
cd client

Step 7: Building the UI Components

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
import React, { useState, useEffect } from 'react';
import './App.css';

function App() {
    const [tasks, setTasks] = useState([]);
    const [taskInput, setTaskInput] = useState('');

    useEffect(() => {
        fetch('http://localhost:5000/tasks')
            .then(res => res.json())
            .then(data => setTasks(data));
    }, []);

    const addTask = async (task) => {
        await fetch('http://localhost:5000/tasks', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({ task }) 
        });
        setTasks([...tasks, { task }]);
        setTaskInput('');
    };

    const removeTask = async (id) => {
        await fetch(`http://localhost:5000/tasks/${id}`, { method: 'DELETE' });
        setTasks(tasks.filter((_, index) => index !== id));
    };

    return (
        <div className="App">
            <h1>To-Do List</h1>
            <input value={taskInput} onChange={e => setTaskInput(e.target.value)} placeholder="Add your task here..." />
            <button onClick={() => addTask(taskInput)}>Add Task</button>
            <ul>
                {tasks.map((task, index) => (
                    <li key={index}>
                        {task.task}
                        <button onClick={() => removeTask(index)}>✅</button>
                    </li>
                ))}
            </ul>
        </div>
    );
}

export default App;

Step 8: Styling with Tailwind CSS

• Install Tailwind CSS:

1
2
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

• Go to the generated tailwind.config.js file & add:

1
2
3
4
5
6
7
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}",],
  theme: {
    extend: {},
  },
  plugins: [],
};

• Include Tailwind in your CSS:

1
2
3
@tailwind base;
@tailwind components;
@tailwind utilities;

Step 9: Running the App

Enhancing Your App

Utilizing Ollama’s AI Capabilities

• Smart Suggestions: When users add tasks, the app can suggest similar items based on historical data.
• Data Insights: Use Ollama to analyze task completion rates, giving feedback on how effectively the user manages their time.

Promoting Your App with Arsturn

Claim Your Demo

Conclusion

Resources

• Ollama Documentation
• Ollama GitHub Repository
• Arsturn