Skip to content

thejaxen/Full-Stack-Task-Management-Frontend

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

32 Commits
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

🌐Internal Audit Frontend

A modern, responsive frontend application for internal task management and audit tracking. Built with React, Redux Toolkit, Material UI, and designed to communicate with a Spring Boot–based microservice backend.


πŸš€ Features

  • πŸ” JWT Authentication with login and registration
  • πŸ§‘β€πŸ’Ό Role-based views
  • πŸ“‹ Task creation, listing, filtering and editing
  • βœ… Task assignment and completion tracking
  • πŸ“¦ File/image upload references for submissions
  • πŸ’¬ Submission comments with admin decision handling
  • πŸ“Š Filtered task views via query parameters
  • βš™οΈ Dynamic UI components using modals and MUI Autocomplete
  • πŸŒ— Custom Material UI dark theme

πŸ“ Project Structure

.
β”œβ”€β”€ public/
β”œβ”€β”€ src/
β”‚   β”œβ”€β”€ api/                 # Axios config and auth header setup
β”‚   β”œβ”€β”€ components/
β”‚   β”œβ”€β”€ page/
β”‚   β”‚   β”œβ”€β”€ auth/            # Login & Registration logic
β”‚   β”‚   β”œβ”€β”€ home/            # Home layout with Sidebar + TaskList
β”‚   β”‚   β”œβ”€β”€ navbar/          # Top navigation bar
β”‚   β”œβ”€β”€ reduxtoolkit/        # Redux slices: Auth, Task, Submission
β”‚   β”œβ”€β”€ App.js               # Main application entry with routes
β”‚   └── index.js

πŸ›  Tech Stack

Tech Description
React Component-based UI library
Redux Toolkit State management for auth, task and submission modules
Material UI Component library for a professional UI
Axios HTTP client for API communication
Day.js Lightweight date/time picker integration
React Router DOM Routing and query parameter handling

πŸ§ͺ Local Development Setup

Prerequisites:

  • Node.js 18+
  • npm / yarn
  • Backend running on http://localhost:5000
# Clone the repository
git clone https://github.com/YOUR_USERNAME/kim-tech-audit-frontend.git

# Install dependencies
cd kim-tech-audit-frontend
npm install

# Run the application
npm start

πŸ” Authentication Flow

  • User logs in and receives a JWT token
  • JWT is stored in localStorage
  • Axios sets the Authorization header globally
  • Protected routes/components rely on Redux state and user role

🧩 API Integration

Endpoint Method Description
/auth/signIn POST User login
/auth/signUp POST User registration
/api/users/profile GET Fetch authenticated user data
/api/tasks/** CRUD Full task management
/api/submission/** CRUD Submission create & review
...

πŸ“Œ Future Improvements

  • ⏳ Add submission image preview modal
  • πŸ“ Drag-and-drop file/image upload support
  • βœ‰οΈ In-app notifications for task assignments and decisions
  • 🌍 Multi-language support (i18n)

🀝 Contributors

  • πŸ‘¨β€πŸ’» Mert Duyar – Fullstack Developer & Project Owner
    GitHub: @thejaxen

πŸ“„ License

This project is licensed under the MIT License. See LICENSE for details.

About

This repository is made for microservices written in spring boot for task management system.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published