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
orpnpm
oryarn
After that the syntax is the same as npm
e.g. npm install
becomes pnpm install
.
npm install
orpnpm install
oryarn
npm run dev
orpnpm run dev
oryarn run dev
and open the browser athttp://localhost:3000
npm run build
orpnpm run build
oryarn run build
After creating the production build, run:
npm run preview
oryarn run preview
npm run serve
orpnpm run serve
oryarn run serve
and open the browser athttp://localhost:4173