Giter VIP home page Giter VIP logo

billed-app-fr-front's Introduction

L'architecture du projet :

Ce projet, dit frontend, est connecté à un service API backend que vous devez aussi lancer en local.

Le projet backend se trouve ici: https://github.com/OpenClassrooms-Student-Center/Billed-app-FR-back

Organiser son espace de travail :

Pour une bonne organization, vous pouvez créer un dossier bill-app dans lequel vous allez cloner le projet backend et par la suite, le projet frontend:

Clonez le projet backend dans le dossier bill-app :

$ git clone https://github.com/OpenClassrooms-Student-Center/Billed-app-FR-Back.git
bill-app/
   - Billed-app-FR-Back

Clonez le projet frontend dans le dossier bill-app :

$ git clone https://github.com/OpenClassrooms-Student-Center/Billed-app-FR-Front.git
bill-app/
   - Billed-app-FR-Back
   - Billed-app-FR-Front

Comment lancer l'application en local ?

étape 1 - Lancer le backend :

Suivez les indications dans le README du projet backend.

étape 2 - Lancer le frontend :

Allez au repo cloné :

$ cd Billed-app-FR-Front

Installez les packages npm (décrits dans package.json) :

$ npm install

Installez live-server pour lancer un serveur local :

$ npm install -g live-server

Lancez l'application :

$ live-server

Puis allez à l'adresse : http://127.0.0.1:8080/

Comment lancer tous les tests en local avec Jest ?

$ npm run test

Comment lancer un seul test ?

Installez jest-cli :

$npm i -g jest-cli
$jest src/__tests__/your_test_file.js

Comment voir la couverture de test ?

http://127.0.0.1:8080/coverage/lcov-report/

Comptes et utilisateurs :

Vous pouvez vous connecter en utilisant les comptes:

administrateur :

utilisateur : [email protected] 
mot de passe : admin

employé :

utilisateur : [email protected]
mot de passe : employee

billed-app-fr-front's People

billed-app-fr-front's Issues

No 404 error page

If the user enters an incorrect path, he is redirected to the home page

No 401 error page

When I try to access employee page with no credential in localStorage
image

File upload no longer works

Image upload no longer works when I want to create an invoice

The part that retrieves the file from the code works

image

The console.log is displayed correctly with the file

image

So, after that it's time to check the file extension

image

This part also works, the console.log and the message display work
image
image

And that's when the problems come...

image

On Edge/Chrome/Opera

image
The formData is empty while the console.log is able to retrieve the data

On Firefox

image
The formData works better, but there is still no file in the "file" field.

image

Oh, and when I upload the image and even if I don't press the submit button, it creates a bill

I could not test with Safari because I have a security error that prevents me from connecting to the website.

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.