Scribd
Upload
2 views

Frontend UI using React

The document outlines the development of a React-based frontend application for a Software Project Management System, focusing on CRUD operations for clients, projects, and tasks. It specifies functional requirements including a Home Page, Navbar, Projects Page, and Tasks Page, along with API integration for data retrieval and manipulation. Technical requirements emphasize the use of React hooks, state management, Axios or Fetch API, and a CSS framework for design, along with deliverables such as a fully functional application and thorough documentation.

Uploaded by

Siva Ramesh
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Frontend UI using React

The document outlines the development of a React-based frontend application for a Software Project Management System, focusing on CRUD operations for clients, projects, and tasks. It specifies functional requirements including a Home Page, Navbar, Projects Page, and Tasks Page, along with API integration for data retrieval and manipulation. Technical requirements emphasize the use of React hooks, state management, Axios or Fetch API, and a CSS framework for design, along with deliverables such as a fully functional application and thorough documentation.

Uploaded by

Siva Ramesh
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Developing a Frontend UI using React to Consume the Software Project Management API

Objective: Create a React-based frontend application that consumes the back-end API for
managing clients, projects, and tasks in the Software Project Management System. The React app
should include a Home Page, Navbar, and separate pages for interacting with the provided API
endpoints, including advanced query capabilities.

1. System Overview

Develop a React-based frontend UI that consumes the Software Project Management API. The
frontend will allow users to perform CRUD operations on clients, projects, and tasks. Additionally, the
UI will support querying projects ending soon, incomplete tasks, and filtering projects by client
name.

2. Functional Requirements

2.1. UI Components

1. Home Page:

o A landing page that welcomes users to the system and provides an introduction to
the app's features.

2. Navbar:

o A navigation bar that allows users to navigate between the Home page, Projects
page, and Tasks page.

o Include links to view all projects, view projects ending soon, incomplete tasks, and
filter projects by client.

3. Projects Page:

o Get All Projects: Display a list of all projects retrieved from the API.

o Create New Project: A form that allows users to add new projects by sending a POST
request to the API.

o Projects Ending Soon: Display projects that are ending within the next 30 days.

o Projects with Incomplete Tasks: Display projects that have unfinished tasks.

o Filter by Client: Provide a search input to filter projects by client name.

4. Tasks Page:

o Display tasks related to a selected project, including task name, status, and assigned
developer.

o Provide functionality to update task statuses.

2.2. API Integration

1. GET All Projects:


o Use fetch or Axios to retrieve all projects from the API and display them in a table or
list.

2. POST New Project:

o A form that allows users to add a new project. On submission, send a POST request
to the API and handle the response.

3. Projects Ending Soon:

o A section to fetch and display projects that are ending soon (within the next 30
days).

4. Projects with Incomplete Tasks:

o Fetch and display a list of projects that have unfinished tasks.

5. Filter Projects by Client:

o A search bar that allows users to filter projects by client name and display the
results.

3. Technical Requirements

1. React:

o Use React functional components with hooks (useState, useEffect) to manage state
and lifecycle methods.

o Use React Router for client-side routing between the different pages.

2. State Management:

o Use React's state management with hooks or, if necessary, implement a simple state
management solution using Context API for global state (like filtering projects).(Can
also use redux.)

3. Axios or Fetch API:

o Use Axios or Fetch to consume the API and handle requests such as GET, POST, and
complex queries.

4. CSS Framework:

o Use a CSS framework like Bootstrap or Material-UI to create a clean and responsive
design.

5. Error Handling:

o Handle any errors that may arise from API requests and display appropriate error
messages.

4. Deliverables
1. React Application:

o A fully functional React application that implements all required pages and API
interaction.

2. Code Comments:

o Ensure the code is well-documented, with comments explaining key parts of the
logic.

3. Testing:

o Test the application to ensure it correctly retrieves and displays data from the API.

You might also like