| Angular | NgRx | Tailwind |
|---|---|---|
 |
 |
 |
Workii is a similar project to Workana / Fiver. On this platform it is sought that the talents apply to the different workiis (tasks) that have been published, with the aim of being able to get the reward they are giving for doing it. In addition, the creator of the Workii will have to choose between the talents that have applied, this in order to see who is the ideal person to meet the objectives of the Workii.
- Facilitating the connection between job seekers and employers who need talent to complete specific tasks (Workiis).
- Create an easy-to-use and accessible platform for talents to apply for different Workiis and for employers to post and manage their jobs.
- Implement a rating and review system that allows employers to rate talent and talent to rate experience with employers. This will help improve the quality and reliability of the platform..
- Develop a secure and transparent payment system that allows employers to reward talents for work completed and ensure the protection of users' financial data.
- Foster the growth of a community of talents and employers in various areas and skills, which will allow users to find job opportunities in different fields and sectors.
- Promote the adoption of the platform globally, with support for multiple languages and currencies, to expand the scope of job opportunities and the diversity of talent available.
- Establish a support system and resources to help users solve problems, learn about best practices and improve their skills on the platform.
- Build a robust and modular code base that allows the open source community to easily contribute to the development and maintenance of the platform.
- Maintain and constantly improve the platform based on user feedback and market trends, ensuring that Workii remains relevant and useful over time.
- Promote ethical and responsible practices in the use of the platform, through the implementation of a code of conduct and clear policies for users.
Before you start, make sure you have the following:
Note: This project has been generated with Angular CLI version 14.0.5.
- Run the following command to install all the project dependencies
npm i o yarn install (Depends on which package manager you use)
- Remember that you must run the backend of the project for the correct functioning of the frontend (the instructions for this are in its respective repository)
- Finally run the command
ng s -oorng sand navigate to the following linkhttp://localhost:4200/. The application should load automatically, as well as correctly load the changes.
.github
└─ ISSUE_TEMPALTE
└─ ...
.vscode
└─ ...
.src
├─ app
| ├─ Core
| | ├─ guards
| | ├─ interceptors
| | ├─ interfaces
| | ├─ layouts
| | ├─ models
| | └─ state
| | ├─ actions
| | ├─ effects
| | ├─ reducers
| | └─ selectors
| ├─ modules
| | ├─ auth
| | ├─ components
| | ├─ DTOs
| | ├─ guards
| | ├─ interfaces
| | ├─ pages
| | └─ services
| | ├─ dashboard
| | └─ ...
| | ├─ landing
| | └─ ...
| | └─ ...
| └─ shared
| ├─ components
| ├─ directives
| ├─ DTOs
| ├─ lottie
| ├─ services
| ├─ state
| ├─ utils
| └─ validators
├─ assets
| ├─ fonts
| ├─ i18n
| └─ images
└─ environments
...
This project is based on a reactive architecture built on top of Angular and NgRX. NgRX, a Redux implementation for Angular, is used to manage the state of the application through a series of Actions, Reducers, Effects and Selectors.
Actions describe events that occur in the application, Reducers update the state based on these Actions, Effects manage asynchronous tasks, and Selectors extract pieces of information from the state to be used in components.
The project structure follows the Smart/Dumb Components pattern. Smart Components take care of the business logic, interact with services and handle data flow. Dumb Components, on the other hand, are presentational components that receive data through @Inputs and communicate events through @Outputs, allowing them to be reusable and easy to test.
This approach ensures a predictable, efficient and easy to understand architecture, where each part has a clear responsibility, allowing for easier development and maintenance over time.
Note: Although the project did not start with this architecture, it has been gradually migrating to this structure.
Here are some resources for understanding this architecture:
The creation of components with the Angular CLI is recommended, to streamline these processes.
Run the following command ng g c (component-name) to generate a new component. you can also use ng generate directive|pipe|service|class|guard|interface|enum|module.
Run ng build to compile the project. The compilation files will be stored in the directory dist/.
The project does not yet have unit tests, as it is a project that is to be released quickly to the public we will omit this part for now.
We will add the ESLint, Prettier and Material Icon Theme extensions, then go to the VS Code settings and paste the following:
{
"editor.formatOnSave": true,
"prettier.requireConfig": true,
"editor.guides.bracketPairs": "active",
"workbench.iconTheme": "material-icon-theme",
"tabnine.experimentalAutoImports": true,
"typescript.preferences.importModuleSpecifier": "relative",
"editor.codeActionsOnSave": {
"source.organizeImports": true
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"prettier.printWidth": 120,
"window.zoomLevel": 2
}We welcome contributions from anyone who would like to help improve our project. Whether you're an experienced developer or just starting out, there are plenty of ways to get involved.
If you need help using our project, please visit our SUPPORT.md file. This document provides information on how to get help from the community, how to report issues, and where to find additional resources.
Join our Discord community to connect with other contributors and get help from the maintainers. This is a great place to ask questions, get feedback on your ideas, and collaborate with others on the project.
Before you start contributing, please read our CONTRIBUTING.md file. This outlines the contribution guidelines and provides instructions for setting up your development environment, submitting pull requests, and more.
We appreciate all contributions, big and small. Thank you for helping to make our project better!
We take the security of our project seriously. If you discover a security vulnerability, please let us know right away. We will investigate all legitimate reports and do our best to quickly address any issues.
To learn more about our security practices, please read our SECURITY.md file.
Made with contrib.rocks.
Folow us at
