Front-End History Course

This application will interact with an API to manage and display a course folder structure, enabling users to track their progress by marking courses as completed.
Explore the docs »

Table of Contents

1. About The Project
2. Planning of versions
3. Patterns and Technologies
4. Folder structure
5. License
6. Contact

About the project

This Angular-based project consumes an API that returns a folder structure containing courses. The user can view this structure and mark which courses have been completed. This project aims to build an intuitive interface for progress tracking through a dynamic tree structure, utilizing checkboxes for marking completed content.

Key Features:

• Fetch and display the folder structure of courses from the API.
• Visualize the structure in a tree format, with expandable nodes.
• Enable users to mark courses as completed using checkboxes.

(back to top)

Planning of versions

V1

• Add .ts format
• Save path folders as json
• Add semantic
• Change the color of progress bar in the video tag - https://css-tricks.com/some-innocent-fun-with-html-video-and-progress/
• Show popup to confirm do mark all
• When click on close, save the progress
• Fetch course structure from API
• Display folder structure as a tree view with checkboxes
• Implement course progress tracking (mark courses as completed)
• Mark the video as completed automatically when the user watches it in full
• Add the time that the video stopped

V2

• Show how many times the video has
• Add option to reset the progress of video
• Light-Dark Theme
• Automaticaly reproduction
• Add the date that finished watching the video
• Add option to load image as banner automatically
• Show the progress in percentage

Patterns and Technologies

Technologies:

• Angular: Framework for building the front-end application.
• HTML/CSS: For styling and structuring the front-end layout.

Design Patterns:

• Component-based architecture: The application uses Angular's component system for modularity and reusability.
• Service layer: For API interactions and data management.

(back to top)

Folder structure

build
dist
electron
public
server
src
└── app
    ├── components
    ├── domain
    ├── rxjs
    ├── services
    ├── tree-table
    ├── utils
    ├── app.config.ts
    ├── app.css
    ├── app.html
    ├── app.routes.ts
    ├── app.spec.ts
    └── app.ts
└── environments
index.html
main.ts
styles.css
.editorconfig
.gitignore
.prettierrc
angular.json
package-lock.json
package.json
README.md
tsconfig.app.json
tsconfig.json
tsconfig.spec.json

Comandos

• Para gerar a versão do exe, rode o comando abaixo:

npm run dist

• O arquivo gerado estará na pasta /release

(back to top)

License

This project is under the APACHE 2 license. For more information, see LICENSE.

(back to top)

Contact

• Linkedin: Adolfosp
• Email: adolfo.poiatti@gmail.com

(back to top)