Dashboard Epitech

Contributors

Gabriel Huguenin-Dumittan aka @Autosuffisant

Aurélien Schulz aka @Lisieshy

Subject requirements

The subject's requirements are the following

• Manage user authentification through registering and logging
• Linking with application thanks to OAuth2 standard
• Display widgets, edit them, move them, delete them
• Display application's features in a JSON route and the client's attributes

Project's structure

The Dashboard is divided in three primary parts

Front / UI

The UI is the user seen application, allowing him to log-in, see his widgets and edit them as he wishes.

It was created with React JS

Backend server

The server handles the connection protocols, saves and sends widgets to the user's interface and handles the about.json

We made it using ExpressJS

Database

The database holds user's variables and data so on each session they keep their configuration of widgets and personal details.

We chose to design it using MongoDB which can be easily handled through node instances using Mongoose

The services

As asked in the subject, multiples services must be possible to use.

We chose:

• GitHub API
• Spotify API

The widgets

The widgets are by services:

• Spotify:
  • Search an artist
  • Search a track
  • Check your personal informations
• Github
  • Search a project by it's creator
  • Search an user

Containerization

Docker compose is used to handle the UI, the backend server and the database simultaneously

Documentation

Developer documentation of the whole application can be found here

Bonuses

• GitHub

  • Usage of issues
  • Usage of milestones

• UI

  • A color theme changer
  • Encryption of the user's password
  • Dark and bright theme

Preview !

Login screen with registering and functionnal Google OAuth

Application landing page

Connect to APIs and add a new widget

An example of a Widget using Spotify

Dark mode implementation

Full screen, isn't that pretty ?