🐾 StrayDog Todo List Application

A Modern Full-Stack Task Management Solution

🛠️ Technology Stack

📋 Table of Contents

🎯 Overview
✨ Key Features
🏗️ Architecture
📸 Screenshots
🚀 Quick Start
⚙️ Installation
🌐 Deployment
📡 API Reference
🧪 Testing
👥 Team
🔮 Roadmap
🤝 Contributing
📫 Contact
📄 License
📚 Documentation

🎯 Overview

A sleek, production-ready full-stack todo list application featuring a modern interface powered by React, Node.js, and MongoDB. Built with enterprise-grade practices, comprehensive testing, and optimized for performance, this application demonstrates professional development standards and clean architecture principles.

Perfect for portfolio demonstrations and real-world task management needs.

📚 Comprehensive Documentation: All deployment guides, migration details, and tutorials are available in the /docs folder.

✨ Key Features

🎨 Modern Task Management

Intuitive Interface - Clean, responsive design that works flawlessly across all devices
Real-Time Updates - Instant synchronization with MongoDB backend
Smart Filtering - Efficiently organize and filter tasks by status
Responsive Design - Mobile-first approach with Tailwind CSS

🔧 Technical Excellence

Full TypeScript Support - Type-safe code with comprehensive type definitions
Comprehensive Testing - Jest test suites for frontend and backend
RESTful API - Well-structured Express.js endpoints
Error Handling - Robust middleware for error management and logging
Production Ready - Optimized build process and Netlify deployment configuration

🛡️ Quality Assurance

ESLint Integration - Consistent code quality standards
Automated Testing - Unit and integration test coverage
Request Logging - Detailed logging middleware for debugging
Environment Configuration - Secure environment variable management

🏗️ Architecture

┌─────────────────┐
│   React Client  │
│  (TailwindCSS)  │
└────────┬────────┘
         │ HTTP/REST
         │
┌────────▼────────┐
│  Express.js API │
│   (Node.js)     │
└────────┬────────┘
         │ Mongoose ODM
         │
┌────────▼────────┐
│   MongoDB Atlas │
│   (Database)    │
└─────────────────┘

Project Structure

/frontend - React application with modern hooks and functional components
/backend - Express.js server with TypeScript support
- /controllers - Request handlers and business logic
- /models - Mongoose schemas and data models
- /routes - API endpoint definitions
- /services - Business logic layer
- /middleware - Error handling and request logging
- /config - Database and environment configuration

📸 Screenshots

Application Interface

Clean, intuitive task management interface

Responsive design with real-time updates

🚀 Quick Start

Prerequisites

Node.js 18.x or higher
MongoDB Atlas account (or local MongoDB instance)
npm or yarn package manager

Environment Variables

Create a .env file in the backend directory:

MONGODB_URI=your_mongodb_connection_string
PORT=5000
NODE_ENV=development

⚙️ Installation

Option 1: Automated Setup (Recommended)

# Clone the repository
git clone https://github.com/StrayDogSyn/full-stack-ToDoList-Hunter.git
cd full-stack-ToDoList-Hunter

# Install all dependencies (frontend + backend)
npm run install:all

# Start development servers
npm run start:backend   # Terminal 1 - API server (port 5000)
npm run start:frontend  # Terminal 2 - React app (port 3000)

Option 2: Manual Setup

Backend Setup:

cd backend
npm install
npm run dev

Frontend Setup:

cd frontend
npm install
npm start

Accessing the Application

Frontend: http://localhost:3000
Backend API: http://localhost:5000

🌐 Deployment

Vercel Deployment (Production)

This application is configured for seamless Vercel Pro deployment with the included vercel.json configuration.

Automatic Deployment (Recommended)

Connect Repository to Vercel
- Log in to Vercel
- Click "Add New..." → "Project"
- Import your GitHub repository
Configure Build Settings (Auto-detected from vercel.json)
- Framework Preset: Create React App
- Root Directory: ./
- Build Command: cd frontend && npm install && npm run build
- Output Directory: frontend/build
- Install Command: npm install
- Node.js Version: 18.x (automatically detected)
Set Environment Variables
- Go to Project Settings → Environment Variables
- Add REACT_APP_API_URL with your backend URL
- Configure any additional environment variables
- Available for: Production, Preview, Development
Deploy
- Click "Deploy"
- Vercel automatically builds and deploys
- Get instant preview URLs for every commit
- Production deployment on main branch merges

Manual Deployment via Vercel CLI

# Install Vercel CLI
npm install -g vercel

# Login to Vercel
vercel login

# Deploy to preview
vercel

# Deploy to production
vercel --prod

Vercel Pro Features

Edge Network: Global CDN with 300+ edge locations
Analytics: Real-time performance insights
Password Protection: Secure preview deployments
Custom Domains: Multiple custom domains support
Team Collaboration: Share projects with team members
Priority Support: 24/7 enterprise support

Backend Deployment Options

Deploy the backend API to complement your Vercel frontend:

Option 1: Vercel Serverless Functions (Recommended)

Convert Express routes to Vercel serverless functions
Deploy backend in the same repository
Automatic scaling and edge deployment

Option 2: External Backend Services

Railway: Easy Node.js deployment with free tier
Render: Managed Node.js hosting
Fly.io: Global application deployment
AWS Lambda: Serverless backend deployment
Heroku: Traditional PaaS solution

📡 API Reference

Base URL

Development: http://localhost:5000
Production: https://your-backend-url.com

Endpoints

Method	Endpoint	Description	Request Body
`GET`	`/api/tasks`	Retrieve all tasks	-
`GET`	`/api/tasks/:id`	Retrieve specific task	-
`POST`	`/api/tasks`	Create new task	`{ title: string, completed: boolean }`
`PUT`	`/api/tasks/:id`	Update task	`{ title?: string, completed?: boolean }`
`DELETE`	`/api/tasks/:id`	Delete task	-

Example Request

# Create a new task
curl -X POST http://localhost:5000/api/tasks \
  -H "Content-Type: application/json" \
  -d '{"title": "Complete project", "completed": false}'

Response Format

{
  "success": true,
  "data": {
    "_id": "507f1f77bcf86cd799439011",
    "title": "Complete project",
    "completed": false,
    "createdAt": "2025-10-26T12:00:00.000Z",
    "updatedAt": "2025-10-26T12:00:00.000Z"
  }
}

🧪 Testing

Run All Tests

# Frontend tests
npm run test:frontend

# Backend tests
npm run test:backend

# Backend tests with coverage
cd backend
npm run test:coverage

Linting

# Lint frontend code
npm run lint:frontend

# Lint backend code
npm run lint:backend

# Auto-fix linting issues
cd backend && npm run lint:fix

👥 Team

Lead Developer

StrayDog Syndicate - Full-Stack Development

Collaborators

Special thanks to our collaborators from The Last Mile Remote Instruction Team:

Terrell D. Lemons - Technical Guidance
Karly Stark - Code Review & Best Practices
Mark Velasquez - Architecture Consultation
Natasha Towle - QA & Testing Support
Nichole Harrison - Documentation Review
Patrick Mikes - DevOps Guidance

🔮 Roadmap

Phase 1: Core Enhancements (Q4 2025)

User authentication & authorization (JWT)
Task categories and tags
Priority levels for tasks
Due dates and reminders

Phase 2: Advanced Features (Q1 2026)

Dark mode / Theme customization
Task search and advanced filtering
Task sharing and collaboration
File attachments for tasks

Phase 3: Platform Expansion (Q2 2026)

Progressive Web App (PWA) support
Mobile app (React Native)
Desktop app (Electron)
Real-time collaboration features

Phase 4: Integration & Analytics (Q3 2026)

Calendar integration
Third-party app integrations (Slack, Discord)
Analytics dashboard
Export functionality (CSV, PDF)

🤝 Contributing

Contributions are welcome and appreciated! Here's how you can contribute:

Getting Started

Fork the repository
Create a feature branch
```
git checkout -b feature/AmazingFeature
```
Commit your changes
```
git commit -m 'Add some AmazingFeature'
```
Push to the branch
```
git push origin feature/AmazingFeature
```
Open a Pull Request

Guidelines

Follow the existing code style
Write meaningful commit messages
Add tests for new features
Update documentation as needed
Ensure all tests pass before submitting

Code of Conduct

Please be respectful and constructive in all interactions. We're here to build something great together.

📫 Contact

Get in Touch

Questions? Feedback? Opportunities?

Feel free to reach out for collaboration, bug reports, or just to say hello!

📄 License

Copyright © 2025 StrayDog Syndicate. All rights reserved.

This software is proprietary and confidential. Unauthorized copying,
distribution, or use of this software, via any medium, is strictly
prohibited without express written permission from the copyright holder.

For licensing inquiries: straydogsyndicationsllc@gmail.com

📚 Documentation

Complete documentation is available in the /docs folder:

Quick Links

📖 Documentation Index - Complete guide to all documentation
⚡ Quick Start - Deploy in 5 minutes
✅ Action Items - Deployment checklist
🚀 Full Deployment Guide - Comprehensive Vercel guide
🏷️ Badge Updates - Update URLs after deployment
🔄 Migration Summary - Netlify to Vercel changes

Need Help?

Visit the /docs folder for detailed guides on:

Deploying to Vercel Pro
Configuring environment variables
Setting up custom domains
Troubleshooting common issues
Backend deployment options
Performance optimization

⭐ Star this repository if you find it helpful!

Made with ❤️ by StrayDog Syndicate

Name		Name	Last commit message	Last commit date
Latest commit History 82 Commits
.vscode		.vscode
Project		Project
Python		Python
StrayDogSyndicate		StrayDogSyndicate
backend		backend
docs		docs
frontend		frontend
mongosh-2.3.8-win32-x64		mongosh-2.3.8-win32-x64
repos/Capstone_Tech_Pathways/weather_dashboard_Final_Eric_Hunter		repos/Capstone_Tech_Pathways/weather_dashboard_Final_Eric_Hunter
scripts		scripts
.gitignore		.gitignore
.gitmodules		.gitmodules
QUICKSTART.md		QUICKSTART.md
README.md		README.md
netlify.toml		netlify.toml
package-lock.json		package-lock.json
package.json		package.json
vercel.json		vercel.json

Folders and files

Latest commit

History

Repository files navigation