This project was started as a take-home challenge for a Senior UX Engineer role. The goal was to make a UX improvement and demonstrate it in design and code.
A POC of an alternative workflow for creating workspaces in Coder's code-server. The app illustrates how users can create workspaces from a single Dialog box walking through template selection, configuration, and build.
The app is built from scratch using reference from the code-server UI and Github repo.
Pull it:
git clone https://github.com/marcomo/coder-react-ui.git
Install dependencies:
npm install
Run it in development:
npm start
View it:
http://localhost:3000
When I got started with Coder, I created a Template based on sharkymark/coder-react. This template had a Create React App basic project set up, so I decided to work from there. I developed this project completely in a Coder workspace and pushed the code out to Github from there.
I developed a Wizard for the Create Workspace flow. The Wizard has three steps:
- Select Template
- Configure
- Build
The Wizard keeps the user informed about the stages of creating a workspace without moving them around various screens. User is in control of where they go next and stay where they started if they cancel.
- All in one screen, no changing routes
- Cancel from step 1 or 2
- Template selection uses same Table UI as Templates page
- Input validation
- Go back to template selection from configuration
- Simple checklist animation of build process
- Stay on Workspaces or go to new Workspace after completion
- New workspace displays in Workspaces view after creation
- React (CRA) and Typescript
- Sass/Dart, CSS Variables
- Material UI components and theme
- MUI experimental CssVarsProvider
- Figma variables and tokens
- Custom theming
- React Router
- Custom Hooks
- Dialog Box
- Transitions and Animation
- Tests
- CI/CD Deployment
- Responsive design
- Accessibility
- Migrate to Vite
- Light mode
- Cache created workspaces
- Table row deselection in (wizard 'select template' step)