{"id":24097338,"url":"https://github.com/databytesun/task-tracker","last_synced_at":"2026-04-04T21:31:21.067Z","repository":{"id":271065108,"uuid":"863075313","full_name":"DataByteSun/Task-Tracker","owner":"DataByteSun","description":"A Task Tracker application where we have a backend API with Node.js and Express, which interacts with a MongoDB database, and connect everything with a React front end.","archived":false,"fork":false,"pushed_at":"2025-01-05T07:31:47.000Z","size":3406,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-30T11:05:04.999Z","etag":null,"topics":["cors","dotenv","express-js","mern","mern-project","mern-stack","mongodb","mongodb-database","nodejs","nodemon","postman","react","reactjs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DataByteSun.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-25T17:09:07.000Z","updated_at":"2025-01-06T13:57:16.000Z","dependencies_parsed_at":"2025-01-05T08:34:11.178Z","dependency_job_id":null,"html_url":"https://github.com/DataByteSun/Task-Tracker","commit_stats":null,"previous_names":["databytesun/simple-todo-app"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/DataByteSun/Task-Tracker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DataByteSun%2FTask-Tracker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DataByteSun%2FTask-Tracker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DataByteSun%2FTask-Tracker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DataByteSun%2FTask-Tracker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DataByteSun","download_url":"https://codeload.github.com/DataByteSun/Task-Tracker/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DataByteSun%2FTask-Tracker/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28131073,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-12-30T02:00:05.476Z","response_time":64,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cors","dotenv","express-js","mern","mern-project","mern-stack","mongodb","mongodb-database","nodejs","nodemon","postman","react","reactjs"],"created_at":"2025-01-10T13:43:51.548Z","updated_at":"2025-12-30T19:00:03.919Z","avatar_url":"https://github.com/DataByteSun.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Task Tracker\n\n## Setup Your Environment\n\n### Prerequisites\n1. Install Node.js from [nodejs.org](https://nodejs.org/). This will also install npm (Node Package Manager).\n2. Install [MongoDB](https://www.mongodb.com/try/download/community) Community Databaase.\n\n### Development Tools\n\n- Install a text editor like [Visual Studio Code](https://code.visualstudio.com/).\n- Use [Postman](https://www.postman.com/downloads/) to test API routes.\n\n### Dependencies\n\nTo install the necessary Node.js packages, run the following command:\n```bash\nnpm install express mongoose cors dotenv\n```\n- *Express:* Web framework for Node.js.\n- *Mongoose:* MongoDB object modeling tool.\n- *CORS:* Middleware to allow cross-origin requests (important when connecting React to Express).\n- *dotenv:* For environment variables (e.g., database credentials).\n\nInstall nodemon for development purposes (optional but helpful):\n```bash\nnpm install -g nodemon\n```\nInstall axios to handle HTTP requests:\n```bash\nnpm install axios\n```\n## 1. Backend Development (Node.js, Express, MongoDB)\n1.1 Create a folder for project:\n```bash\nmkdir mern-todo-app\ncd mern-todo-app\n```\n1.2 Initialize a Node.js project:\n```bash\nnpm init -y\n```\n### Set up Express and MongoDB\n1.3 Create the basic structure:\n```bash\n└── backend/\n    ├── models/\n    ├── routes/\n    ├── .env\n    ├── server.js\n```\n1.4 server.js (Entry point of the server):\n```Javascript\nconst express = require('express');\nconst mongoose = require('mongoose');\nconst cors = require('cors');\nconst dotenv = require('dotenv');\n\ndotenv.config();\nconst app = express();\n\n// Middleware\napp.use(cors());\napp.use(express.json()); // to parse JSON bodies\n\n// MongoDB connection\nmongoose.connect(process.env.MONGO_URI, {\n    useNewUrlParser: true,\n    useUnifiedTopology: true\n}).then(() =\u003e console.log('MongoDB connected'))\n  .catch(err =\u003e console.log(err));\n\n// Start the server\nconst PORT = process.env.PORT || 5000;\napp.listen(PORT, () =\u003e console.log(`Server running on port ${PORT}`));\n\nconst taskRoutes = require('./routes/tasks');\napp.use('/api', taskRoutes);\n```\n1.5 Environment Variables (`.env` file):\nCreate a `.env` file in your backend root directory with the following content:\n```bash\nMONGO_URI=\u003cYour MongoDB Connection String\u003e\n```\n**Note:** Mostly the address may be: `MONGO_URI=mongodb://localhost:27017/todoapp`\n\n1.6 Task Model (MongoDB Schema):\nCreate a `models` folder and add `Task.js`:\n```javascript\nconst mongoose = require('mongoose');\n\nconst TaskSchema = new mongoose.Schema({\n    title: {\n        type: String,\n        required: true\n    },\n    completed: {\n        type: Boolean,\n        default: false\n    }\n});\n\nmodule.exports = mongoose.model('Task', TaskSchema);\n```\n1.7 Create Routes (API)\n1.7.1 Task Routes:\nCreate a `routes` folder and add `tasks.js`:\n```javascript\nconst express = require('express');\nconst Task = require('../models/Task');\nconst router = express.Router();\n\n// Create a new task\nrouter.post('/tasks', async (req, res) =\u003e {\n    const { title } = req.body;\n    try {\n        const newTask = new Task({ title });\n        const savedTask = await newTask.save();\n        res.status(201).json(savedTask);\n    } catch (error) {\n        res.status(500).json({ message: 'Server Error' });\n    }\n});\n\n// Get all tasks\nrouter.get('/tasks', async (req, res) =\u003e {\n    try {\n        const tasks = await Task.find();\n        res.status(200).json(tasks);\n    } catch (error) {\n        res.status(500).json({ message: 'Server Error' });\n    }\n});\n\n// Update a task (mark as completed)\nrouter.put('/tasks/:id', async (req, res) =\u003e {\n    const { id } = req.params;\n    const { completed } = req.body;\n    try {\n        const updatedTask = await Task.findByIdAndUpdate(id, { completed }, { new: true });\n        res.status(200).json(updatedTask);\n    } catch (error) {\n        res.status(500).json({ message: 'Server Error' });\n    }\n});\n\n// Delete a task\nrouter.delete('/tasks/:id', async (req, res) =\u003e {\n    const { id } = req.params;\n    try {\n        await Task.findByIdAndDelete(id);\n        res.status(204).send();\n    } catch (error) {\n        res.status(500).json({ message: 'Server Error' });\n    }\n});\n\nmodule.exports = router;\n```\n1.7.2 Hook Routes into Server:\nIn `server.js`, import the routes and use them:\n```javascript\nconst taskRoutes = require('./routes/tasks');\napp.use('/api', taskRoutes);\n```\n\n## 2. Frontend Development (React)\n2.1 Set up React:\nIn the root folder (where you have `backend`), create a `frontend` folder:\n```bash\nnpx create-react-app frontend\ncd frontend\n```\n2.2 Create React Components:\nInside the `src` folder of your React app, create the following structure:\n```bash\n└── src/\n    ├── components/\n        ├── TaskList.js\n        ├── AddTask.js\n        └── Task.js\n    ├── App.js\n```\n2.3 TaskList.js (Fetching and displaying tasks):\n```javascript\nimport React, { useEffect, useState } from 'react';\nimport axios from 'axios';\nimport Task from './Task';\nimport AddTask from './AddTask';\n\nconst TaskList = () =\u003e {\n    const [tasks, setTasks] = useState([]);\n\n    useEffect(() =\u003e {\n        fetchTasks();\n    }, []);\n\n    const fetchTasks = async () =\u003e {\n        const res = await axios.get('/api/tasks');\n        setTasks(res.data);\n    };\n\n    const handleDelete = async (id) =\u003e {\n        await axios.delete(`/api/tasks/${id}`);\n        fetchTasks();\n    };\n\n    const handleComplete = async (id) =\u003e {\n        const task = tasks.find(t =\u003e t._id === id);\n        await axios.put(`/api/tasks/${id}`, { completed: !task.completed });\n        fetchTasks();\n    };\n\n    return (\n        \u003cdiv\u003e\n            \u003cAddTask fetchTasks={fetchTasks} /\u003e\n            \u003cul\u003e\n                {tasks.map(task =\u003e (\n                    \u003cTask key={task._id} task={task} onDelete={handleDelete} onComplete={handleComplete} /\u003e\n                ))}\n            \u003c/ul\u003e\n        \u003c/div\u003e\n    );\n};\n\nexport default TaskList;\n```\n2.4 Task.js (Individual Task):\n```javascript\nimport React from 'react';\n\nconst Task = ({ task, onDelete, onComplete }) =\u003e {\n    return (\n        \u003cli style={{ textDecoration: task.completed ? 'line-through' : '' }}\u003e\n            {task.title}\n            \u003cbutton onClick={() =\u003e onComplete(task._id)}\u003e{task.completed ? 'Undo' : 'Complete'}\u003c/button\u003e\n            \u003cbutton onClick={() =\u003e onDelete(task._id)}\u003eDelete\u003c/button\u003e\n        \u003c/li\u003e\n    );\n};\n\nexport default Task;\n```\n2.5 AddTask.js (Add new tasks):\n```javascript\nimport React, { useState } from 'react';\nimport axios from 'axios';\n\nconst AddTask = ({ fetchTasks }) =\u003e {\n    const [title, setTitle] = useState('');\n\n    const handleSubmit = async (e) =\u003e {\n    e.preventDefault();\n    try {\n        // The URL should be /api/tasks\n        await axios.post('/api/tasks', { title });\n        setTitle('');\n        fetchTasks();\n    } catch (err) {\n        console.error('Error adding task:', err);\n    }\n};\n\n    return (\n        \u003cform onSubmit={handleSubmit}\u003e\n            \u003cinput\n                type=\"text\"\n                value={title}\n                onChange={(e) =\u003e setTitle(e.target.value)}\n                placeholder=\"New Task\"\n                required\n            /\u003e\n            \u003cbutton type=\"submit\"\u003eAdd Task\u003c/button\u003e\n        \u003c/form\u003e\n    );\n};\n\nexport default AddTask;\n```\n2.6 Render the TaskList component in your main App.js file:\n- Open `src/App.js`.\nReplace the default code with the following:\n```javascript\nimport React from 'react';\nimport TaskList from './components/TaskList';\n\nfunction App() {\n    return (\n        \u003cdiv className=\"App\"\u003e\n            \u003ch1\u003eTodo List\u003c/h1\u003e\n            \u003cTaskList /\u003e\n        \u003c/div\u003e\n    );\n}\n\nexport default App;\n```\n## 3. Connecting Frontend with Backend\n3.1 Proxy Setup in React:\nIn `frontend/package.json`, add a proxy to point to the backend:\n```json\n\"proxy\": \"http://localhost:5000\"\n```\nThis will ensure that requests from React (running on `localhost:3000`) are directed to the backend (`localhost:5000`).\n3.2 Run Backend and Frontend:\n- In one terminal, navigate to the `backend` folder and run:\n```bash\nnodemon server.js\n```\n- In another terminal, navigate to the `frontend` folder and run:\n```bash\nnpm start\n```\n## 4. Any Difficulty\n- Ensure Backend is Running\n  - Double-check that your backend server is running on http://localhost:5000. To confirm, you can check the console logs from the terminal where the backend is running. It should show something like Server running on port 5000.\n  - Use Postman or curl to manually send a POST request to http://localhost:5000/api/tasks and see if it returns the expected response.\n  - For example, you can send this POST request via Postman:\n  -   URL: http://localhost:5000/api/tasks\n  -   Method: POST\n  -   Body: JSON:\n```json\n{\n    \"title\": \"Sample Task\"\n}\n```\n- Check Proxy Configuration\n  - Make sure your React app's proxy is set up properly to forward requests to the backend. In the frontend's `package.json`, the `proxy` setting should be:\n```json\n\"proxy\": \"http://localhost:5000\"\n```\n  - This allows requests like `/api/tasks` from React to be forwarded to `http://localhost:5000/api/tasks`.\n- Restart Both Servers\n  - Restart both the *backend* and *frontend* servers to ensure all changes are applied.\n  - For the `backend`, run:\n```bash\nnodemon server.js\n```\n  - For the `frontend`, navigate to frontend and run:\n```bash\nnpm start\n```\n## Contributions and Feedback\n\nWe welcome any contributions to this project! If you have ideas for new features or improvements, please feel free to send a request or open an issue.\n\nIf you encounter any problems or have questions, don’t hesitate to add them in the **Discussion** section. Your feedback is greatly appreciated!\n\nThank you for being part of this project!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdatabytesun%2Ftask-tracker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdatabytesun%2Ftask-tracker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdatabytesun%2Ftask-tracker/lists"}