Frontend Engineer Project:

Sustainability Dashboard

πŸ“Œ Project Overview

Welcome to the Frontend Engineering challenge for Sustainity! πŸš€

This project will test your ability to fetch and manipulate data, create reusable UI components, and build a well-structured frontend application.

Your task is to develop a sustainability dashboard that allows users to:

βœ… Upload a dataset (CSV format) and preview its content.

βœ… Visualize sustainability-related data using tables and charts.

βœ… Filter and sort the displayed data dynamically.

βœ… Ensure responsiveness and a great user experience.

πŸ› οΈ Instructions

1. Build a Web Application

  • Use React (Next.js preferred) or Vue.js with TypeScript.

  • Ensure responsive design using Tailwind CSS, Material UI, or another UI framework.

⏳ Time Estimate

  • This project is designed to be completed in 3-4 hours.

  •  If you’re unable to complete all features, focus on file upload, table display, and basic interactivity.

πŸ“₯ Submission Guidelines

  • Push your code to GitHub (public repo) or send a ZIP file.

  • Include a README.md with:

  • Setup instructions for running the app.

  • Description of your approach and challenges faced.

  • Preferred frameworks/tools: React (Next.js) or Vue.js, TypeScript, Chart.js/D3.js.

     

 βœ… Filtering & Sorting

  • Allow users to filter records by a specific column.

  • Implement dynamic sorting (ascending/descending order).

 βœ… Error Handling & Feedback

  • Handle incorrect file formats gracefully.

  • Provide loading indicators and validation messages.

2. Implement Core Features 

βœ… File Upload & Preview

  • Users should be able to upload a CSV file.

  • Display the first 10 rows as a preview before processing.

 βœ… Data Visualization

  • Display the dataset in a sortable, filterable table.

  • Create at least one chart (e.g., bar, line, or pie) to visualize key metrics using Chart.js, D3.js, or Recharts.

⭐ Bonus Tasks (Optional, if Time Permits)

βœ… State Management – Use Redux, Zustand, or Vuex for efficient data handling.

βœ… Dark Mode Support – Implement theme switching for better UX.

βœ… API Integration – Fetch sustainability data from a provided API endpoint.