Viridios AI - Front-End Test

TypeScript - React - Next.js

From Figma to Code

Live Demo

Achievements

Achievements

It took me about 8 hours to build only the first project assigned - Sustainable Development Goals. The application displays all the required features. Also, it's totally responsive and accessible. The UI has been thought to reflect the values of Viridios AI. Finally, all the architecture has been set up (pages, routes, navigation, etc.)

Principal Features

1. Tech stack : Next.js / TypeScript / Semantic HTML / CSS

Use of React Table Library to display the Countries Data Table.

2. Maintainability

The React components of the application have been designed to be reusable. Moreover, I extracted the SVG icons from the Noun Library and converted it into a modular component. Data is centralized as well as the Design System. Code is commented for the future myself, and colleagues.

3. Next.js

Use of Next.js features : router, Image component, etc.

4. TypeScript

I've tried to type everything I could, especially data. However, the libraries I've used were not totally typed.

5. Fully responsive app

You can use the app on smartphone as well as on computer. The Table is also responsive.

6. Full A11Y

That's some important point to me: the application I've managed to achieve is entirely accessible.

7. Design

I've chosen a Colors Schemed supposed to project Viridios' work and value.

8. Design System

I tried to build a Design System through my code. This is what React and Emotion.js allow us to do. I used an Emotion theme, within which I integrated reusable properties (colors, dimensions, etc.) throughout the application. This way, the maintainability and scalability of the application gets a lot easier. The colors referenced in the Emotion theme refer to CSS variables. This allows to benefit from the performance of pure CSS, but also from TypeScript autocompletion (with the Theme object).

9. Browser Support

The application has been designed to support most browsers. Some modern CSS properties have not been used because they are not sufficiently supported (eg. Flex gap).

Installation

1 - Clone the Project's repository

git clone https://github.com/Lulololu/viridios-test

2 - Install NPM Packages / Dependencies

npm install

3 - Development Server

npm run dev

4 - Production build

npm run build