Git Product home page Git Product logo

test-atypic's Introduction

I wrote this test when I worked at Atypic. This repository is my solution.

Le but de ce test est de faire le développement et l'intégration d'une petite app qui alterne entre un tableau d'utilisateurs et une fiche profil, en utilisant la maquette et les images fournies.

Le tableau est divisé en plusieurs colonnes : Nom, Email, Âge et Ville. On doit pouvoir trier le tableau par n'importe quelle colonne, dans les deux sens.

Chaque utilisateur a une fiche associée à laquelle on peut accéder en appuyant sur le bouton (+) en bout de ligne.

Lorsqu'on ouvre une fiche, le tableau est remplacé par la fiche et un bouton "Retour" apparaît dans le header. La fiche affiche les mêmes informations que le tableau avec en plus une image et un texte informatif.

Tous les fichiers nécessaires sont fournis dans le dossier ./files/. Les données utilisateurs doivent être loadés de manière asynchrone avec le fichier users.json.

Tout doit se passer dans la même page, sans chargement. Vous êtes libre d'employer les technologies (librairie, framework, préprocesseurs, ...) que vous voulez. Pour information, nous utilisons ReactJS avec Webpack, Babel et Sass.

Si vous avez le temps, n'hésitez pas à ajouter des fonctionnalités ou à faire du responsive !

POLICE :
Roboto https://fonts.google.com/specimen/Roboto

COULEURS :
#e4e8e6 pour les lignes du tableau impaires
#f8f6f4 pour les lignes du tableau paires
#435667 pour le titre de la home, pour les en-têtes du tableau, pour l'arrière-plan du bouton "Retour", et pour le nom de l'utilisateur dans la fiche
#1e1f1f pour le reste des textes

N'hésitez pas à utiliser le .psd si vous avez photoshop. Si vous ne l'avez pas, faites au mieux pour respecter la mise en page : on veut surtout un layout créé proprement, pas du pixel perfect.

Bon courage !

test-atypic's People

Contributors

old-raspberryeuphoria avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.