taylormckay68 / fed-ii-assessment Goto Github PK

Ovestock Assessment (FED II)

For styling it comes with SASS, Emotion, and TailwindCSS ready to use. Choose your favorite CSS framework and get started. It also includes the @namics/stylelint-bem plugin for BEM style validation.

Using the Dog API , we want to:

• fetch a list of breeds.
• present this list in some sort of sortable way to be presented to the user.
• We want a user to be able to select a breed.
• After selecting we will use the breed specific API endpoint to fetch 3 or more images to present on the screen.
• Write tests asserting that we've displayed the images

If you care to mock fetch requests, you can read the docs for jest-fetch-mock here.

• Vite Next generation frontend tooling.
• Babel The compiler for next generation JavaScript.
• React Router Declarative Routing for React.js
• ESLint Find and fix problems in your JavaScript code.
• Prettier Opinionated code formatter.
• Stylelint A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.
• @emotion/react Emotion is a library designed for writing css styles with JavaScript.
• @emotion/styled Styled is a way to create React components that have styles attached to them.
• Sass Syntactically Awesome Style Sheets.
• TailwindCSS Rapidly build modern websites without ever leaving your HTML.
• Jest Delightful JavaScript Testing.
• Testing Library The React Testing Library is a very light-weight solution for testing React components

• prop-types Runtime type checking for React props and similar objects.
• react-error-boundary Simple reusable React error boundary component.
• eslint-config-airbnb Airbnb's extensible shared config.
• eslint-plugin-import Linting support of ES2015+ (ES6+) import/export syntax.
• eslint-plugin-jsx-a11y Enforce accessibility best practices for React components.
• eslint-plugin-unused-imports Report and remove unused es6 modules.
• postcss PostCSS is a tool for transforming CSS with JavaScript plugins.
• stylelint-config-idiomatic-order Order your styles based on idiomatic-css.

To get a local copy up and running follow these simple example steps.

• Recommended node : >=16.13.0
• npm or pnpm or yarn

After that the syntax is the same as npm e.g. npm install becomes pnpm install.

• npm install or pnpm install or yarn

• npm run dev or pnpm run dev or yarn run dev and open the browser at http://localhost:3000

• npm run build or pnpm run build or yarn run build

After creating the production build, run:

• npm run preview or yarn run preview

• npm run serve or pnpm run serve or yarn run serve and open the browser at http://localhost:4173