1
● Assignment Title: Build a Multi-Page React Application with
Routing
● Objective:
Your task is to create a React application with multiple pages (Home, About, and
User) using React Router. The application should demonstrate navigation between
pages, parameterized routes, and basic UI elements for a smooth user experience.
● Assignment Details:
Assignment Structure:
● Project Setup:
○ Create a react application
○ Create required components and establish good react project with
only needful
Content Requirements:
● Set Up Routing:
○ Use react-router-dom to implement routing.
○ Include the following routes:
■ / - Home Page
■ /about - About Page
■ /users - Users List Page
■ /users/:id - Individual User Detail Page
● Pages:
○ Home Page:
■ Display a welcoming message and basic information about the
application.
■ Include links or navigation buttons to the About and Users
pages.
○ About Page:
■ Provide details about the app and its purpose.
■ Include a link or button to go back to the Home page.
○ Users Page:
■ Display a list of users. Use a mock array of user objects
const users = [
{ id: 1, name: 'John Doe', email: '[email protected]' },
{ id: 2, name: 'Jane Smith', email: '[email protected]' },
// Add more users as needed
];
2
■ Each user in the list should have a clickable link to their detail
page.
○ User Detail Page:
■ Fetch the id from the route parameters.
■ Display detailed information about the user (name, email,
etc.).
■ Include a "Go Back" button to return to the Users page.
○ Navigation Bar:
■ Create a persistent navigation bar with links to Home, About,
and Users at the top of all pages.
■ Highlight the active route.
○ Styling:
■ Ensure the application is responsive and visually appealing.
■ Use your choice of plain CSS, SCSS, or a CSS framework (e.g.,
Bootstrap, Tailwind CSS).
○ React Components:
■ Use React functional components and organize the project
structure with separate folders for components and pages.
Submission Guidelines:
i. Submit all project files in a compressed ZIP folder.
ii. Send everything into github and provide a github link.
iii. Include screenshots showcasing each section of the application.
iv. Ensure that the project is well-organized according to the specified
folder structure.
3
● Breakdown of Marks:
Sl.no Criteria Marks
1 Creating app and 2
Componentization
2 Implementation of routing. 3
3 Functional correctness of 3
navigation between pages.
4 code quality 2
