Skip to main content
100%

Notes from Hack Oregon Jan 24 2017 Front-End Workflow Meeting

✓ Published0🌍 Public
Aallilevine
Last edited Jan 25, 2017
Created on Jan 25, 2017

This example documents the front-end workflow and tooling decisions from a Hack Oregon meeting, outlining a React and Redux-based architecture for connecting project story cards across a shared platform. It specifies the use of React Router for URL routing, React Storybook for building and documenting reusable components, and a component library referencing d3 methods for layout while relying on React Motion for animation. The notes also cover file structure conventions, duck-pattern Redux organization, linting, testing with coverage above 80%, and a GitHub-sourced component reference rather than npm packages.

AI-generated description

Similar vizzes

Loading thumbnail…

React cheatsheet

This animated React cheatsheet presents reusable code patterns for hooks, state management, and component composition. The example uses React hooks including `useState`, `useEffect`, `useRef`, `useReducer`, and `useContext`, alongside custom hooks like `useTimeout` and higher-order components. It demonstrates conditional JSX rendering, callback-based state updates, and the containment pattern via props slots. The animation shows code snippets transitioning between sections, sourced from a gist by abernier.

Aabernier
63% match
Loading thumbnail…

React 101

This React 101 example demonstrates a hands-on teaching environment for the React library, showcasing functional components and props through a simple todo list. The header component (`Header.js`) dynamically changes its greeting and text color based on the current hour of the day, while the main list renders three todo items from a static `todosData` array. The app uses `ReactDOM.render()` to mount the root `App` component, which combines `Header`, `TodoItem`, and `Footer` components, with each `TodoItem` receiving its data via React props. Styling is applied through a linked CSS file, and the example leverages React 16.13.1 from unpkg.

Ddata-inside
63% match
Loading thumbnail…

Gist cd3cd287bdc26f3a310b12096be56102

This interactive timeline charts a developer’s evolving tech stack from 2014 to 2017, with planned tools for the future. It uses a force-directed graph via `d3.forceSimulation` to position nodes representing languages, frameworks, and APIs, while edges connect each technology to the year it was adopted. The data comes from a Markdown file listing monthly entries, rendered as a React component that parses the file into nodes and links. Hovering reveals tool names, and the graph’s layout adapts dynamically to the growing list of skills.

Aamazingandyyy
62% match
Loading thumbnail…

Resources for getting started with local-first software development

This visualization presents a curated resource guide for local-first software development, sourced from a GitHub gist. It shows a linear reading flow, beginning with foundational background material and progressing to hands-on tutorials. The React-based layout uses Automerge and Automerge Repo as the core libraries, with descriptions that highlight CRDT merge scenarios and a browser-synced counter app. The guide’s structure and linked resources are presented as a static, annotated list, emphasizing the path from conceptual videos to practical code examples.

HHerbCaudill
60% match
Loading thumbnail…

Gist 7dc4898b7ffc460291957e8784871131

This example demonstrates a React application that integrates Redux for state management with asynchronous actions via Redux Thunk. It sets up a centralized store using `createStore`, applies the `thunk` middleware, and connects the app through a `Provider` component. The root component is rendered into the DOM with `react-dom`’s `render` method, using `window.__REDUX_DEVTOOLS_EXTENSION__` for debugging. The code shows how to wire together React, Redux, and Redux Thunk, though it does not display any visual data or charting logic, focusing solely on the application’s foundational architecture.

Aamortka
60% match
Loading thumbnail…

Fork of React Test (NW)

A React demonstration showcasing a todo list, an interactive form, and a step counter with conditional button disabling. The page presents a preset todo array, a styled input panel that displays submitted text, and a circular counter that increments or decrements. Built with React 19’s `useState` hook, the form captures submissions via `FormData` from the event target, while the counter buttons disable the decrement action below zero, all styled with custom CSS for hover and active states.

NNita
60% match
Loading thumbnail…

Fork of React Test (NW)

This example presents two interactive React components: a counter with increment and decrement buttons, and a form with a to-do list that displays user input. The counter updates a visual number display, while the form shows submitted text and tracks button hover and click states. The code uses React 19's `useState` hook for state management and handles form submission via `FormData`. Styling is applied through an external CSS file, with dynamic color changes for button feedback. The components are rendered together using `ReactDOM.createRoot`.

NNita
60% match
Loading thumbnail…

React & D3 Barebone

A minimal web application renders the text “Hello React!” to the browser. The example combines React 17, ReactDOM, and D3 6.6 to demonstrate a basic setup. The `index.html` file loads these libraries from a content delivery network, while `index.js` imports React and ReactDOM, defines a simple arrow function component, and uses `ReactDOM.render` to mount it to the `#root` element. The page includes custom CSS to remove body margins and hide overflow.

WWolfgang
60% match