Ubiquiti Employee Devices Application

This application has been designed and developed keeping Ubiquiti's employees in mind. The app helps the employees to easily and effortlessly search, filter, share and reference one of Ubiquiti's many devices.

Features

Employees are able to:

1. Lookup a device by typing in the search box a device name.
2. Filter devices by product line, by clicking on the filter text.
3. Lookup a device and filter by product line simultaneously.
4. Swith views on the Product List page between list view or grid view by clicking on the grid or list icons.
5. Go to an individual device page which displays more info on the product by clicking on a single device in the list view or grid view.
6. Share their current view and state by simply sharing their URL.
7. Use this application on their phone

Technologies used

This project uses React 18. I also used Typescript, as per Ubiquiti's request and jest for running a few tests.

Challenges?

Deploying to github pages was a bit tricky, based on how my project was setup and that this was a React project. But from frustration comes learning, and I was able to deploy the app.

Keeping MoSCoW in mind, I wanted to get an MVP as soon as possible and then add features / functionality and improve UX. With that mentioned, I only did the responsiveness after the fact, which had it's own challenges. Now I know why people always say mobile first when designing/developing an app.

What is next??

More tests can be added to check all use cases. Refinement on the ease of use after feedback from the employees - perhaps the line height on the Device list page could be increased. Depending on the role of the employee, add more features more specific to their use case.

How to run the project?

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run deploy

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance and then deploys to my master branch in Github.

And that is a wrap for this project. Here is to growing and learning more with every line of code.

Thanks RB