This project is a challenge for the NinjaOne selection process. The goal is to create a simple device manager application using React and TypeScript.
- Responsive design
- List devices
- Add/Update/Delete devices
- Filter devices by multiple system names
- Sort devices by name, system name, ascending and descending
- Search devices by name
- Reset filters
- Node.js 18.x or later
- PNPM 8.x or later
The detailed documentation for this project is available in the Notion.so platform.
You can access the live demo of this project here.
The application is responsive and works on desktop, tablet, and mobile devices.
- Desktop Version:
- Tablet and Mobile Versions:
- Clone the repository
- Install the dependencies with
pnpm install - Start the development server with
pnpm dev:standalone. The application will be available athttp://localhost:5173
Note: This application supports mocked API using mockoon. You can import the
mockoon-crud.jsonfile to Mockoon to use the mocked API. thepnpm dev:standalonecommand starts the application on port5173and the mocked server on port7000. The REST url ishttp://localhost:7000.
Important: The application uses the REACT_APP_API_URL environment variable to set the API URL. You need to create a .env file in the root of the project with the following content to set the API URL:
VITE_USER_REST_API_URL=http://localhost:7000Restart the development server after creating the .env file.
pnpm dev: Start the development server without mocked APIpnpm dev:standalone: Start the development server with mocked APIpnpm build: Build the applicationpnpm test: Run the unit tests with Vitest and V8pnpm test:watch: Run the unit tests in watch modepnpm coverage: Run the unit tests with coveragepnpm test:e2e: Run the end-to-end tests with Playwrightpnpm test:e2e-ui: Run the end-to-end tests with Playwright in UI modepnpm lint: Run the linter with ESLintpnpm format: Format the code with Prettier
Note: the
pnpm devcommand needs to be run after thepnpm dev:standalone:mockooncommand to start the development server with the mocked API. The easiest way to run both commands is to usepnpm dev:standaloneto start the development server with the mocked API in concurrent mode.
- React JS with React Hooks
- TypeScript for better type checking
- PNPM for faster package management
- Vite for faster development
- @vitejs/plugin-react-swc with SWC for Fast Refresh
- Shadcn-ui for the UI components
- Tailwind CSS for utility-first CSS
- React Hook Form for better form handling
- ZOD for schema validation
- Redux Toolkit for faster development
- RTK Query for API REST
- Mockoon for mocking API on development environment
- Vitest with V8 as provider for faster testing
- Playwright for end-to-end testing, browser automation and codegen
- ESLint for linting
- Prettier for formatting
- Pretty-Quick for running Prettier on staged files
- Husky for pre-commit hooks
- Commitlint for commit message linting
./
|-- .github
| |-- workflows # Github Actions
| |-- deploy.yml # Deploy to Amplify workflow. It runs after lint and test workflows pass
| |-- linter.yml # Linter workflow with ESLint and Prettier
| |-- playwright.yml # Playwright workflow for end-to-end tests
| |-- vitest.yml # Vitest workflow for unit tests coverage with V8
|-- .vscode
| |-- settings.json # VSCode settings to enforce Prettier and ESLint
|-- public # Static files
|-- src
| |-- assets # Images
| |-- components # Reusable components
| |-- containers # Components that hold other components and/or uses Shadcn-ui components
| |-- modals # Modal components
| |-- ui # raw UI components like buttons, inputs, etc from Shadcn-ui
| |-- config #constants for mapping select/dropdown options
| |-- e2e # End-to-end tests with Playwright
| |-- hooks # Custom hooks
| |-- pages # Application pages
| |-- store # Redux store
| |-- api # API REST with RTK Query
| |-- slices # Redux slices
| |-- types # Custom types
| |-- utils # Utility functions