Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/thomas465xd/uptask_frontend
The frontend for UpTask a project and task management app that lets you delegate task to a team or focus on your own projects
https://github.com/thomas465xd/uptask_frontend
api authentication frontend headlessui mern mern-stack mvc react react-query tailwind tailwindcss todoapp ts typescript zod zustand
Last synced: 7 days ago
JSON representation
The frontend for UpTask a project and task management app that lets you delegate task to a team or focus on your own projects
- Host: GitHub
- URL: https://github.com/thomas465xd/uptask_frontend
- Owner: Thomas465xd
- License: mit
- Created: 2024-11-24T15:25:41.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2025-01-22T14:40:06.000Z (16 days ago)
- Last Synced: 2025-01-31T10:15:41.433Z (7 days ago)
- Topics: api, authentication, frontend, headlessui, mern, mern-stack, mvc, react, react-query, tailwind, tailwindcss, todoapp, ts, typescript, zod, zustand
- Language: TypeScript
- Homepage: https://uptask-react-ts.vercel.app
- Size: 429 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# UpTask - To-Do List Web App
UpTask is a powerful project and task management web app built using the MERN stack (MongoDB, Express, React, Node.js). It allows users to create accounts, manage projects, assign tasks to team members, and track progress all in one place. The app features robust user authentication with JWT, a task delegation system for project managers, and more.
## Features
- **User Accounts & Authentication**: Users can sign up, log in, and manage their accounts with features like JWT authentication and a "Forgot Password" functionality.
- **Project Management**: Users can create and manage projects, assign roles and tasks to different members of the project team.
- **Task Delegation**: Project managers can delegate tasks to team members, track their progress, and ensure the successful completion of each task.
- **Team Collaboration**: Assign specific roles to each user and assign tasks based on their roles within the project.
- **Progress Tracking**: Track overall project progress by monitoring completed and pending tasks.
- **Headless UI Components**: A user-friendly interface with Headless UI components for a seamless, accessible experience.
- **RESTful API**: Connects to a backend RESTful API to manage projects, tasks, and user-related operations.
## Technologies Used
- **Frontend**:
- React
- React Router
- Headless UI
- Axios
- JWT Authentication
- **Backend** (for reference):
- Node.js
- Express
- MongoDB (MERN stack)
- JWT for Authentication
- **UI Framework**: TailwindCSS (with Headless UI components for accessibility)
## Installation
### Frontend Setup
1. Clone the repository:
```bash
git clone https://github.com/yourusername/uptask-frontend.git
cd uptask-frontend
```
2. Install dependencies:
```bash
npm install
```
3. Create a `.env` file in the root of the project and add the following:
```
REACT_APP_API_URL=
```
4. Run the app:
```bash
npm start
```
### Backend Setup
1. Clone the backend repository (if not already set up):
```bash
git clone https://github.com/Thomas465xd/uptask_backend.git
cd uptask-backend
```
2. Install backend dependencies:
```bash
npm install
```
3. Set up the MongoDB database connection and other environment variables in `.env`.
4. Start the backend server:
```bash
npm start
```
## Usage
1. **Sign Up**: Create a new user account by entering an email and password.
2. **Login**: Use your credentials to log in and access your account.
3. **Create Projects**: Project managers can create new projects and assign tasks.
4. **Assign Roles & Tasks**: Project managers can assign roles to team members and delegate tasks to them.
5. **Track Progress**: Monitor the overall progress of the project by checking task completion.
## Contributing
1. Fork the repository
2. Create your feature branch (`git checkout -b feature-name`)
3. Commit your changes (`git commit -am 'Add new feature'`)
4. Push to the branch (`git push origin feature-name`)
5. Open a pull request
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## Acknowledgments
- Headless UI for accessible components
- The MERN stack for full-stack web development
---
**Made with ♥️ Thomas Schrödinger**