✨ StrayDog Todo List Application

A sophisticated, full-stack todo list application featuring a stunning black and gold theme, modern animations, and a responsive design. Built with React, Node.js, and MongoDB, this application allows users to manage their tasks efficiently with features like task creation, filtering, and sorting.

Table of Contents

📋 Table of Contents

• ✨ StrayDog Todo List Application
  • Table of Contents
  • 📋 Table of Contents
  • Key Features
  • 🌟 Key Features
  • 📁 Project Structure
  • 🚀 Live Demo
  • 🛠️ Technologies Used
    • Frontend
    • Backend
  • 📦 Installation & Setup
    • Prerequisites
    • Backend Setup
    • Backend Configuration
    • Frontend Setup
  • 📱 Screenshots
    • Application Overview
    • Task Management Interface
    • Task Creation Form
    • Task Filtering and Sorting
  • 🔄 API Endpoints
  • 🎯 Future Enhancements
  • 🤝 Contributing
  • 📄 License
  • 🙏 Acknowledgments
  • 📞 Contact

Key Features

🌟 Key Features

• Elegant UI Design

  • Modern black and gold theme with gradient effects
  • Smooth animations and transitions
  • Responsive layout for all devices
  • Interactive hover effects and feedback

• Task Management

  • Create, read, update, and delete tasks
  • Priority levels with visual indicators
  • Category organization
  • Due date scheduling
  • Task completion tracking

• Advanced Filtering & Sorting

  • Real-time search functionality
  • Filter by category and priority
  • Multiple sorting options
  • Dynamic filter updates

• User Experience

  • Persistent user preferences
  • Intuitive interface
  • Loading states and animations
  • Error handling with visual feedback

📁 Project Structure

├── backend/
│   ├── config/
│   │   └── db.js
│   ├── controllers/
│   │   └── taskController.js
│   ├── models/
│   │   └── task.js
│   ├── routes/
│   │   └── api.js
│   ├── utils/
│   │   └── logger.js
│   └── server.js
│   ├── .env
│   ├── package.json
│
├── frontend/
│   ├── src/
│   │   ├── components/
│   │   │   ├── Task/
│   │   │   │   ├── TaskForm.jsx
│   │   │   │   ├── TaskItem.jsx
│   │   │   │   └── TaskList.jsx
│   │   │   ├── Filter/
│   │   │   │   └── FilterBar.jsx
│   │   │   ├── Layout/
│   │   │   │   └── Footer.jsx
│   │   │   └── Header/
│   │   │       └── Header.jsx
│   │   ├── hooks/
│   │   │   ├── useDebounce.js
│   │   │   └── useLocalStorage.js
│   │   ├── services/
│   │   │   └── taskService.js
│   │   ├── styles/
│   │   │   ├── components/
│   │   │   │   ├── Task.css
│   │   │   │   ├── Filter.css
│   │   │   │   ├── Layout.css
│   │   │   │   └── Header.css
│   │   │   └── index.css
│   │   ├── utils/
│   │   │   └── api.js
│   │   ├── App.jsx
│   │   ├── index.jsx
│   │   ├── setupTests.js
│   │   └── tests/
│   │       └── setupTests.js
│   ├── public/
│   │   ├── index.html
│   │   └── manifest.json
│   ├── .env
│   ├── package.json
│   ├── tailwind.config.js
│   ├── postcss.config.js
│
├── .gitignore
└── README.md

🚀 Live Demo

View Live Demo

🛠️ Technologies Used

Frontend

• React - UI library
• JavaScript - Programming language
• Tailwind CSS - Styling and animations
• Axios - API requests
• React Icons - Icon library
• React Router - For routing

Backend

• Node.js - Runtime environment
• Express - Web framework
• JavaScript - Programming language
• MongoDB - Database
• Mongoose - ODM
• JWT - Authentication
• Cors - For handling cross-origin requests

📦 Installation & Setup

Prerequisites

• Node.js (v14 or higher)
• MongoDB (v4.4 or higher)
• npm or yarn package manager

Backend Setup

Backend Configuration

1. Clone the repository:

   git clone https://github.com/StrayDogSyn/To-Do-LIst-Cursor-Version.git
   cd full-stack-ToDoList-Hunter
   

2. Install backend dependencies:

   cd backend
   npm install
   

3. Create a .env file in the backend directory with the following content:

   MONGODB_URI=mongodb://<username>:<password>@<host>:<port>/<database>?retryWrites=true&w=majority
   PORT=5001
   

4. Start the server:

   npm run dev
   

Frontend Setup

1. Install frontend dependencies:

   cd frontend
   npm install
   

2. Create a .env file:

   REACT_APP_API_URL=http://localhost:5001
   

3. Start the development server:

   npm start
   

📱 Screenshots

Application Overview

Task Management Interface

Task Creation Form

Task Filtering and Sorting

🔄 API Endpoints

• GET /api/tasks - Get all tasks
• POST /api/tasks - Create a new task
• PUT /api/tasks/:id - Update a task
• DELETE /api/tasks/:id - Delete a task
• GET /api/tasks/filter - Get filtered tasks

🎯 Future Enhancements

• User authentication and profiles
• Task sharing and collaboration
• Dark/Light theme toggle
• Task analytics and insights
• Mobile app version

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Design inspiration from modern UI/UX trends
• Icons from React Icons
• Animation ideas from Tailwind CSS

📞 Contact

• LinkedIn: Eric Petross
• GitHub: StrayDogSyn
• Email: eric.petross@gmail.com