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 or findByRole)
  • 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, and npx 8.19.3.
• To be able to develop locally, run yarn run dev and browse localhost: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