This project is a prototype for a study case, where the goal is to visualize client campaign data and provide an intuitive user interface for employees (client leads and campaign planners) to navigate and manage campaign details. The system should allow users to interact with the data to get a breakdown of client information.
This prototype was designed and implemented within 3 days.
This project includes a basic implementation of i18Next in the overview page to demonstrate how language translation can be integrated.
Given the limited timeframe for prototype development, a full implementation of i18Next on all pages was not included.
To set up the development environment:
- Ensure you have Node.js installed (> 20), the app has been tested with node
20.10.0. npm installnpm run dev- the browser should open automatically, if not, you could navigate to the suggested url http://127.0.0.1:8080/
To build the project for production, run:
npm run buildFor this case, you can consider users of the system to be employees. These people include client leads and campaign planners. A common need for both is to have control over clients campaigns throughout the media planning and buying process.
We have provided a data set in data.json that can be loaded through api-client.ts. This contains a somewhat accurate representation of what belongs to each client (such as brands, campaigns, teams, and budgets). Your task is to load the data from api-client.ts and visualize it in a UI. Use the data to make the UI that you feel gives the best user experience. Your UI should include a way to navigate between clients and a breakdown of client information.
TypeScript is recommended, but you can also use plain JavaScript. Use a framework of your choice, like Vue, React, Svelte or similar.
If you have some time left you can add additional interactive functionality to your solution.
- User experience
- Visual design
- Code quality
- Interactivity
- React
- TypeScript
- TailwindCSS
- Vite
- i18next (for internationalization)