Skip to content

Latest commit

 

History

History
370 lines (340 loc) · 16.3 KB

README.md

File metadata and controls

370 lines (340 loc) · 16.3 KB
Raw

Beauty Clinic Project

Website for beauty clinic that offers hand crafted natural treatments for their clients

Table of Contents

Demo

Here is a working live demo: link

Project Image

Back To The Top

Scripts

Name Description
npm run start Start the project in development mode
npm run start:prod Start the project in development mode with production envs
npm run build Build the project for production
npm run build:dev Build the project with development envs
npm run build:analyze Build and visualize chunks of vite bundle
npm run preview Start already built project with build-like command
npm run codegen Run graphql codegen
npm run pretest Helper script to ensure all required modules exists by the time of testing
npm run test Run unit tests
npm run test:coverage Run unit tests with collecting coverage
npm run test:mutation Run mutation tests
npm run test:e2e:open Run e2e tests with opening separate cypress application
npm run test:e2e:run Run e2e tests to run just in terminal
npm run lint:check Check for linter errors
npm run lint:fix Fix linter errors
npm run format:check Check for formatting issues
npm run format:fix Reformat all files with formatting issues
npm run prepare Helper script for husky. Try not to use it directly
npm run pre-commit Helper script for husky. Try not to use it directly

Project structure

Project Root
  • /.github - GitHub-specific configuration
    • /workflows - CI/CD actions
      • preview.yml - "preview" actions flow
  • /.husky - Husky configuration (GitHub hooks)
  • /.vscode - Optional folder for local VSCode editor configuration
  • /dist - Folder for production build
  • /docs - Project documentation folder
    • /assets - Screenshots and related assets for docs
  • /node_modules - External packages, created after npm install
  • /src - Project source code folder
    • /api - GraphQL server integration
      • /generated - Generated hooks and documents from GraphQL schema
      • /graphql - GraphQL queries to backend
    • /assets - Assets (e.g., '.png', '.svg', '.jpg', '.webp')
    • /components - Shared components
    • /config - General configurations (e.g., Apollo client)
    • /constants - General constants
    • /containers - Larger components excluding layouts
    • /hooks - Reusable hooks
    • /layouts - Reusable large page parts (e.g., headers, footers)
    • /pages - Project pages
    • /routes - react-router-dom routes
    • /store - Globally managed application state
    • /theme - Global styling
    • /types - Global types
    • /utils - Reusable functions
    • /validations - Validation schemas for forms
  • /tests - Project tests folder
    • /e2e - Integration (e2e) tests
      • /features - Feature files (user stories)
      • /fixtures - E2e testing constants
      • /plugins - Plugins
      • /support - Main integration tests folder
        • /step-definitions - Implementations for feature files
        • commands.ts - Custom e2e commands
        • index.ts - Main file searched by Cypress package
    • /mutation - Mutation tests
      • /reports - Mutation test reports
      • stryker-incremental.json - Incremental file
    • /unit - Unit tests
      • /coverage - Unit test coverage
      • /mocks - Reusable mock data
      • /src - Tests reflecting global src folder structure
      • /utils - Test utilities
      • setupTests.ts - Global test setup

Back To The Top

Code conventions

General

  • Use default exports for functions, components, hooks etc
  • Avoid using useEffect hook and use it the last resort
  • Prefer using flex or grid over absolute of fixed position
  • Optimal code lines count in file is up to 100, approximate max code lines in file is 200. If this rule is broken, refactoring is needed (creating another component, splitting logic in custom hook etc)
  • All related business logic should be moved in custom hook if there is 3 or more related parts
  • Handler names should follow the pattern handleSomeAction, for example handleButtonClick
  • Handlers should be moved above return statement to make our jsx as clean as possible
  • All methods in reusable hooks should be wrapped inside useCallback
  • All application-level constants should be in uppercase
  • All pages should be lazy loaded using React.lazy

Images

  • You should use vite-plugin-svgr for importing svg as <svg> dom element like following: @assets/icons/instagram.svg
  • You should use vite-plugin-svgr for importing svg as <img> source like following: @assets/icons/instagram.svg?url
  • Svgs, imported by vite-plugin-svgr should be in pascal pase using pattern IconNameIconSvg, for example importing facebook icon should look like following: import FacebookIconSvg from "@assets/icons/facebook.svg"

Styles

  • You should use only default imports from mui (because it is more performant)
  • You should use styled components for styling

Typescript

  • You should use type keyword to declare types instead of interface in all places except extending external packages
  • Types should be in pascal pase (start from capital letter)
  • Props for component should be in the same file just above component declaration
  • Props for component should be named using pattern ComponentNameProps, for example props for component Footer should have name FooterProps

Back To The Top

Installation

  1. Clone the repo
git clone https://github.com/mhevyk/beauty-clinic.git
  1. Install NPM packages
npm install
  1. Add .env files to the root of the project
  2. Run project
npm run dev

Back To The Top