Skip to content

README.md

Latest commit

 

History

History
317 lines (248 loc) · 11 KB

README.md

File metadata and controls

317 lines (248 loc) · 11 KB
Raw

React Native TypeScript Node.js MongoDB License

📋 TaskFlow

A cross-platform task management app built with React Native & Express.js

Stay productive with smart sorting, priority-based reminders, and a stunning dark UI.

Features • Tech Stack • Architecture • Getting Started • API Reference • Screenshots • Contributing

✨ Features

📱 Mobile App

  • User Authentication — Secure registration & login with JWT-based sessions
  • Full Task Management — Create, read, update, and delete tasks with real-time cloud sync
  • Smart Sort Algorithm — Weighted composite scoring using priority, deadline urgency, and recency
  • Advanced Filtering — Filter by priority (🔴 Urgent / 🟠 High / 🟡 Medium / 🟢 Low), category, and completion status
  • Task Categories — Organize tasks into General, Work, Personal, Health, Shopping, and Study
  • Priority-Based Recurring Reminders — Automatic notifications that repeat based on task priority:
    Priority Reminder Interval
    🚨 Urgent Every 60 min
    🔴 High Every 90 min
    🟡 Medium Every 120 min
    🟢 Low Every 180 min
  • Pull-to-Refresh — Swipe down to sync latest data from the cloud
  • Swipe-to-Delete — Intuitive gesture-based task deletion
  • Progress Tracking — Visual progress bar showing completed vs total tasks
  • Optimistic UI Updates — Instant feedback with background sync & automatic rollback on error
  • Motivational Quotes — Context-aware quotes delivered with reminders based on task category

🎨 Design

  • Dark Gradient Theme — Premium deep-space aesthetic with #0A0E21 → #1A1F3D gradients
  • Glassmorphism Cards — Frosted glass-style task cards with subtle borders
  • Animated FAB — Spring-animated floating action button with gradient fill
  • Color-Coded Priorities — Instant visual cues with priority-specific colors
  • Smooth Transitions — Polished modal animations and screen transitions

🔧 Backend

  • RESTful API — Clean, documented Express.js endpoints
  • JWT Authentication — Secure token-based auth with bcrypt password hashing (12 salt rounds)
  • MongoDB Atlas — Cloud-hosted NoSQL database with Mongoose ODM
  • Smart Sort (Server-side) — Weighted scoring algorithm: score = priority×3 + urgency×2 + recency×1
  • Input Validation — Comprehensive field validation with descriptive error messages
  • Health Check Endpoint — /api/health for uptime monitoring

🛠 Tech Stack

Frontend (Mobile)

Technology Purpose
React Native 0.84 Cross-platform mobile framework
TypeScript Type safety and developer experience
React Navigation Stack-based navigation
Axios HTTP client for API communication
Notifee Local push notifications & scheduling
AsyncStorage Persistent local storage for auth tokens
Linear Gradient Beautiful gradient backgrounds
Vector Icons Material Community Icons
Gesture Handler Swipe gestures for task actions
DateTimePicker Native date & time selectors

Backend

Technology Purpose
Node.js + Express REST API server
TypeScript Type-safe backend development
MongoDB + Mongoose Database & ODM
JWT (jsonwebtoken) Authentication tokens
bcryptjs Password hashing
CORS Cross-origin resource sharing
dotenv Environment variable management

🏗 Architecture

TaskFlow/
├── backend/                    # Express.js REST API
│   ├── src/
│   │   ├── middleware/
│   │   │   └── auth.ts         # JWT authentication middleware
│   │   ├── models/
│   │   │   ├── Task.ts         # Task schema (title, deadline, priority, category)
│   │   │   └── User.ts         # User schema with password hashing
│   │   ├── routes/
│   │   │   ├── auth.ts         # Register & Login endpoints
│   │   │   └── tasks.ts        # Task CRUD with smart sort algorithm
│   │   └── server.ts           # Express app entry point
│   ├── package.json
│   └── tsconfig.json
│
├── mobile/                     # React Native App
│   ├── src/
│   │   ├── api/                # Axios API client modules
│   │   ├── components/         # Reusable UI components
│   │   │   ├── Button.tsx      # Gradient action button
│   │   │   ├── CategoryTag.tsx # Category label badge
│   │   │   ├── InputField.tsx  # Styled text input with icons
│   │   │   ├── PriorityBadge.tsx # Color-coded priority indicator
│   │   │   └── TaskCard.tsx    # Glass-style task card with gestures
│   │   ├── context/
│   │   │   └── AuthContext.tsx  # Global auth state management
│   │   ├── navigation/
│   │   │   └── AppNavigator.tsx # Stack navigator (Auth ↔ App)
│   │   ├── screens/
│   │   │   ├── LoginScreen.tsx
│   │   │   ├── RegisterScreen.tsx
│   │   │   ├── TaskListScreen.tsx  # Main dashboard
│   │   │   └── AddTaskScreen.tsx   # Task creation form
│   │   ├── services/
│   │   │   └── notificationService.ts # Recurring reminder engine
│   │   ├── theme/
│   │   │   └── index.ts        # Design tokens & color system
│   │   └── types/              # TypeScript type definitions
│   ├── App.tsx                 # App entry point
│   └── package.json
│
├── .gitignore
└── README.md

🚀 Getting Started

Prerequisites

  • Node.js ≥ 22.11.0
  • npm or yarn
  • Android Studio (for Android emulator/build)
  • MongoDB Atlas account (or local MongoDB instance)
  • JDK 17+ (for React Native Android builds)

1️⃣ Clone the Repository

git clone https://github.com/Krish6115/TaskFlow.git
cd TaskFlow

2️⃣ Backend Setup

cd backend
npm install

Create a .env file in the backend/ directory:

PORT=5000
MONGO_URI=mongodb+srv://<username>:<password>@<cluster>.mongodb.net/taskflow
JWT_SECRET=your_super_secret_jwt_key

Start the development server:

npm run dev

The API will be running at http://localhost:5000.

3️⃣ Mobile App Setup

cd mobile
npm install

Configure the API base URL in src/api/ to point to your backend:

  • Emulator: http://10.0.2.2:5000/api (Android emulator)
  • Physical device: http://<your-local-ip>:5000/api
  • Production: Your deployed API URL (e.g., Render.com)

Start Metro bundler and run on Android:

npm start
# In a new terminal:
npm run android

4️⃣ Build Release APK

cd mobile/android
./gradlew assembleRelease

The APK will be generated at mobile/android/app/build/outputs/apk/release/.

📡 API Reference

All task endpoints require a valid JWT token in the Authorization header:

Authorization: Bearer <token>

Authentication

Method Endpoint Description Body
POST /api/auth/register Create a new account { name, email, password }
POST /api/auth/login Login & receive JWT token { email, password }

Tasks (Protected)

Method Endpoint Description
GET /api/tasks List all tasks (with sort & filter)
POST /api/tasks Create a new task
PUT /api/tasks/:id Update a task
DELETE /api/tasks/:id Delete a task

Query Parameters (GET /api/tasks)

Parameter Values Description
sortBy mixed · priority · deadline · dateTime Sort algorithm (default: mixed)
filterPriority urgent · high · medium · low Filter by priority level
filterCategory General · Work · Personal · Health · Shopping · Study Filter by category
filterCompleted true · false Filter by completion status

Health Check

Method Endpoint Description
GET /api/health Returns { status: "OK", timestamp }

🎯 Smart Sort Algorithm

The Mixed Sort mode uses a weighted scoring system to intelligently rank tasks:

score = (priorityWeight × 3) + (deadlineUrgency × 2) + (recency × 1)
Factor Weight Score Range Logic
Priority ×3 1–4 urgent=4, high=3, medium=2, low=1
Deadline Urgency ×2 0–4 Higher for tasks due sooner (normalized to 42h window)
Recency ×1 0–1 Newer tasks score slightly higher

Completed tasks are always pushed to the bottom, regardless of score.

🤝 Contributing

Contributions are welcome! Here's how to get started:

  1. Fork the repository
  2. Create a feature branch: git checkout -b feature/amazing-feature
  3. Commit your changes: git commit -m 'feat: add amazing feature'
  4. Push to the branch: git push origin feature/amazing-feature
  5. Open a Pull Request

Commit Convention

This project follows Conventional Commits:

  • feat: — New features
  • fix: — Bug fixes
  • docs: — Documentation changes
  • style: — Code style / formatting
  • refactor: — Code refactoring
  • test: — Adding tests
  • chore: — Maintenance tasks

📄 License

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

👨‍💻 Author

Siva Rama Krishna Reddy Padala (SRKREDDY)

LinkedIn GitHub

Built with ❤️ using React Native & Express.js