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.

serdarsen/getir_market