React SPA Dashboard, Flex with fixed scrolls

Wireframe sketch to map complex flexbox layout

React SPA Dashboard

I built UX/UI components in HTML/CSS for a React SPA web application

Wireframe Sketch

React SPA components are set within a Flex layout shell. This React component had two static scrolling inner components. The app is both a mobile-first layout as well as a desktop layout.

My responsibility was to build the HTML/CSS portions and hand-off component resources to the React developer.

Map sketch for complex Flexbox layout

Flexbox structure sketch for React SPA web app

Sketch to map flexbox structure for React SPA web app

This sketch maps multiple flexbox containers, indicating flex direction, for a React SPA web app.

The project requires a shell container with an inner component. The component has two inner scrolls for users to perform tasks. The layout requires fluid flexbox containers with static scrolling elements that are also fluid and responsive.

React/SPA component with inner scrolls

Post A Job Panel

SPA component with inner scroll elements

This is a screenshot showing the inner component for a React SPA app.

This component is designed to fit into a responsive shell with a sidebar. The two scrolling elements are also responsive and reposition themselves for mobile browsers.

The red line in the sketch represents where this part fits.