Beauty Clinic Project

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

Table of Contents

• Demo
• Scripts
• Project structure
• Code conventions
• Installation

Demo

Here is a working live demo: link

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

2. Install NPM packages

npm install

3. Add .env files to the root of the project
4. Run project

npm run dev

Back To The Top