Overview
**Billed** is a full-stack web application developed in the context of the **OpenClassrooms** training path. The project is split into a **frontend** application and a **backend API** service, both intended to be run locally. It illustrates end-to-end development practices: organizing the workspace, running backend and frontend, writing and running tests with **Jest**, and checking **code coverage**.
Built with a classic frontend/API architecture, Billed helps practice professional workflows: cloning and organizing repositories, installing dependencies, launching services, and validating behaviour through automated tests.
—
Project Details
| Field | Value |
| —————- | ——————————————————————– |
| **Type** | Full-Stack Web Application (training project) |
| **Context** | OpenClassrooms – Student Center |
| **Year** | Training project |
| **Status** | Educational / Portfolio |
| **Technologies** | JavaScript/HTML/CSS (frontend), Node.js (backend), Jest, live-server |
—
The Challenge
In a training context, the main goals are to:
– **Organize the workspace** by cloning and grouping backend and frontend repositories in a single parent folder (`bill-app`).
– **Run the stack locally**: start the backend API first, then the frontend (e.g. with `live-server` on `http://127.0.0.1:8080/`).
– **Apply testing practices**: run the full test suite with Jest, run a single test file, and interpret coverage reports.
– **Use the application** with distinct roles: administrator and employee accounts, to explore different behaviours and permissions.
—
The Solution
Billed is a **dual-repository** setup: a backend API and a frontend app, designed to be run and tested on the developer’s machine.
Workspace layout
A typical layout is:
“`text
bill-app/
├── Billed-app-FR-Back (backend API)
└── Billed-app-FR-Front (frontend)
“`
– **Backend**: [OpenClassrooms-Student-Center/Billed-app-FR-Back](https://github.com/OpenClassrooms-Student-Center/Billed-app-FR-back) – follow its README to install and run.
– **Frontend**: [OpenClassrooms-Student-Center/Billed-app-FR-Front](https://github.com/OpenClassrooms-Student-Center/Billed-app-FR-Front) – `npm install`, then serve (e.g. `live-server`) and open `http://127.0.0.1:8080/`.
Frontend application
– Served locally (e.g. via **live-server** on port 8080).
– Consumes the backend API for data and authentication.
– Provides at least two user roles for login and exploration:
– **Administrator**
– **Employee**
Testing with Jest
– **Full suite**: `npm run test`
– **Single test file**: e.g. `jest src/__tests__/your_test_file.js` (with `jest-cli` installed globally if needed).
– **Coverage**: reports are generated so they can be viewed in the browser at `http://127.0.0.1:8080/coverage/lcov-report/`.
—
Technical Architecture
Repositories
| Repo | Role |
| ———————– | ————————————————————- |
| **Billed-app-FR-Back** | REST API – data and business logic; must be started first. |
| **Billed-app-FR-Front** | Frontend – UI and user flows; depends on the running backend. |
Test stack
– **Jest** for unit and integration tests.
– **Coverage** output (e.g. `lcov`) for inspecting covered lines and branches in the report.
Accounts (example credentials from README)
| Role | Email | Password |
| ————- | —————– | ——– |
| Administrator | admin@test.tld | admin |
| Employee | employee@test.tld | employee |
—
Development Process
Local workflow
1. Clone both repositories into a `bill-app` folder.
2. Install and start the **backend** (see backend README).
3. In the frontend repo: `npm install`, then start the dev server (e.g. `live-server`).
4. Open `http://127.0.0.1:8080/` and log in with one of the provided accounts.
5. Run tests: `npm run test`; inspect coverage via the generated report.
Skills practiced
– Organizing a multi-repo workspace.
– Separating and running frontend and backend services.
– Writing and running Jest tests and reading coverage.
– Using role-based access (admin vs employee) in the UI.
—
Results & Impact
As a training project, Billed provides:
– **Clarity**: Clear separation between frontend and backend and a reproducible local setup.
– **Testing**: A concrete Jest setup and coverage workflow.
– **Realism**: Multiple user roles and a full “run backend + frontend + tests” pipeline.
– **Portfolio value**: A compact, presentable example of a full-stack training project with tests and coverage.
—
Technologies Used
Frontend
– HTML, CSS, JavaScript
– live-server (local development)
– Jest (tests)
Backend
– Node.js (see backend repository for stack details)
Development & testing
– npm
– Jest, jest-cli
– Coverage reporting (e.g. lcov)
—
Project Links
– **Backend repository**: [OpenClassrooms-Student-Center/Billed-app-FR-Back](https://github.com/OpenClassrooms-Student-Center/Billed-app-FR-back)
– **Frontend repository**: [OpenClassrooms-Student-Center/Billed-app-FR-Front](https://github.com/OpenClassrooms-Student-Center/Billed-app-FR-Front)
– **OpenClassrooms**: [openclassrooms.com](https://openclassrooms.com)
—
**Author:** Pierre-Yves Léglise
**Company:** [axialdata](https://www.axialdata.net/)
