Repository files navigation

A modern Kanban board application built with React, TypeScript, and Node.js that helps teams manage their tasks and projects efficiently.

• 📋 Interactive Kanban board with drag-and-drop functionality
• 🔐 Secure user authentication and authorization
• 👥 User profile management
• 📝 Issue tracking and management
• 🌓 Light/Dark theme support
• 📱 Responsive design for all devices

• React with TypeScript
• React Router for navigation
• React Query for data fetching
• Tailwind CSS for styling
• DND Kit for drag-and-drop functionality
• Radix UI for accessible components
• Zod for form validation

• Node.js with Express
• TypeScript
• MongoDB with Mongoose
• JWT for authentication
• bcrypt for password hashing

• Node.js (v14 or higher)
• MongoDB
• npm or yarn

1. Clone the repository

git clone https://github.com/yourusername/janban-app.gitcd janban-app

2. Set up environment variables

Create.env files in both frontend and backend directories:

Backend.env:

MONGO_DB_CONNECTION_STRING=your_mongodb_connection_stringJWT_SECRET=your_jwt_secretSERVER_PORT=8080FRONTEND_URL=http://localhost:5173

Frontend.env:

VITE_API_URL=http://localhost:8080/api

3. Install dependencies and start the application

Backend:

cd backendnpm installnpm run dev

Frontend:

cd frontendnpm installnpm run dev

janban-app/├── backend/                # Backend server code│   ├── src/│   │   ├── controllers/   # Request handlers│   │   ├── middleware/    # Custom middleware│   │   ├── models/        # Database models│   │   ├── routes/        # API routes│   │   └── index.ts       # Server entry point│   └── package.json├── frontend/              # Frontend client code│   ├── src/│   │   ├── api/          # API client functions│   │   ├── assets/       # Static assets│   │   ├── auth/         # Authentication logic│   │   ├── components/   # React components│   │   ├── contexts/     # React contexts│   │   ├── forms/        # Form components│   │   ├── layouts/      # Layout components│   │   ├── pages/        # Page components│   │   └── types/        # TypeScript types│   └── package.json└── README.md

• POST/api/auth/sign-in - Sign in user
• POST/api/auth/sign-out - Sign out user
• GET/api/auth/access-token - Refresh access token

• POST/api/user/register - Register new user
• GET/api/user/users - Get all users
• GET/api/user/profile - Get user profile
• PUT/api/user/profile - Update user profile

• POST/api/issues/create-issue - Create new issue
• GET/api/issues - Get all issues
• GET/api/issues/:issueCode - Get specific issue
• PUT/api/issues/:issueCode - Update issue
• DELETE/api/issues/:issueCode - Delete issue

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

This project is licensed under the ISC License.It is a hobby project and is not intended as a fully production-ready application.

This file was prepared using the Cascade feature in Windsurf, developed by Codeium.