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.
- π 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
.
βββ 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 | 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 |
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
- 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
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 |
... |
- β³ Add submission image preview modal
- π Drag-and-drop file/image upload support
- βοΈ In-app notifications for task assignments and decisions
- π Multi-language support (i18n)
- π¨βπ» Mert Duyar β Fullstack Developer & Project Owner
GitHub: @thejaxen
This project is licensed under the MIT License. See LICENSE
for details.