A full-stack Task Manager application with a React web client, Node.js/Express backend, MongoDB database, and a React Native Android mobile app.
The application allows users to create, view, edit, delete, search, filter, sort, and track the progress of their tasks. The web application and backend are deployed, while the Android application can be installed directly using the APK.
- Web App:
https://task-manager-web-app-roan.vercel.app/ - Backend API:
https://task-manager-web-app-nfi6.onrender.com
The project also includes a React Native Android application located inside the app/ directory.
The mobile application uses the same REST API and MongoDB backend as the web application.
- React Native
- TypeScript
- Axios
- REST API
- Android
The Android APK is available from the project's GitHub Releases.
After downloading the APK:
- Download the
.apkfile on your Android phone. - Open the downloaded APK.
- If Android asks for permission to install apps from that source, allow it.
- Install the application.
- Open Task Manager and start managing your tasks.
The APK connects to the deployed backend API, so the application can communicate with the server even when your phone is not connected to your development computer.
-
Create new tasks
-
View all tasks
-
Edit existing tasks
-
Delete tasks
-
Toggle task completion
-
Search tasks by title
-
Filter tasks by status
-
Filter tasks by priority
-
Filter tasks by due date
-
Sort tasks
-
Track task completion progress
-
Due date support
-
Priority levels:
- High
- Medium
- Low
-
REST API integration
-
MongoDB database integration
- Responsive UI
- React + Vite
- Tailwind CSS
- Axios
- React Hooks
- Custom Hooks
- Loading/skeleton state
- Search and filtering
- Sorting
- Progress bar
- Task creation/editing modal
- React Native
- TypeScript
- Native Android application
- API integration with the existing backend
- Mobile-friendly UI
- Task CRUD functionality
- Search, filtering, and sorting
- Task completion
- Task creation/editing modal
- Native date picker
- React
- Vite
- Tailwind CSS
- Axios
- React Hooks
- React Native
- TypeScript
- Axios
- React Native StyleSheet
- Node.js
- Express.js
- MongoDB
- Mongoose
- CORS
- dotenv
- Vercel — Web frontend
- Render — Backend API
- MongoDB Atlas — Database
- GitHub Releases — Android APK distribution
task-manager/
│
├── client/
│ ├── src/
│ │ ├── components/
│ │ │ ├── Navbar/
│ │ │ ├── Toolbar/
│ │ │ ├── Filters/
│ │ │ ├── Progress/
│ │ │ ├── TaskList/
│ │ │ ├── TaskCard/
│ │ │ ├── TaskModal/
│ │ │ └── TaskSkeleton/
│ │ │
│ │ ├── hooks/
│ │ │ ├── useTasks/
│ │ │ └── useFilteredTasks/
│ │ │
│ │ ├── pages/
│ │ │ └── Home.jsx
│ │ │
│ │ ├── services/
│ │ │ ├── api.js
│ │ │ └── taskService.js
│ │ │
│ │ ├── App.jsx
│ │ └── main.jsx
│ │
│ └── package.json
│
├── server/
│ ├── config/
│ ├── controllers/
│ ├── models/
│ ├── routes/
│ ├── app.js
│ ├── server.js
│ └── package.json
│
├── app/
│ ├── android/
│ ├── ios/
│ ├── src/
│ │ ├── components/
│ │ ├── screens/
│ │ ├── services/
│ │ └── types/
│ ├── App.tsx
│ ├── package.json
│ └── tsconfig.json
│
├── releases/
│ └── task-manager-v1.apk
│
└── README.md
git clone https://github.com/jdcodebase/task-manager.gitMove into the project directory:
cd task-managerNavigate to the server folder:
cd serverInstall dependencies:
npm installCreate a .env file:
PORT=8000
MONGO_URI=your_mongodb_connection_string
CLIENT_URL=http://localhost:5173Start the backend server:
npm run devThe API will run locally on:
http://localhost:8000
Open a new terminal and navigate to the client folder:
cd clientInstall dependencies:
npm installStart the frontend:
npm run devThe web application will normally be available at:
http://localhost:5173
Navigate to the mobile application:
cd appInstall dependencies:
npm installStart Metro:
npm startOpen another terminal and run:
npm run androidThe React Native project is intentionally kept in TypeScript because the project was created with App.tsx and tsconfig.json.
From the app directory, build the Android release APK using the React Native Android Gradle project.
The generated APK will be located under:
app/android/app/build/outputs/apk/release/
The final distributed APK is:
releases/task-manager-v1.apk
Before creating an APK for other users, make sure the mobile application is configured to use the deployed backend API:
https://task-manager-web-app-nfi6.onrender.com
Do not use:
http://localhost:5000
for the distributed APK.
localhost on a user's phone refers to the phone itself, not your development computer.
The release APK can be distributed through GitHub Releases.
Recommended workflow:
- Build the Android release APK.
- Create a new GitHub Release.
- Add a version such as
v1.0.0. - Upload
task-manager-v1.apkas a release asset. - Publish the release.
- Link the release/download page from the README.
This keeps the Android release separate from the normal source-code workflow while making the APK easy to access.
| Method | Endpoint | Description |
|---|---|---|
| GET | /tasks |
Get all tasks |
| POST | /tasks |
Create a task |
| PUT | /tasks/:id |
Update a task |
| PATCH | /tasks/:id/toggle |
Toggle task status |
| DELETE | /tasks/:id |
Delete a task |
The backend implements the complete task CRUD flow along with task completion toggling, validation, and error handling.
┌─────────────────────┐
│ React Web App │
│ client/ │
└──────────┬──────────┘
│
│ REST API
▼
┌─────────────────────┐
│ Express Backend │
│ server/ │
└──────────┬──────────┘
│
│ Mongoose
▼
┌─────────────────────┐
│ MongoDB Atlas │
└─────────────────────┘
▲
│
│ REST API
┌──────────┴──────────┐
│ React Native App │
│ app/ │
└─────────────────────┘
Both the web application and Android application communicate with the same backend API and database.
The Android release contains the React Native version of the Task Manager application.
Release: task-manager-v1.0.0
APK: releases/task-manager-v1.apk
Jatin Dhamija
GitHub: https://github.com/jdcodebase
LinkedIn: https://www.linkedin.com/in/jatindhamija/
If you found this project helpful, consider giving it a ⭐ Star on GitHub.