Overview:
The project is focused on learning Tailwind CSS within the Angular framework. The project is still a work in progress and features items such as Sidebar, Dark Theme, Navbar, Footer, Auth Module, Dashboard Module, Standalone components, Angular Signals, Multi-Theme, Tests E2E, User Module, Guards, and Animations. It also provides commands for various tasks like starting the server, linting, and testing. The project utilizes packages like angular-svg-icon, apexcharts, ng-apexcharts, prettier, prettier-plugin-tailwindcss, tailwind-scrollbar, and tailwindcss.
Features:
- Sidebar: Provides a convenient navigation menu.
- Dark Theme: Offers a dark color scheme interface.
- Navbar: Easily accessible navigation bar.
- Footer: Information at the bottom of the page.
- Auth Module: Handles user authentication.
- Dashboard Module: Displays key information at a glance.
- Standalone components: Independent reusable elements.
- Angular Signals: Communication within Angular components.
- Multi-Theme: Supports multiple themes for customization.
- Tests E2E: End-to-end testing functionalities.
Installation:
To install the project dependencies, follow these steps:
- Run
npm install
to install all the required packages. - Start the server in development mode using
npm start
. - Perform linting on the project with
npm run lint
. - Use
npm run prettier
to run Prettier on the entire source folder. - Check for Prettier errors using
npm run prettier:verify
. - Execute Prettier on only staged files with
npm run prettier:staged
. - Run playwright end-to-end tests with UI using
npm run e2e-ui
.
Summary:
The project is a practical approach to learning Tailwind CSS with Angular, incorporating essential features like sidebar, dark theme, navigation components, and modules for authentication and data visualization. It aims to provide a comprehensive understanding of these technologies through practical implementation and testing methodologies.