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 0000000..718d6fe Binary files /dev/null and b/frontend/src/app/favicon.ico differ 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}

} +
+ +
+ +