📝 To-Do App — ReactJS Project

Live Demo: www.todo-app.webstudiobydee.com

---

📌 Overview

This is a responsive and interactive To-Do List application built with ReactJS, designed to help users manage daily tasks with ease. It features task creation, completion toggling, and deletion. All wrapped in a clean, component-based architecture.

This project marks the beginning of my React journey, where I explored core concepts like state management, props, component composition, and dynamic rendering. It also served as my second deployment using Hostinger and first subdomain structuring.

---

🛠️ Tech Stack

• Frontend: ReactJS (Vite)
• Styling: CSS
• Build Tool: Vite (npm run build)
• Deployment: Hostinger (subdomain: todo-app.webstudiobydee.com)

---

🚀 Features

• ✅ Add new tasks
• ✅ Mark tasks as completed
• ✅ Delete tasks
• ✅ Component-based structure
• ✅ Responsive layout
• ✅ Side effects handled with useEffect

---

📁 Folder Structure

todo-app/
├── src/
│   ├── components/
│   │   ├── Header.jsx
│   │   ├── Tabs.jsx
│   │   ├── TodoCard.jsx
│   │   ├── TodoList.jsx
│   │   └── TodoInput.jsx
│   ├── App.jsx
│   ├── index.css
│   ├── fanta.css
│   └── main.jsx
├── public/
├── dist/ (build output for deployment)
├── index.html
├── package.json
├── vite.config.js
└── README.md

---

🌐 Deployment Notes

The app was deployed to a custom subdomain using Hostinger’s File Manager. The contents of the dist folder were uploaded to /public_html/todo-app, allowing the app to be accessed via:

www.todo-app.webstudiobydee.com

This structure supports future scalability, with each project hosted on its own subdomain.

---

🎯 What I Practiced

• Structuring a React project with reusable components
• Managing state with useState
• Handling side effects with useEffect
• Handling user input and dynamic rendering
• Building and deploying a static site with Vite
• Organising subdomains for scalable portfolio hosting

---

📦 Future Enhancements

• Add task due dates and reminder alerts
• Persist tasks using localStorage
• Convert to a Progressive Web App (PWA)
• Add notification support for pending tasks