A full-stack MERN (MongoDB, Express.js, React, Node.js) application for tracking and managing issues/bugs with user authentication and authorization.

• Features
• Demo Screenshots
• Live Demo
• Tech Stack
• Prerequisites
• Installation
• Configuration
• Usage
• Deployment
• API Endpoints
• Project Structure
• Contributing
• License

• User registration and login with JWT tokens
• Protected routes for authenticated users
• Role-based access control (Admin/User)
• Automatic token validation and refresh

• Create, read, update, and delete issues
• Issue prioritization (High, Medium, Low)
• Issue status tracking (Open, In Progress, Closed)
• Detailed issue descriptions and timestamps
• User ownership and permission-based editing

• Responsive design with Tailwind CSS
• Clean and intuitive user interface
• Real-time feedback and loading states
• Search and filter capabilities
• Mobile-friendly design

User login with email and password validation

New user registration with form validation

Main dashboard showing all issues with search and filter options

Detailed view of individual issue

Form to create new issues

Form to update existing issues

Note: Screenshots are located in the screenshots/ folder.

The application is successfully deployed and accessible online:

• Frontend (Vercel): https://issue-tracker-ivory-omega.vercel.app
• Backend API (Railway): https://issue-tracker-production-87cf.up.railway.app

• ✅ Frontend: Successfully deployed on Vercel
• ✅ Backend: Successfully deployed on Railway
• ✅ Database: MongoDB Atlas (Cloud)

• React 19.1.0 - User interface library
• React Router DOM 7.7.0 - Client-side routing
• Axios 1.11.0 - HTTP client for API requests
• Tailwind CSS 4.1.11 - Utility-first CSS framework
• Lucide React 0.525.0 - Beautiful icon library
• Vite - Fast build tool and development server

• Node.js - JavaScript runtime
• Express.js 5.1.0 - Web application framework
• MongoDB - NoSQL database
• Mongoose 8.16.4 - MongoDB object modeling
• JWT (jsonwebtoken 9.0.2) - Authentication tokens
• bcryptjs 3.0.2 - Password hashing
• CORS 2.8.5 - Cross-origin resource sharing

Before running this application, make sure you have the following installed:

• Node.js (v16 or higher) - Download here
• MongoDB - Download here or use MongoDB Atlas
• Git - Download here
• npm or yarn package manager

git clone https://github.com/SajiniWeerasinghe/Issue-Tracker.git
cd Issue-Tracker

cd server
npm install

cd ../frontend
npm install

1. Create a .env file in the server directory:

cd server
touch .env

2. Add the following environment variables to the .env file:

# Database Configuration
MONGODB_URI=mongodb://localhost:27017/issue-tracker
# For MongoDB Atlas: mongodb+srv://<username>:<password>@<cluster>.mongodb.net/issue-tracker
# JWT Configuration
JWT_SECRET=your-super-secret-jwt-key-here
JWT_EXPIRES_IN=7d

# Server Configuration
PORT=5000
NODE_ENV=development

# CORS Configuration
CLIENT_URL=http://localhost:5173

The frontend is configured to connect to the backend at http://localhost:5000. If you need to change this:

1. Update the API base URL in the frontend authentication context and components
2. The default Vite development server runs on http://localhost:5173

1. Start the Backend Server:

cd server
npm run dev

The server will start on http://localhost:5000 with nodemon for auto-restart.

2. Start the Frontend Development Server:

cd frontend
npm run dev

The frontend will start on http://localhost:5173.

3. Access the Application:

Open your browser and navigate to http://localhost:5173

1. When you first access the application, you'll be redirected to the login page
2. Click "Create an account" to register a new user
3. After registration/login, you'll be redirected to the issue list
4. Click "Create Issue" to add first issue

This application has been successfully deployed using modern cloud platforms:

• Platform: Vercel
• Build Command: npm run build
• Output Directory: dist
• Environment Variables: None required (API URL configured)

• Platform: Railway
• Start Command: npm start
• Environment Variables:
  • MONGO_URI - MongoDB Atlas connection string
  • JWT_SECRET - JWT signing secret
  • PORT - Auto-assigned by Railway
  • NODE_ENV=production

• MongoDB Atlas - Cloud-hosted MongoDB database
• Configured for production with proper connection pooling
• Secured with IP whitelisting and authentication

• ✅ Automatic deployments on push to main branch
• ✅ HTTPS enabled for both frontend and backend
• ✅ Environment-specific configurations
• ✅ CORS properly configured for cross-origin requests
• ✅ Production-optimized builds

All API endpoints have been tested using Postman for proper functionality, authentication, and error handling.

Base URL: http://localhost:5000/api

Authentication:

POST /auth/register
POST /auth/login
GET /auth/profile (Protected)

Issues:

GET /issues
POST /issues (Protected)
PUT /issues/:id (Protected)
DELETE /issues/:id (Owner/Admin only)

Issue-Tracker/
├── frontend/                 # React frontend application
│   ├── public/              # Static assets
│   ├── src/
│   │   ├── components/      # React components
│   │   │   ├── IssueList.jsx
│   │   │   ├── IssueDetails.jsx
│   │   │   ├── IssueCreate.jsx
│   │   │   ├── IssueEdit.jsx
│   │   │   ├── Login.jsx
│   │   │   ├── Register.jsx
│   │   │   ├── Navbar.jsx
│   │   │   └── ProtectedRoute.jsx
│   │   ├── context/         # React Context providers
│   │   │   └── AuthContext.jsx
│   │   ├── assets/          # Images and icons
│   │   ├── App.jsx          # Main App component
│   │   ├── main.jsx         # Entry point
│   │   └── index.css        # Global styles
│   ├── package.json         # Frontend dependencies
│   └── vite.config.js       # Vite configuration
├── server/                  # Express backend application
│   ├── models/              # Mongoose models
│   │   ├── Issue.js
│   │   └── User.js
│   ├── routes/              # API routes
│   │   ├── issues.js
│   │   └── auth.js
│   ├── middleware/          # Custom middleware
│   │   └── auth.js
│   ├── server.js            # Main server file
│   └── package.json         # Backend dependencies
└── README.md               # Project documentation

1. Registration/Login: Users register or login with email and password
2. JWT Token: Server returns a JWT token valid for 7 days
3. Token Storage: Frontend stores token in localStorage
4. Auto-Login: Token is automatically included in API requests
5. Route Protection: Protected routes redirect to login if no valid token
6. Auto-Logout: Invalid/expired tokens trigger automatic logout

• Any User: View issues, register, login
• Authenticated Users: Create issues, edit any issue
• Issue Owner/Admin: Delete issues (only their own or if admin)

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

• npm start - Start production server
• npm run dev - Start development server with nodemon

Sajini Weerasinghe

• GitHub: @SajiniWeerasinghe