From b6ec0fa6ce69ac799e29cce22b00b31429c962b4 Mon Sep 17 00:00:00 2001 From: Amal Roy Date: Wed, 10 Jun 2026 15:25:06 +0530 Subject: [PATCH] Add project management CRUD application --- README.md | 32 +- backend/package.json | 24 ++ backend/src/app.js | 18 + backend/src/controllers/projectController.js | 121 +++++++ backend/src/middleware/errorHandler.js | 9 + backend/src/middleware/validation.js | 103 ++++++ backend/src/routes/projects.js | 21 ++ backend/src/server.js | 8 + backend/src/store/inMemoryStore.js | 103 ++++++ backend/src/tests/projects.test.js | 232 +++++++++++++ documentation.md | 136 +++++++- frontend/.gitignore | 41 +++ frontend/AGENTS.md | 5 + frontend/CLAUDE.md | 1 + frontend/README.md | 36 ++ frontend/eslint.config.mjs | 16 + frontend/jsconfig.json | 7 + frontend/next.config.mjs | 6 + frontend/package.json | 23 ++ frontend/postcss.config.mjs | 7 + frontend/public/file.svg | 1 + frontend/public/globe.svg | 1 + frontend/public/next.svg | 1 + frontend/public/vercel.svg | 1 + frontend/public/window.svg | 1 + frontend/src/app/favicon.ico | Bin 0 -> 25931 bytes frontend/src/app/globals.css | 326 ++++++++++++++++++ frontend/src/app/layout.js | 35 ++ frontend/src/app/page.js | 345 +++++++++++++++++++ frontend/src/components/Pagination.jsx | 107 ++++++ frontend/src/components/ProjectCard.jsx | 85 +++++ frontend/src/components/ProjectForm.jsx | 216 ++++++++++++ frontend/src/components/ProjectList.jsx | 74 ++++ frontend/src/components/SoftAurora.css | 4 + frontend/src/components/SoftAurora.jsx | 266 ++++++++++++++ frontend/src/lib/api.js | 53 +++ 36 files changed, 2463 insertions(+), 2 deletions(-) create mode 100644 backend/package.json create mode 100644 backend/src/app.js create mode 100644 backend/src/controllers/projectController.js create mode 100644 backend/src/middleware/errorHandler.js create mode 100644 backend/src/middleware/validation.js create mode 100644 backend/src/routes/projects.js create mode 100644 backend/src/server.js create mode 100644 backend/src/store/inMemoryStore.js create mode 100644 backend/src/tests/projects.test.js create mode 100644 frontend/.gitignore create mode 100644 frontend/AGENTS.md create mode 100644 frontend/CLAUDE.md create mode 100644 frontend/README.md create mode 100644 frontend/eslint.config.mjs create mode 100644 frontend/jsconfig.json create mode 100644 frontend/next.config.mjs create mode 100644 frontend/package.json create mode 100644 frontend/postcss.config.mjs create mode 100644 frontend/public/file.svg create mode 100644 frontend/public/globe.svg create mode 100644 frontend/public/next.svg create mode 100644 frontend/public/vercel.svg create mode 100644 frontend/public/window.svg create mode 100644 frontend/src/app/favicon.ico create mode 100644 frontend/src/app/globals.css create mode 100644 frontend/src/app/layout.js create mode 100644 frontend/src/app/page.js create mode 100644 frontend/src/components/Pagination.jsx create mode 100644 frontend/src/components/ProjectCard.jsx create mode 100644 frontend/src/components/ProjectForm.jsx create mode 100644 frontend/src/components/ProjectList.jsx create mode 100644 frontend/src/components/SoftAurora.css create mode 100644 frontend/src/components/SoftAurora.jsx create mode 100644 frontend/src/lib/api.js diff --git a/README.md b/README.md index 40c8735..c954418 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,32 @@ # Shipyard-Interns -Tasks submission and template respository. +Tasks submission and template repository. + +## Task: Project Management CRUD Application + +Full-stack project management app built with **Next.js 14** (frontend) and **Express.js** (backend). + +### Quick Start + +**Backend:** +```bash +cd backend +npm install +echo "PORT=5000" > .env +npm run dev +``` + +**Frontend:** +```bash +cd frontend +npm install +echo "NEXT_PUBLIC_API_URL=http://localhost:5000/api" > .env.local +npm run dev +``` + +**Tests:** +```bash +cd backend +npm test +``` + +See [documentation.md](documentation.md) for full details. diff --git a/backend/package.json b/backend/package.json new file mode 100644 index 0000000..3a092bf --- /dev/null +++ b/backend/package.json @@ -0,0 +1,24 @@ +{ + "name": "project-management-api", + "version": "1.0.0", + "description": "Express.js REST API for project management", + "main": "src/server.js", + "scripts": { + "start": "node src/server.js", + "dev": "nodemon src/server.js", + "test": "jest --runInBand" + }, + "keywords": [], + "author": "", + "license": "ISC", + "dependencies": { + "cors": "^2.8.5", + "dotenv": "^16.4.5", + "express": "^4.21.0" + }, + "devDependencies": { + "jest": "^29.7.0", + "nodemon": "^3.1.4", + "supertest": "^7.0.0" + } +} diff --git a/backend/src/app.js b/backend/src/app.js new file mode 100644 index 0000000..177339b --- /dev/null +++ b/backend/src/app.js @@ -0,0 +1,18 @@ +const express = require('express'); +const cors = require('cors'); +const projectRoutes = require('./routes/projects'); +const errorHandler = require('./middleware/errorHandler'); + +const app = express(); + +// Core middleware +app.use(cors()); +app.use(express.json()); + +// Routes +app.use('/api/projects', projectRoutes); + +// Global error handler — must be registered last +app.use(errorHandler); + +module.exports = app; diff --git a/backend/src/controllers/projectController.js b/backend/src/controllers/projectController.js new file mode 100644 index 0000000..fe8c4bf --- /dev/null +++ b/backend/src/controllers/projectController.js @@ -0,0 +1,121 @@ +const store = require('../store/inMemoryStore'); + +const createProject = (req, res, next) => { + try { + const { name, description, ownerId, status } = req.body; + const project = store.create({ name, description, ownerId, status }); + res.status(201).json(project); + } catch (error) { + next(error); + } +}; + +const getAllProjects = (req, res, next) => { + try { + let { page, limit, status, search } = req.query; + + page = parseInt(page, 10) || 1; + limit = parseInt(limit, 10) || 10; + + // Enforce bounds + if (page < 1) page = 1; + if (limit < 1) limit = 1; + if (limit > 50) limit = 50; + + let filteredProjects = store.getAll(); + + // Filter by status if provided + if (status) { + filteredProjects = filteredProjects.filter( + (project) => project.status === status + ); + } + + // Search in name and description if provided + if (search) { + const searchLower = search.toLowerCase(); + filteredProjects = filteredProjects.filter( + (project) => + project.name.toLowerCase().includes(searchLower) || + project.description.toLowerCase().includes(searchLower) + ); + } + + const total = filteredProjects.length; + const totalPages = Math.ceil(total / limit); + const startIndex = (page - 1) * limit; + const paginatedProjects = filteredProjects.slice(startIndex, startIndex + limit); + + res.status(200).json({ + data: paginatedProjects, + total, + page, + limit, + totalPages, + }); + } catch (error) { + next(error); + } +}; + +const getProjectById = (req, res, next) => { + try { + const { id } = req.params; + const project = store.getById(id); + + if (!project) { + return res.status(404).json({ error: 'Project not found' }); + } + + res.status(200).json(project); + } catch (error) { + next(error); + } +}; + +const updateProject = (req, res, next) => { + try { + const { id } = req.params; + const existingProject = store.getById(id); + + if (!existingProject) { + return res.status(404).json({ error: 'Project not found' }); + } + + const { name, description, ownerId, status } = req.body; + const updateData = {}; + + if (name !== undefined) updateData.name = name; + if (description !== undefined) updateData.description = description; + if (ownerId !== undefined) updateData.ownerId = ownerId; + if (status !== undefined) updateData.status = status; + + const updatedProject = store.update(id, updateData); + res.status(200).json(updatedProject); + } catch (error) { + next(error); + } +}; + +const deleteProject = (req, res, next) => { + try { + const { id } = req.params; + const deleted = store.remove(id); + + if (!deleted) { + return res.status(404).json({ error: 'Project not found' }); + } + + res.status(200).json({ message: 'Project deleted successfully' }); + } catch (error) { + next(error); + } +}; + +module.exports = { + createProject, + getAllProjects, + getProjectById, + updateProject, + deleteProject, +}; diff --git a/backend/src/middleware/errorHandler.js b/backend/src/middleware/errorHandler.js new file mode 100644 index 0000000..73e7501 --- /dev/null +++ b/backend/src/middleware/errorHandler.js @@ -0,0 +1,9 @@ +// Global error handler — must be the last middleware registered +const errorHandler = (err, req, res, _next) => { + const statusCode = err.statusCode || 500; + const message = err.message || 'Internal Server Error'; + + res.status(statusCode).json({ error: message }); +}; + +module.exports = errorHandler; diff --git a/backend/src/middleware/validation.js b/backend/src/middleware/validation.js new file mode 100644 index 0000000..888ecb5 --- /dev/null +++ b/backend/src/middleware/validation.js @@ -0,0 +1,103 @@ +const VALID_STATUSES = ['active', 'inactive', 'completed']; + +const validateName = (name, isRequired = true) => { + if (isRequired && (name === undefined || name === null)) { + return 'name is required'; + } + if (name !== undefined && name !== null) { + if (typeof name !== 'string' || name.trim().length < 3) { + return 'name must be at least 3 characters'; + } + if (name.trim().length > 100) { + return 'name must be at most 100 characters'; + } + } + return null; +}; + +const validateDescription = (description, isRequired = true) => { + if (isRequired && (description === undefined || description === null)) { + return 'description is required'; + } + if (description !== undefined && description !== null) { + if (typeof description !== 'string' || description.trim().length < 10) { + return 'description must be at least 10 characters'; + } + if (description.trim().length > 500) { + return 'description must be at most 500 characters'; + } + } + return null; +}; + +const validateOwnerId = (ownerId, isRequired = true) => { + if (isRequired && (ownerId === undefined || ownerId === null)) { + return 'ownerId is required'; + } + if (ownerId !== undefined && ownerId !== null) { + if (typeof ownerId !== 'string' || ownerId.trim().length === 0) { + return 'ownerId must be a non-empty string'; + } + } + return null; +}; + +const validateStatus = (status, isRequired = true) => { + if (isRequired && (status === undefined || status === null)) { + return 'status is required'; + } + if (status !== undefined && status !== null) { + if (!VALID_STATUSES.includes(status)) { + return 'status must be one of: active, inactive, completed'; + } + } + return null; +}; + +const validateCreateProject = (req, res, next) => { + const { name, description, ownerId, status } = req.body; + const errors = []; + + const nameError = validateName(name, true); + if (nameError) errors.push(nameError); + + const descriptionError = validateDescription(description, true); + if (descriptionError) errors.push(descriptionError); + + const ownerIdError = validateOwnerId(ownerId, true); + if (ownerIdError) errors.push(ownerIdError); + + const statusError = validateStatus(status, true); + if (statusError) errors.push(statusError); + + if (errors.length > 0) { + return res.status(400).json({ errors }); + } + + next(); +}; + +const validateUpdateProject = (req, res, next) => { + const { name, description, ownerId, status } = req.body; + const errors = []; + + const nameError = validateName(name, false); + if (nameError) errors.push(nameError); + + const descriptionError = validateDescription(description, false); + if (descriptionError) errors.push(descriptionError); + + const ownerIdError = validateOwnerId(ownerId, false); + if (ownerIdError) errors.push(ownerIdError); + + const statusError = validateStatus(status, false); + if (statusError) errors.push(statusError); + + if (errors.length > 0) { + return res.status(400).json({ errors }); + } + + next(); +}; + +module.exports = { validateCreateProject, validateUpdateProject }; diff --git a/backend/src/routes/projects.js b/backend/src/routes/projects.js new file mode 100644 index 0000000..e1bb39f --- /dev/null +++ b/backend/src/routes/projects.js @@ -0,0 +1,21 @@ +const express = require('express'); +const router = express.Router(); +const { + createProject, + getAllProjects, + getProjectById, + updateProject, + deleteProject, +} = require('../controllers/projectController'); +const { + validateCreateProject, + validateUpdateProject, +} = require('../middleware/validation'); + +router.post('/', validateCreateProject, createProject); +router.get('/', getAllProjects); +router.get('/:id', getProjectById); +router.put('/:id', validateUpdateProject, updateProject); +router.delete('/:id', deleteProject); + +module.exports = router; diff --git a/backend/src/server.js b/backend/src/server.js new file mode 100644 index 0000000..b79d09f --- /dev/null +++ b/backend/src/server.js @@ -0,0 +1,8 @@ +require('dotenv').config(); +const app = require('./app'); + +const PORT = process.env.PORT || 5000; + +app.listen(PORT, () => { + console.log(`Server running on port ${PORT}`); +}); diff --git a/backend/src/store/inMemoryStore.js b/backend/src/store/inMemoryStore.js new file mode 100644 index 0000000..84fede7 --- /dev/null +++ b/backend/src/store/inMemoryStore.js @@ -0,0 +1,103 @@ +const crypto = require('crypto'); + +// In-memory data store +let projects = []; + +// Pre-seed with 5 sample projects +const seedProjects = () => { + projects = [ + { + id: crypto.randomUUID(), + name: 'E-Commerce Platform Redesign', + description: 'Complete overhaul of the existing e-commerce platform with modern UI/UX, improved checkout flow, and mobile-first responsive design.', + ownerId: 'user-alice-001', + status: 'active', + createdAt: new Date('2025-01-15T09:00:00Z').toISOString(), + updatedAt: new Date('2025-03-20T14:30:00Z').toISOString(), + }, + { + id: crypto.randomUUID(), + name: 'Internal HR Dashboard', + description: 'Build an internal dashboard for HR team to manage employee records, track attendance, and generate monthly performance reports.', + ownerId: 'user-bob-002', + status: 'completed', + createdAt: new Date('2024-11-01T08:00:00Z').toISOString(), + updatedAt: new Date('2025-02-28T17:00:00Z').toISOString(), + }, + { + id: crypto.randomUUID(), + name: 'Mobile Banking App', + description: 'Develop a cross-platform mobile banking application with secure authentication, real-time transaction tracking, and bill payment features.', + ownerId: 'user-charlie-003', + status: 'active', + createdAt: new Date('2025-02-10T10:00:00Z').toISOString(), + updatedAt: new Date('2025-04-15T11:45:00Z').toISOString(), + }, + { + id: crypto.randomUUID(), + name: 'Legacy System Migration', + description: 'Migrate legacy monolithic application to microservices architecture using containerized deployments and modern CI/CD pipelines.', + ownerId: 'user-diana-004', + status: 'inactive', + createdAt: new Date('2024-08-20T07:30:00Z').toISOString(), + updatedAt: new Date('2024-12-10T16:00:00Z').toISOString(), + }, + { + id: crypto.randomUUID(), + name: 'AI Chatbot Integration', + description: 'Integrate an AI-powered chatbot into the customer support portal to handle common queries, escalate complex issues, and reduce response times.', + ownerId: 'user-ethan-005', + status: 'active', + createdAt: new Date('2025-03-01T12:00:00Z').toISOString(), + updatedAt: new Date('2025-05-10T09:15:00Z').toISOString(), + }, + ]; +}; + +// Initialize with seed data +seedProjects(); + +const getAll = () => [...projects]; + +const getById = (id) => projects.find((project) => project.id === id) || null; + +const create = (projectData) => { + const newProject = { + id: crypto.randomUUID(), + ...projectData, + createdAt: new Date().toISOString(), + updatedAt: new Date().toISOString(), + }; + projects.push(newProject); + return newProject; +}; + +const update = (id, updateData) => { + const index = projects.findIndex((project) => project.id === id); + if (index === -1) return null; + + projects[index] = { + ...projects[index], + ...updateData, + id: projects[index].id, + createdAt: projects[index].createdAt, + updatedAt: new Date().toISOString(), + }; + + return projects[index]; +}; + +const remove = (id) => { + const index = projects.findIndex((project) => project.id === id); + if (index === -1) return null; + + const [deleted] = projects.splice(index, 1); + return deleted; +}; + +// Reset store to seed data — used for test isolation +const resetStore = () => { + seedProjects(); +}; + +module.exports = { getAll, getById, create, update, remove, resetStore }; diff --git a/backend/src/tests/projects.test.js b/backend/src/tests/projects.test.js new file mode 100644 index 0000000..ead1498 --- /dev/null +++ b/backend/src/tests/projects.test.js @@ -0,0 +1,232 @@ +const request = require('supertest'); +const app = require('../app'); +const store = require('../store/inMemoryStore'); + +// Reset the store before each test to ensure isolation +beforeEach(() => { + store.resetStore(); +}); + +describe('POST /api/projects', () => { + const validProject = { + name: 'Test Project', + description: 'A valid project description for testing purposes', + ownerId: 'user-test-001', + status: 'active', + }; + + it('creates a project with valid data → 201', async () => { + const response = await request(app) + .post('/api/projects') + .send(validProject) + .expect(201); + + expect(response.body).toHaveProperty('id'); + expect(response.body.name).toBe(validProject.name); + expect(response.body.description).toBe(validProject.description); + expect(response.body.ownerId).toBe(validProject.ownerId); + expect(response.body.status).toBe(validProject.status); + expect(response.body).toHaveProperty('createdAt'); + expect(response.body).toHaveProperty('updatedAt'); + }); + + it('returns 400 if name is missing', async () => { + const { name, ...projectWithoutName } = validProject; + const response = await request(app) + .post('/api/projects') + .send(projectWithoutName) + .expect(400); + + expect(response.body.errors).toContain('name is required'); + }); + + it('returns 400 if description is too short', async () => { + const response = await request(app) + .post('/api/projects') + .send({ ...validProject, description: 'short' }) + .expect(400); + + expect(response.body.errors).toContain( + 'description must be at least 10 characters' + ); + }); + + it('returns 400 if status is invalid', async () => { + const response = await request(app) + .post('/api/projects') + .send({ ...validProject, status: 'unknown' }) + .expect(400); + + expect(response.body.errors).toContain( + 'status must be one of: active, inactive, completed' + ); + }); + + it('returns 400 if ownerId is missing', async () => { + const { ownerId, ...projectWithoutOwner } = validProject; + const response = await request(app) + .post('/api/projects') + .send(projectWithoutOwner) + .expect(400); + + expect(response.body.errors).toContain('ownerId is required'); + }); +}); + +describe('GET /api/projects', () => { + it('returns paginated list → 200', async () => { + const response = await request(app) + .get('/api/projects') + .expect(200); + + expect(response.body).toHaveProperty('data'); + expect(response.body).toHaveProperty('total'); + expect(response.body).toHaveProperty('page'); + expect(response.body).toHaveProperty('limit'); + expect(response.body).toHaveProperty('totalPages'); + expect(Array.isArray(response.body.data)).toBe(true); + }); + + it('respects page and limit query params', async () => { + const response = await request(app) + .get('/api/projects?page=1&limit=2') + .expect(200); + + expect(response.body.data.length).toBeLessThanOrEqual(2); + expect(response.body.page).toBe(1); + expect(response.body.limit).toBe(2); + }); + + it('filters by status correctly', async () => { + const response = await request(app) + .get('/api/projects?status=active') + .expect(200); + + response.body.data.forEach((project) => { + expect(project.status).toBe('active'); + }); + }); + + it('search works on name and description', async () => { + const response = await request(app) + .get('/api/projects?search=E-Commerce') + .expect(200); + + expect(response.body.data.length).toBeGreaterThanOrEqual(1); + const found = response.body.data.some( + (project) => + project.name.toLowerCase().includes('e-commerce') || + project.description.toLowerCase().includes('e-commerce') + ); + expect(found).toBe(true); + }); +}); + +describe('GET /api/projects/:id', () => { + it('returns correct project → 200', async () => { + // Get the first project's ID from the seeded data + const listResponse = await request(app).get('/api/projects'); + const firstProject = listResponse.body.data[0]; + + const response = await request(app) + .get(`/api/projects/${firstProject.id}`) + .expect(200); + + expect(response.body.id).toBe(firstProject.id); + expect(response.body.name).toBe(firstProject.name); + }); + + it('returns 404 for non-existent id', async () => { + const response = await request(app) + .get('/api/projects/non-existent-id-12345') + .expect(404); + + expect(response.body.error).toBe('Project not found'); + }); +}); + +describe('PUT /api/projects/:id', () => { + it('updates fields correctly → 200', async () => { + const listResponse = await request(app).get('/api/projects'); + const projectToUpdate = listResponse.body.data[0]; + + const response = await request(app) + .put(`/api/projects/${projectToUpdate.id}`) + .send({ name: 'Updated Project Name' }) + .expect(200); + + expect(response.body.name).toBe('Updated Project Name'); + expect(response.body.id).toBe(projectToUpdate.id); + }); + + it('partial update works (only provided fields change)', async () => { + const listResponse = await request(app).get('/api/projects'); + const projectToUpdate = listResponse.body.data[0]; + const originalDescription = projectToUpdate.description; + + const response = await request(app) + .put(`/api/projects/${projectToUpdate.id}`) + .send({ name: 'Only Name Changed' }) + .expect(200); + + expect(response.body.name).toBe('Only Name Changed'); + expect(response.body.description).toBe(originalDescription); + }); + + it('returns 404 for non-existent id', async () => { + const response = await request(app) + .put('/api/projects/non-existent-id-12345') + .send({ name: 'Does Not Matter' }) + .expect(404); + + expect(response.body.error).toBe('Project not found'); + }); + + it('returns 400 on invalid status value', async () => { + const listResponse = await request(app).get('/api/projects'); + const projectToUpdate = listResponse.body.data[0]; + + const response = await request(app) + .put(`/api/projects/${projectToUpdate.id}`) + .send({ status: 'invalid-status' }) + .expect(400); + + expect(response.body.errors).toContain( + 'status must be one of: active, inactive, completed' + ); + }); +}); + +describe('DELETE /api/projects/:id', () => { + it('deletes project → 200', async () => { + const listResponse = await request(app).get('/api/projects'); + const projectToDelete = listResponse.body.data[0]; + + const response = await request(app) + .delete(`/api/projects/${projectToDelete.id}`) + .expect(200); + + expect(response.body.message).toBe('Project deleted successfully'); + }); + + it('returns 404 for non-existent id', async () => { + const response = await request(app) + .delete('/api/projects/non-existent-id-12345') + .expect(404); + + expect(response.body.error).toBe('Project not found'); + }); + + it('deleted project no longer returned in list', async () => { + const listResponse = await request(app).get('/api/projects'); + const projectToDelete = listResponse.body.data[0]; + + await request(app).delete(`/api/projects/${projectToDelete.id}`).expect(200); + + const updatedList = await request(app).get('/api/projects').expect(200); + const found = updatedList.body.data.find( + (project) => project.id === projectToDelete.id + ); + expect(found).toBeUndefined(); + }); +}); diff --git a/documentation.md b/documentation.md index d1e8d04..9e48173 100644 --- a/documentation.md +++ b/documentation.md @@ -1 +1,135 @@ -# documentation file +# Project Management CRUD Application + +## Overview +A full-stack project management CRUD application built with **Next.js 14** (frontend) and **Express.js** (backend). It supports creating, reading, updating, and deleting projects with real-time search, status filtering, pagination, and a premium dark-mode glassmorphism UI with an animated aurora background. + +## Tech Stack + +### Frontend +- **Framework:** Next.js 14 (App Router) +- **Styling:** Tailwind CSS +- **Background Effect:** OGL (WebGL) — SoftAurora component +- **State Management:** React useState/useEffect +- **HTTP Client:** Fetch API + +### Backend +- **Runtime:** Node.js (v18+) +- **Framework:** Express.js +- **Middleware:** cors, dotenv +- **Testing:** Jest + Supertest (18 test cases) +- **Data Store:** In-memory JavaScript array + +## Project Structure + +``` +Root/ +├── backend/ +│ ├── src/ +│ │ ├── routes/ +│ │ │ └── projects.js +│ │ ├── controllers/ +│ │ │ └── projectController.js +│ │ ├── middleware/ +│ │ │ ├── validation.js +│ │ │ └── errorHandler.js +│ │ ├── store/ +│ │ │ └── inMemoryStore.js +│ │ ├── tests/ +│ │ │ └── projects.test.js +│ │ ├── app.js +│ │ └── server.js +│ └── package.json +├── frontend/ +│ ├── src/ +│ │ ├── app/ +│ │ │ ├── layout.js +│ │ │ ├── globals.css +│ │ │ └── page.js +│ │ ├── components/ +│ │ │ ├── ProjectList.jsx +│ │ │ ├── ProjectForm.jsx +│ │ │ ├── ProjectCard.jsx +│ │ │ ├── Pagination.jsx +│ │ │ ├── SoftAurora.jsx +│ │ │ └── SoftAurora.css +│ │ └── lib/ +│ │ └── api.js +│ └── package.json +└── README.md +``` + +## Getting Started + +### Prerequisites +- Node.js v18+ +- npm + +### Backend Setup +```bash +cd backend +npm install +echo "PORT=5000" > .env +npm run dev +``` +The API server starts at `http://localhost:5000`. + +### Frontend Setup +```bash +cd frontend +npm install +echo "NEXT_PUBLIC_API_URL=http://localhost:5000/api" > .env.local +npm run dev +``` +The frontend starts at `http://localhost:3000`. + +## API Endpoints + +| Method | Endpoint | Description | +|--------|----------|-------------| +| POST | /api/projects | Create a new project | +| GET | /api/projects | List all projects (paginated, filterable, searchable) | +| GET | /api/projects/:id | Get a single project | +| PUT | /api/projects/:id | Update a project (partial updates) | +| DELETE | /api/projects/:id | Delete a project | + +### Query Parameters (GET /api/projects) +- `page` — Page number (default: 1) +- `limit` — Items per page (default: 10, max: 50) +- `status` — Filter by status (active/inactive/completed) +- `search` — Search in name and description + +## Data Model + +```json +{ + "id": "auto-generated UUID", + "name": "string (3–100 chars)", + "description": "string (10–500 chars)", + "ownerId": "string (non-empty)", + "status": "active | inactive | completed", + "createdAt": "ISO timestamp", + "updatedAt": "ISO timestamp" +} +``` + +## Running Tests + +```bash +cd backend +npm test +``` + +All 18 test cases covering CRUD operations, validation, pagination, filtering, and search. + +## Features +- Full CRUD operations without page reloads +- Client-side and server-side validation +- Debounced search +- Badge-style status filters +- Staggered fade-in animations +- Dark glassmorphism UI with animated WebGL aurora background +- Mouse-reactive aurora effect +- Responsive design (mobile, tablet, desktop) +- Confirmation dialogs for destructive actions +- Loading spinners on all async operations +- Inline error messages for API and validation errors diff --git a/frontend/.gitignore b/frontend/.gitignore new file mode 100644 index 0000000..5ef6a52 --- /dev/null +++ b/frontend/.gitignore @@ -0,0 +1,41 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.* +.yarn/* +!.yarn/patches +!.yarn/plugins +!.yarn/releases +!.yarn/versions + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* +.pnpm-debug.log* + +# env files (can opt-in for committing if needed) +.env* + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts diff --git a/frontend/AGENTS.md b/frontend/AGENTS.md new file mode 100644 index 0000000..8bd0e39 --- /dev/null +++ b/frontend/AGENTS.md @@ -0,0 +1,5 @@ + +# This is NOT the Next.js you know + +This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices. + diff --git a/frontend/CLAUDE.md b/frontend/CLAUDE.md new file mode 100644 index 0000000..43c994c --- /dev/null +++ b/frontend/CLAUDE.md @@ -0,0 +1 @@ +@AGENTS.md diff --git a/frontend/README.md b/frontend/README.md new file mode 100644 index 0000000..66bb426 --- /dev/null +++ b/frontend/README.md @@ -0,0 +1,36 @@ +This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). + +## Getting Started + +First, run the development server: + +```bash +npm run dev +# or +yarn dev +# or +pnpm dev +# or +bun dev +``` + +Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. + +You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file. + +This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel. + +## Learn More + +To learn more about Next.js, take a look at the following resources: + +- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. +- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. + +You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! + +## Deploy on Vercel + +The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. + +Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details. diff --git a/frontend/eslint.config.mjs b/frontend/eslint.config.mjs new file mode 100644 index 0000000..f443835 --- /dev/null +++ b/frontend/eslint.config.mjs @@ -0,0 +1,16 @@ +import { defineConfig, globalIgnores } from "eslint/config"; +import nextVitals from "eslint-config-next/core-web-vitals"; + +const eslintConfig = defineConfig([ + ...nextVitals, + // Override default ignores of eslint-config-next. + globalIgnores([ + // Default ignores of eslint-config-next: + ".next/**", + "out/**", + "build/**", + "next-env.d.ts", + ]), +]); + +export default eslintConfig; diff --git a/frontend/jsconfig.json b/frontend/jsconfig.json new file mode 100644 index 0000000..b8d6842 --- /dev/null +++ b/frontend/jsconfig.json @@ -0,0 +1,7 @@ +{ + "compilerOptions": { + "paths": { + "@/*": ["./src/*"] + } + } +} diff --git a/frontend/next.config.mjs b/frontend/next.config.mjs new file mode 100644 index 0000000..b108e1a --- /dev/null +++ b/frontend/next.config.mjs @@ -0,0 +1,6 @@ +/** @type {import('next').NextConfig} */ +const nextConfig = { + /* config options here */ +}; + +export default nextConfig; diff --git a/frontend/package.json b/frontend/package.json new file mode 100644 index 0000000..31dd0e4 --- /dev/null +++ b/frontend/package.json @@ -0,0 +1,23 @@ +{ + "name": "frontend", + "version": "0.1.0", + "private": true, + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start", + "lint": "eslint" + }, + "dependencies": { + "next": "16.2.9", + "ogl": "^1.0.11", + "react": "19.2.4", + "react-dom": "19.2.4" + }, + "devDependencies": { + "@tailwindcss/postcss": "^4", + "eslint": "^9", + "eslint-config-next": "16.2.9", + "tailwindcss": "^4" + } +} diff --git a/frontend/postcss.config.mjs b/frontend/postcss.config.mjs new file mode 100644 index 0000000..61e3684 --- /dev/null +++ b/frontend/postcss.config.mjs @@ -0,0 +1,7 @@ +const config = { + plugins: { + "@tailwindcss/postcss": {}, + }, +}; + +export default config; diff --git a/frontend/public/file.svg b/frontend/public/file.svg new file mode 100644 index 0000000..004145c --- /dev/null +++ b/frontend/public/file.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/public/globe.svg b/frontend/public/globe.svg new file mode 100644 index 0000000..567f17b --- /dev/null +++ b/frontend/public/globe.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/public/next.svg b/frontend/public/next.svg new file mode 100644 index 0000000..5174b28 --- /dev/null +++ b/frontend/public/next.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/public/vercel.svg b/frontend/public/vercel.svg new file mode 100644 index 0000000..7705396 --- /dev/null +++ b/frontend/public/vercel.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/public/window.svg b/frontend/public/window.svg new file mode 100644 index 0000000..b2b2a44 --- /dev/null +++ b/frontend/public/window.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/app/favicon.ico b/frontend/src/app/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..718d6fea4835ec2d246af9800eddb7ffb276240c GIT binary patch literal 25931 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 LrJugUA?W`A8`#=m literal 0 HcmV?d00001 diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css new file mode 100644 index 0000000..78da598 --- /dev/null +++ b/frontend/src/app/globals.css @@ -0,0 +1,326 @@ +@import "tailwindcss"; + +:root { + --background: #050a14; + --foreground: #e2e8f0; + --card-bg: rgba(15, 23, 42, 0.6); + --card-border: rgba(255, 255, 255, 0.08); + --card-hover: rgba(15, 23, 42, 0.75); + --primary: #22d3ee; + --primary-hover: #67e8f9; + --primary-glow: rgba(34, 211, 238, 0.25); + --accent-green: #34d399; + --accent-green-bg: rgba(52, 211, 153, 0.12); + --accent-gray: #94a3b8; + --accent-gray-bg: rgba(148, 163, 184, 0.12); + --accent-blue: #60a5fa; + --accent-blue-bg: rgba(96, 165, 250, 0.12); + --danger: #f87171; + --danger-hover: #fca5a5; + --danger-bg: rgba(248, 113, 113, 0.1); + --surface-1: rgba(15, 23, 42, 0.5); + --surface-2: rgba(30, 41, 59, 0.5); + --surface-3: rgba(51, 65, 85, 0.4); + --text-muted: #94a3b8; + --text-secondary: #cbd5e1; + --input-bg: rgba(15, 23, 42, 0.7); + --input-border: rgba(255, 255, 255, 0.1); + --input-focus: #22d3ee; + --overlay: rgba(0, 0, 0, 0.6); + --gradient-start: #06b6d4; + --gradient-end: #22d3ee; +} + +@theme inline { + --color-background: var(--background); + --color-foreground: var(--foreground); + --font-sans: var(--font-inter), system-ui, sans-serif; +} + +body { + background: var(--background); + color: var(--foreground); + font-family: var(--font-inter), system-ui, -apple-system, sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + min-height: 100vh; +} + +::-webkit-scrollbar { + width: 6px; +} +::-webkit-scrollbar-track { + background: rgba(255, 255, 255, 0.02); +} +::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.1); + border-radius: 3px; +} +::-webkit-scrollbar-thumb:hover { + background: rgba(255, 255, 255, 0.18); +} + +@keyframes fadeIn { + from { opacity: 0; transform: translateY(8px); } + to { opacity: 1; transform: translateY(0); } +} + +@keyframes slideUp { + from { opacity: 0; transform: translateY(24px) scale(0.98); } + to { opacity: 1; transform: translateY(0) scale(1); } +} + +@keyframes shimmer { + 0% { background-position: -200% 0; } + 100% { background-position: 200% 0; } +} + +@keyframes spin { + to { transform: rotate(360deg); } +} + +.animate-fade-in { + animation: fadeIn 0.4s ease-out forwards; +} + +.animate-slide-up { + animation: slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; +} + +.glass-card { + background: rgba(15, 23, 42, 0.55); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 16px; + box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.04); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +.glass-card:hover { + background: rgba(15, 23, 42, 0.7); + border-color: rgba(34, 211, 238, 0.2); + box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3), 0 0 20px rgba(34, 211, 238, 0.05); + transform: translateY(-2px); +} + +.btn-primary { + background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end)); + color: #050a14; + font-weight: 600; + padding: 10px 20px; + border-radius: 10px; + border: none; + cursor: pointer; + transition: all 0.2s ease; + position: relative; + overflow: hidden; +} + +.btn-primary:hover { + box-shadow: 0 4px 24px var(--primary-glow); + transform: translateY(-1px); +} + +.btn-primary:active { + transform: translateY(0); +} + +.btn-primary:disabled { + opacity: 0.5; + cursor: not-allowed; + transform: none; + box-shadow: none; +} + +.btn-secondary { + background: rgba(30, 41, 59, 0.6); + color: var(--text-secondary); + font-weight: 500; + padding: 10px 20px; + border-radius: 10px; + border: 1px solid rgba(255, 255, 255, 0.08); + cursor: pointer; + backdrop-filter: blur(8px); + transition: all 0.2s ease; +} + +.btn-secondary:hover { + background: rgba(51, 65, 85, 0.6); + color: var(--foreground); +} + +.btn-danger { + background: var(--danger-bg); + color: var(--danger); + font-weight: 500; + padding: 10px 20px; + border-radius: 10px; + border: 1px solid rgba(248, 113, 113, 0.15); + cursor: pointer; + transition: all 0.2s ease; +} + +.btn-danger:hover { + background: rgba(248, 113, 113, 0.15); + border-color: var(--danger); + box-shadow: 0 2px 12px rgba(248, 113, 113, 0.15); +} + +.btn-icon { + background: transparent; + border: none; + cursor: pointer; + padding: 8px; + border-radius: 8px; + transition: all 0.2s ease; + display: inline-flex; + align-items: center; + justify-content: center; +} + +.btn-icon:hover { + background: rgba(255, 255, 255, 0.06); +} + +.input-field { + width: 100%; + padding: 12px 16px; + background: var(--input-bg); + backdrop-filter: blur(8px); + border: 1px solid var(--input-border); + border-radius: 10px; + color: var(--foreground); + font-size: 14px; + font-family: inherit; + transition: all 0.2s ease; + outline: none; +} + +.input-field:focus { + border-color: var(--input-focus); + box-shadow: 0 0 0 3px var(--primary-glow); + background: rgba(15, 23, 42, 0.85); +} + +.input-field::placeholder { + color: var(--text-muted); +} + +.input-field.error { + border-color: var(--danger); + box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.12); +} + +.badge { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 4px 12px; + border-radius: 20px; + font-size: 12px; + font-weight: 600; + letter-spacing: 0.025em; + text-transform: capitalize; +} + +.badge-active { + background: var(--accent-green-bg); + color: var(--accent-green); + border: 1px solid rgba(52, 211, 153, 0.2); +} + +.badge-inactive { + background: var(--accent-gray-bg); + color: var(--accent-gray); + border: 1px solid rgba(148, 163, 184, 0.2); +} + +.badge-completed { + background: var(--accent-blue-bg); + color: var(--accent-blue); + border: 1px solid rgba(96, 165, 250, 0.2); +} + +.spinner { + width: 20px; + height: 20px; + border: 2px solid rgba(255, 255, 255, 0.2); + border-top-color: white; + border-radius: 50%; + animation: spin 0.6s linear infinite; +} + +.spinner-large { + width: 40px; + height: 40px; + border-width: 3px; + border-color: rgba(34, 211, 238, 0.2); + border-top-color: var(--primary); +} + +.modal-overlay { + position: fixed; + inset: 0; + background: var(--overlay); + backdrop-filter: blur(8px); + display: flex; + align-items: center; + justify-content: center; + z-index: 50; + padding: 16px; + animation: fadeIn 0.2s ease-out; +} + +.modal-content { + background: rgba(15, 23, 42, 0.9); + backdrop-filter: blur(24px); + -webkit-backdrop-filter: blur(24px); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 20px; + padding: 32px; + max-width: 560px; + width: 100%; + max-height: 90vh; + overflow-y: auto; + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); + animation: slideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1); +} + +.confirm-overlay { + position: fixed; + inset: 0; + background: var(--overlay); + backdrop-filter: blur(4px); + display: flex; + align-items: center; + justify-content: center; + z-index: 60; + padding: 16px; + animation: fadeIn 0.15s ease-out; +} + +.confirm-box { + background: rgba(15, 23, 42, 0.92); + backdrop-filter: blur(24px); + -webkit-backdrop-filter: blur(24px); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 16px; + padding: 28px; + max-width: 420px; + width: 100%; + box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4); + animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1); +} + +.skeleton { + background: linear-gradient( + 90deg, + rgba(255, 255, 255, 0.04) 25%, + rgba(255, 255, 255, 0.08) 50%, + rgba(255, 255, 255, 0.04) 75% + ); + background-size: 200% 100%; + animation: shimmer 1.5s infinite; + border-radius: 8px; +} diff --git a/frontend/src/app/layout.js b/frontend/src/app/layout.js new file mode 100644 index 0000000..2f921e5 --- /dev/null +++ b/frontend/src/app/layout.js @@ -0,0 +1,35 @@ +import { Inter } from "next/font/google"; +import { Geist, Geist_Mono } from "next/font/google"; +import "./globals.css"; + +const inter = Inter({ + variable: "--font-inter", + subsets: ["latin"], + weight: ["300", "400", "500", "600", "700", "800"], +}); + +const geistSans = Geist({ + variable: "--font-geist-sans", + subsets: ["latin"], +}); + +const geistMono = Geist_Mono({ + variable: "--font-geist-mono", + subsets: ["latin"], +}); + +export const metadata = { + title: "Project Manager — Manage Your Projects", + description: "A full-stack project management application for creating, tracking, and managing projects with real-time search, filtering, and pagination.", +}; + +export default function RootLayout({ children }) { + return ( + + {children} + + ); +} diff --git a/frontend/src/app/page.js b/frontend/src/app/page.js new file mode 100644 index 0000000..a6fd8b5 --- /dev/null +++ b/frontend/src/app/page.js @@ -0,0 +1,345 @@ +'use client'; + +import { useState, useEffect, useCallback } from 'react'; +import ProjectList from '@/components/ProjectList'; +import ProjectForm from '@/components/ProjectForm'; +import Pagination from '@/components/Pagination'; +import SoftAurora from '@/components/SoftAurora'; +import { + getProjects, + createProject, + updateProject, + deleteProject, +} from '@/lib/api'; + +const STATUS_OPTIONS = [ + { value: '', label: 'All Statuses' }, + { value: 'active', label: 'Active' }, + { value: 'inactive', label: 'Inactive' }, + { value: 'completed', label: 'Completed' }, +]; + +const ITEMS_PER_PAGE = 6; + +export default function Home() { + const [projects, setProjects] = useState([]); + const [totalPages, setTotalPages] = useState(1); + const [totalCount, setTotalCount] = useState(0); + const [currentPage, setCurrentPage] = useState(1); + const [statusFilter, setStatusFilter] = useState(''); + const [searchQuery, setSearchQuery] = useState(''); + const [searchInput, setSearchInput] = useState(''); + const [isLoading, setIsLoading] = useState(true); + const [isSubmitting, setIsSubmitting] = useState(false); + const [error, setError] = useState(''); + const [showForm, setShowForm] = useState(false); + const [editingProject, setEditingProject] = useState(null); + const [deleteTarget, setDeleteTarget] = useState(null); + const [isDeleting, setIsDeleting] = useState(false); + + const fetchProjects = useCallback(async () => { + setIsLoading(true); + setError(''); + try { + const filters = {}; + if (statusFilter) filters.status = statusFilter; + if (searchQuery) filters.search = searchQuery; + const result = await getProjects(currentPage, ITEMS_PER_PAGE, filters); + setProjects(result.data); + setTotalPages(result.totalPages); + setTotalCount(result.total); + } catch (fetchError) { + setError(fetchError.message || 'Failed to fetch projects'); + setProjects([]); + } finally { + setIsLoading(false); + } + }, [currentPage, statusFilter, searchQuery]); + + useEffect(() => { + fetchProjects(); + }, [fetchProjects]); + + useEffect(() => { + const timer = setTimeout(() => { + setSearchQuery(searchInput); + setCurrentPage(1); + }, 400); + return () => clearTimeout(timer); + }, [searchInput]); + + const handleCreateClick = () => { + setEditingProject(null); + setShowForm(true); + }; + + const handleEditClick = (project) => { + setEditingProject(project); + setShowForm(true); + }; + + const handleDeleteClick = (project) => { + setDeleteTarget(project); + }; + + const handleFormSubmit = async (formData) => { + setIsSubmitting(true); + try { + if (editingProject) { + await updateProject(editingProject.id, formData); + } else { + await createProject(formData); + } + setShowForm(false); + setEditingProject(null); + await fetchProjects(); + } catch (submitError) { + throw submitError; + } finally { + setIsSubmitting(false); + } + }; + + const handleFormCancel = () => { + setShowForm(false); + setEditingProject(null); + }; + + const handleDeleteConfirm = async () => { + if (!deleteTarget) return; + setIsDeleting(true); + try { + await deleteProject(deleteTarget.id); + setDeleteTarget(null); + if (projects.length === 1 && currentPage > 1) { + setCurrentPage((prev) => prev - 1); + } else { + await fetchProjects(); + } + } catch (deleteError) { + setError(deleteError.message || 'Failed to delete project'); + setDeleteTarget(null); + } finally { + setIsDeleting(false); + } + }; + + const handleDeleteCancel = () => { + setDeleteTarget(null); + }; + + + const handlePageChange = (page) => { + setCurrentPage(page); + window.scrollTo({ top: 0, behavior: 'smooth' }); + }; + + return ( +
+
+ +
+
+
+
+
+

+ Project Manager +

+

+ {totalCount} project{totalCount !== 1 ? 's' : ''} total +

+
+ +
+
+
+ +
+
+
+ + + + + setSearchInput(event.target.value)} + className="input-field pl-11" + /> +
+
+ Filter: + {STATUS_OPTIONS.map((option) => ( + + ))} +
+
+
+ +
+ {error && ( +
+ + + + + +

{error}

+ +
+ )} + + + + {!isLoading && projects.length > 0 && ( + + )} +
+ + {showForm && ( + + )} + + {deleteTarget && ( +
+
event.stopPropagation()}> +
+
+ + + + +
+

Delete Project

+
+

+ Are you sure you want to delete {deleteTarget.name}? + This action cannot be undone. +

+
+ + +
+
+
+ )} +
+ ); +} diff --git a/frontend/src/components/Pagination.jsx b/frontend/src/components/Pagination.jsx new file mode 100644 index 0000000..70abb0c --- /dev/null +++ b/frontend/src/components/Pagination.jsx @@ -0,0 +1,107 @@ +'use client'; + +const Pagination = ({ currentPage, totalPages, onPageChange }) => { + if (totalPages <= 1) return null; + + const getPageNumbers = () => { + const pages = []; + const maxVisible = 5; + + if (totalPages <= maxVisible) { + for (let i = 1; i <= totalPages; i++) pages.push(i); + } else { + pages.push(1); + + let rangeStart = Math.max(2, currentPage - 1); + let rangeEnd = Math.min(totalPages - 1, currentPage + 1); + + if (currentPage <= 2) { + rangeEnd = 4; + } else if (currentPage >= totalPages - 1) { + rangeStart = totalPages - 3; + } + + if (rangeStart > 2) pages.push('...'); + for (let i = rangeStart; i <= rangeEnd; i++) pages.push(i); + if (rangeEnd < totalPages - 1) pages.push('...'); + + pages.push(totalPages); + } + + return pages; + }; + + return ( +
+ + +
+ {getPageNumbers().map((pageNum, index) => + pageNum === '...' ? ( + + … + + ) : ( + + ) + )} +
+ + +
+ ); +}; + +export default Pagination; diff --git a/frontend/src/components/ProjectCard.jsx b/frontend/src/components/ProjectCard.jsx new file mode 100644 index 0000000..997a233 --- /dev/null +++ b/frontend/src/components/ProjectCard.jsx @@ -0,0 +1,85 @@ +'use client'; + +const STATUS_STYLES = { + active: 'badge badge-active', + inactive: 'badge badge-inactive', + completed: 'badge badge-completed', +}; + +const STATUS_DOTS = { + active: '●', + inactive: '○', + completed: '✓', +}; + +const ProjectCard = ({ project, onEdit, onDelete }) => { + const truncatedDescription = + project.description.length > 120 + ? `${project.description.slice(0, 120)}…` + : project.description; + + const formattedDate = new Date(project.updatedAt).toLocaleDateString('en-US', { + month: 'short', + day: 'numeric', + year: 'numeric', + }); + + return ( +
+
+
+

+ {project.name} +

+

+ by {project.ownerId} +

+
+ + {STATUS_DOTS[project.status]} + {project.status} + +
+ +

+ {truncatedDescription} +

+ +
+ + Updated {formattedDate} + +
+ + +
+
+
+ ); +}; + +export default ProjectCard; diff --git a/frontend/src/components/ProjectForm.jsx b/frontend/src/components/ProjectForm.jsx new file mode 100644 index 0000000..9a21644 --- /dev/null +++ b/frontend/src/components/ProjectForm.jsx @@ -0,0 +1,216 @@ +'use client'; + +import { useState, useEffect } from 'react'; + +const INITIAL_FORM = { + name: '', + description: '', + ownerId: '', + status: 'active', +}; + +const ProjectForm = ({ project, onSubmit, onCancel, isLoading }) => { + const isEditing = Boolean(project); + const [formData, setFormData] = useState(INITIAL_FORM); + const [errors, setErrors] = useState({}); + const [apiError, setApiError] = useState(''); + + useEffect(() => { + if (project) { + setFormData({ + name: project.name || '', + description: project.description || '', + ownerId: project.ownerId || '', + status: project.status || 'active', + }); + } else { + setFormData(INITIAL_FORM); + } + setErrors({}); + setApiError(''); + }, [project]); + + const validateField = (fieldName, value) => { + switch (fieldName) { + case 'name': + if (!value || value.trim().length < 3) return 'Name must be at least 3 characters'; + if (value.trim().length > 100) return 'Name must be at most 100 characters'; + return ''; + case 'description': + if (!value || value.trim().length < 10) return 'Description must be at least 10 characters'; + if (value.trim().length > 500) return 'Description must be at most 500 characters'; + return ''; + case 'ownerId': + if (!value || value.trim().length === 0) return 'Owner ID is required'; + return ''; + case 'status': + if (!['active', 'inactive', 'completed'].includes(value)) return 'Invalid status'; + return ''; + default: + return ''; + } + }; + + const validateAll = () => { + const newErrors = {}; + Object.keys(formData).forEach((key) => { + const error = validateField(key, formData[key]); + if (error) newErrors[key] = error; + }); + setErrors(newErrors); + return Object.keys(newErrors).length === 0; + }; + + const handleChange = (event) => { + const { name, value } = event.target; + setFormData((prev) => ({ ...prev, [name]: value })); + if (errors[name]) { + setErrors((prev) => ({ ...prev, [name]: '' })); + } + if (apiError) setApiError(''); + }; + + const handleBlur = (event) => { + const { name, value } = event.target; + const error = validateField(name, value); + setErrors((prev) => ({ ...prev, [name]: error })); + }; + + const handleSubmit = async (event) => { + event.preventDefault(); + setApiError(''); + if (!validateAll()) return; + try { + await onSubmit(formData); + } catch (error) { + setApiError(error.message || 'An unexpected error occurred'); + } + }; + + return ( +
+
event.stopPropagation()}> +
+

+ {isEditing ? 'Edit Project' : 'Create New Project'} +

+ +
+ + {apiError && ( +
+ {apiError} +
+ )} + +
+
+ + + {errors.name &&

{errors.name}

} +
+ +
+ +