ManagMe is a simple Kanban-style project management tool built with React and TypeScript.
The app allows users to create projects, define user stories, and manage tasks in a clear and organized interface.
- Frontend: React, TypeScript, Vite, Tailwind CSS
- Backend: Node.js, Express.js
- Auth: JWT-based authentication (custom Express server)
- Testing: Playwright (basic setup)
- State Management: React Context API
- Project → Story → Task hierarchy
- Create, delete and manage tasks
- Manual login (with predefined roles)
- Google login (requires API key – see
.envsection) - Responsive design
- Dark and light theme (dark by default)
- Node.js (v18+)
- npm
npm install
cd backend && npm install
cd ../express && npm installnpm run install:allThis installs dependencies in all three folders.
Start the frontend:
npm run devStart the backend API:
cd backend
npm startStart the auth/token server:
cd express
npm run devnpm run start:allAll services must be running at the same time.
To enable Google login, create .env files in /express and /frontend with your Google OAuth credentials.
These files are not included in the repository.
Example:
VITE_GOOGLE_CLIENT_ID=your_client_id
GOOGLE_CLIENT_ID=your_client_id
GOOGLE_CLIENT_SECRET=your_client_secretYou can log in using these predefined users:
| Role | Login | Password |
|---|---|---|
| Admin | admin | zaq12wsx |
| Developer | developer | zaq12wsx |
| DevOps | devops | zaq12wsx |
| Guest | guest | zaq12wsx |
Basic E2E testing is set up with Playwright.
The tests cover:
- Logging in with predefined users
- Creating, displaying, editing, and deleting:
- Projects
- User stories
- Tasks
- Updating task status
- Assigning users to tasks
- Navigating between views and switching active projects
To run the tests:
npx playwright testTests check full user flow functionality, including form interactions, routing, and UI updates.
Full flow: login → project → story → tasks (add/edit/delete)
- Log in as admin
- Go to Projects and create a new project named
TestProject - Set the new project as active
- Add a new story with:
- Title:
TestStory - Description:
test - Priority:
medium - Status:
doing
- Title:
- Navigate to Tasks
- Add two new tasks:
- First task:
- Name:
First, description:test, duration:10
- Name:
- Second task:
- Name:
Second, description:test, duration:30, priority:high, assigned to user ID3
- Name:
- First task:
- Mark the first task as done
- Open task details and edit:
- Change name from
FirsttoThird - Change assigned user to ID
1
- Change name from
- Save changes
- Delete both tasks
- Navigate back to Projects
- Change the active project
- Set the previous project as active again
- Delete both projects
✅ This test checks all core flows: login, project management, story creation, task CRUD, status updates, user assignment and UI navigation.
This project was tested using Axe DevTools and Google Lighthouse to ensure high standards of accessibility and SEO:
- WCAG 2.1 AA compliance: 100%
- Accessibility score (Lighthouse): 100%
- SEO score (Lighthouse): 100%
- Best Practices score (Lighthouse): 78
Note: The lower Best Practices score is due to using Google OAuth for authentication, which uses third-party cookies. This is an expected limitation and does not affect the functionality or security of the application.
Login screen with manual and Google authentication.
Main dashboard showing projects and their structure.
Form for adding a new task.
Mobile version – board view.
Mobile version – nav view.
The app supports both dark and light modes.
Dark mode is the default and recommended.
Theme toggle button is available in the top-right corner of the interface.
├── / → Frontend (React)
├── /backend → Backend API (Express)
├── /express → Auth/JWT server (Google login + tokens)
├── /screenshots → Images used in README
├── /tests → Playwright test files
Created by Jakub Opyd, an IT student passionate about frontend development and building real-world apps with React and TypeScript.
GitHub: github.com/JakubOpydwsei
Email: jakubopyd@gmail.com
This project is open-source and free to use.