Skip to content

ThomasBTR/Developpez-le-front-end-en-utilisant-Angular

 
 

Repository files navigation

angular npm GitHub repo size
npm current version

Olympic Games Starter

Homepage view

homepage.png

Detail view

detail-page.png

Not-found view

not-found.png

This project was generated with Angular CLI version 15.1.5, Node version 18.14.0 LTS, npm 9.5.0.

Don't forget to install your node_modules before starting (npm install).

Development server

Run npm run start (or ng serve) for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.

Build

Run npm run build (or ng build) to build the project. The build artifacts will be stored in the dist/ directory.

How the code is constructed

As of the architecture already defined at project startup, the current release includes the following:

  • components folder: contains every reusable components
  • pages folder: contains components used for routing
    • home page give homepage view available at standard base path.
    • country-detail page is a detailed view per country, with a summarized number of participation's, and the total of medals won as well as the total of athletes.
    • not-found page can only be available if the data can not be gathered by the service from the dataset.
  • core folder: contains the business logic :
    • servicesfolder : reusable service for business logic.
      Here is currently available OlympicService, that make initial data gathered from asset folder through RxJS Observable.

    • models folders : set reusable typescript interfaces for both initial dataset from datatable and rendering models

      • dataset : interfaces for data gathered currently from a mock (available in src/assets/mock/olympic.json).
        Will be usable with a connected database that contain object following the current models.
      • rendering : interfaces used for rendering data in a couple of chart type (pie and bar).

Best Practise :

  • Update angular requirement to latest angular 15 version
  • Angular Best Practices implemented, especially regarding security.

Visual library :

  • Primeng is used for the visual charts of the application.
  • PrimeFlex is used for the other layout of the application.

About

OCR second project powered by Angular

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 77.3%
  • HTML 13.1%
  • JavaScript 5.9%
  • SCSS 3.7%