This project is a web application that displays vehicle data collected from a remote REST API. The application presents this data in a user-friendly dashboard that includes a table, doughnut chart, and scatter chart data visualizations, each equipped with informative tooltips.
- Features
- Installation
- Usage
- Technologies Used
- Design Considerations
- API Integration
- Running the Application
- Testing
- Deployment
- License
- User Authentication: Secure login and logout using a custom authentication context that persists the user's session across page reloads.
- Data Visualization: Charts (doughnut, scatter) to visualize vehicle data with tooltips showing detailed information including vehicle percentages.
- Responsive Design: Adapts to different screen sizes.
- Dynamic Data Fetching: Periodically fetches updated data from the REST API.
- Automatic Data Refresh: The data automatically refreshes every 5 seconds. This interval can be easily adjusted using an environment variable.
- Date and Totals Display: Displays the date of the transactions and the total number of vehicles next to the transaction header.
- Logout Confirmation: Modal confirmation upon logout.
- Accessible Design: Ensures accessibility in color choices and design elements.
To set up this project locally, follow these steps:
git clone https://github.com/your-username/repository-name.git
Ensure you have Node.js installed, then run:
npm install
Create a .env file in the root directory and add any necessary environment variables:
NEXT_PUBLIC_API_URL= (get from Engineer)
You can control the data refresh interval by setting the NEXT_PUBLIC_REFRESH_INTERVAL environment variable in your .env.local file. The value is in milliseconds, and the default is set to 5000 (5 seconds).
Example:
NEXT_PUBLIC_REFRESH_INTERVAL=5000
To start the development server, run
npm run dev
The application will be available at http://localhost:3000.
- Frontend: React, TypeScript, Next.js
- Styling: Tailwind CSS
- Data Visualization: Chart.js, React-Chartjs-2
- State Management: React Hooks, Context API
- Authentication: Custom authentication flow using the useAuth context
- Date Manipulation: Moment.js
- Persistent Authentication: The application maintains user authentication state across page reloads by storing an authentication token in localStorage. This ensures that users do not need to log in again after refreshing the page, improving user experience.
- Responsive Design: Tailwind CSS is used to ensure the application is responsive across various devices.
- Tooltip Design: Tooltips provide detailed information including both vehicle count and percentage.
- Legend and Row Colors: Consistent color theming using Tailwind CSS for legends and table rows, with opacity adjustments.
- User Experience: Includes confirmation modals and error handling to enhance user experience.- ce: Includes confirmation modals and error handling to enhance user experience.
The application fetches vehicle data from the remote REST API periodically and displays it in a dashboard. The data includes:
- Timestamp: Time when the record was created.
- Classification: Type of vehicle (Truck, Car, Bike, etc.).
- Axles: Number of axles on the vehicle.
- Height: Height of the vehicle in inches.
The application fetches data from the following endpoint: [Please ask a Backend Engineer for endpoint]
The data is returned in JSON format and includes fields like timestamp, classification, axles, and height.
The doughnut chart visualizes the distribution of vehicle classifications, providing a clear breakdown of the different types of vehicles recorded.
The scatter chart visualizes vehicle axles against their height, providing insight into the distribution of vehicle types based on their physical dimensions.
[
{
"timestamp": "2024-08-19T18:18:53Z",
"classification": "car",
"axles": 2,
"height": 58
},
{
"timestamp": "2024-08-19T18:18:53Z",
"classification": "truck",
"axles": 6,
"height": 152
},
{
"timestamp": "2024-08-19T18:18:53Z",
"classification": "bike",
"axles": 2,
"height": 42
}
]To run the application locally:
npm run dev
Basic unit tests can be added using Jest or React Testing Library.
npm test
The current test coverage for the project is as follows:
| File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s |
|---|---|---|---|---|---|
| All files | 57.3 | 42.85 | 50 | 56.32 | |
| src | 100 | 100 | 100 | 100 | |
| types.ts | 100 | 100 | 100 | 100 | |
| src/api | 92.3 | 80 | 100 | 91.66 | 8 |
| src/app | 0 | 0 | 0 | 0 | |
| layout.tsx | 0 | 100 | 0 | 0 | 1-20 |
| page.tsx | 0 | 0 | 0 | 0 | 3-27 |
| src/app/dashboard | 0 | 0 | 0 | 0 | |
| page.tsx | 0 | 0 | 0 | 0 | 3-187 |
| src/components | 88.04 | 85.71 | 90 | 87.5 | |
| AuthForm.tsx | 87.09 | 60 | 100 | 86.66 | 20-21,29,34 |
| ChartLegend.tsx | 100 | 100 | 100 | 100 | |
| Charts.tsx | 75 | 100 | 66.66 | 73.07 | 84-86,147-150 |
| ConfirmationModal.tsx | 100 | 100 | 100 | 100 | |
| NavBar.tsx | 100 | 100 | 100 | 100 | |
| src/context | 50 | 0 | 25 | 44.44 | |
| AuthContext.tsx | 50 | 0 | 25 | 44.44 | 20-24,29-30,41-45 |
| src/utils | 67.79 | 0 | 45.83 | 65.45 | |
| colors.ts | 100 | 100 | 100 | 100 | |
| dataUtils.ts | 58.69 | 0 | 45.83 | 54.76 | 10-13,20-21,36-101 |
| mockVehicleData.ts | 100 | 100 | 100 | 100 | |
| ------------------------ | --------- | ---------- | --------- | --------- | -------------------- |
The application was tested using Google's Lighthouse tool. Below are the performance scores for different parts of the application:
Dashboard Lighthouse Results
- Performance: 85
- Accessibility: 100
- Best Practices: 81
Login Lighthouse Results
- Performance: 97
- Accessibility: 94
- Best Practices: 100
- Eliminate render-blocking resources: Potential savings of 70 ms
- Minify JavaScript: Potential savings of 77 KiB
- Back/Forward Cache: Page prevented back/forward cache restoration due to three failure reasons
This project is licensed under the MIT License. See the LICENSE file for details.