Getir Market
Live Preview on CodeSandbox
Introduction
Getir Market is an implementation of my interview assignment given by Getir. This is a project that converts a Figma design into a modern React application. You can find detailed information in assignment.pdf.
Implementation
-
To be able to analyze in detail, I broke down the task into smaller pieces.
- Creating main responsive layout struture using media queries, flex and grid properties.
- Transforming Figma elements into React components pixel perfectly using rem and em units.
- Creating components from scratch in order to obtain an easy-to-maintain and easy-to-test codebase.
- Creating dev json server api.
- Creating powerful global state management.
- Creating a consistent styling infrastructure by using Tailwind, and BEM naming conventions
- Testing application by simuliating the end user behaviours
-
I handled the context operations individually to have a separation of concerns.
-
I applied the Clean Code Naming Conventions and the Single Responsibility Principle to write clean tests.
-
We have Redux, React-Redux, and Redux-Toolkit libraries to create a global state management infrastructure.
- I avoided using Redux because of its suggestion to use Redux-Toolkit.
- I implemented React-Redux and Redux-Toolkit libs to work together because of their efficiency.
Tooling
- React: An open source JavaScript library for building UIs
- react: Core React library
- @types/react: Type definitions for
React
- react-dom: Renders React to DOM
- @types/react-dom: Type definitions for
ReactDOM
- TypeScript: A strongly typed language built on top of JavaScript.
- typescript: Core TypeScript programming language
- Vite: Next Generation Frontend Tooling.
- @vitejs/plugin-react: The all-in-one Vite plugin for React projects.
- vitest: A blazing fast unit test framework powered by Vite.
- Tailwind CSS: A utility-first CSS framework for rapidly building custom user interfaces.
- Postcss: PostCSS is a tool for transforming styles with JS plugins.
- autoprofixer: PostCSS plugin to parse CSS and add vendor prefixes to CSS rules.
- Redux: A Predictable State Container for JS Apps
- react-redux: Official React bindings for Redux
- @reduxjs/toolkit: Official toolset for efficient Redux development
- Testing Library: The home for all testing-library projects
- @testing-library/dom: Simple and complete DOM testing utilities that encourage good testing practices.
- @testing-library/jest-dom: Jest matchers (e.g. toHaveClass, toBeChecked) to test the state of the DOM
- @testing-library/react: React DOM testing utilities (e.g. .queryByText, .getByRole)
- @testing-library/user-event: Fire events the same way the user does
- ESLint: A pluggable linting utility for JavaScript, JSX, and TSX
- eslint: A tool for identifying and reporting on patterns found in ECMAScript/JavaScript code.
- eslint-config-airbnb: Airbnb JavaScript style guide
- eslint-config-airbnb-typescript: Enhances Airbnb's ESLint config with TypeScript support
- eslint-plugin-import: Adds support linting of ES2015+ (ES6+) import/export syntax
- eslint-import-resolver-typescript: Adds
TypeScript
support to eslint-plugin-import - eslint-plugin-jsx-a11y: Static AST checker for accessibility rules on JSX elements
- eslint-plugin-react: React specific linting rules for eslint
- eslint-plugin-react-hooks: Enforces the Rules of Hooks
- eslint-plugin-testing-library: ESLint plugin to follow best practices and anticipate common mistakes when writing tests with Testing Library (e.g. when to use
getByRole
orfindByRole
) - eslint-plugin-jest-dom: ESLint plugin to follow best practices and anticipate common mistakes when writing tests with jest-dom
- eslint-plugin-tailwindcss: Rules enforcing best practices while using Tailwind CSS
- @typescript-eslint/eslint-plugin: Monorepo for all the tooling which enables ESLint to support TypeScript
- @typescript-eslint/parser: An ESLint parser which leverages TypeScript ESTree to allow for ESLint to lint TypeScript source
- Serve: Static file serving and directory listing.
- JSDOM: A JavaScript implementation of many web standards.
- Lodash: Lodash modular utilities.
- Faker: Generate massive amounts of fake contextual data.
- MSW: Seamless REST/GraphQL API mocking library for browser and Node.js.
- @mswjs/data: Data modeling and relation library for testing JavaScript applications.
Usage
- The project built with
node v19.2.0
,yarn 1.22.19
, andnpx 8.19.3
. - To be able to develop locally, run
yarn run dev
and browselocalhost:5173
Script
Command | Description |
---|---|
yarn install |
Install all dependent application packages |
yarn run dev |
Start a local development web server at localhost:5173 using vite |
yarn run test |
Run the full test suite using Vitest |
yarn run build |
Bundle application for Production using vite |
Further Development
- The following topics can be considered for further development:
- Research differences between msw worker and msw server.
- Research and fix the
"Some chunks are larger than 500 KiB after minification"
build warning. - Add ability to save basket items and filters to database.
- Refactor search widgets using a single reusable component.
- Refactor context and service elements that have a similar structure using reusable modules.
- Research and implement cypress testing infrastructure.
Reference
- Figma
- Animista
- Blog: How To Test a React App with Jest and React Testing Library by Alyssa Holland
- Blog: Testing Implementation Details by Kent C. Dodds
- Blog: Common mistakes with React Testing Library by Kent C. Dodds
- Blog: Build a React Switch Toggle Component by James Dietrich
- Blog: How did I test my pagination component by Serdar ŞEN
- Github: reduxjs/cra-template-redux-typescript
- Github: cloud-city-crafted/react-typescript-webpack-template
- Github: do-community/doggy-directory
- Github: mswjs/examples/rest-react
- Github: vitest/react-testing-lib-msw