scaler-assessments

Scaler Contest Platform

This is the repository for the Frontend of Scaler Contest Platform.

Installation

1. Clone the repository:

   git clone https://github.com/KingsGambitLab/assessments.git
   

2. Navigate to the project directory:

   cd assessments/frontend
   

3. Install dependencies using Yarn:

   yarn install
   

Available Commands

In the project directory, you can run the following commands:

Development Server

Start the development server:

yarn dev

This command runs the development server powered by Vite.

Build

Build the production-ready code:

yarn build

This command builds the project using TypeScript and Vite.

Linting

Lint the code:

yarn lint

This command runs ESLint to perform code linting.

Lint Fix

Automatically fix linting issues:

yarn lint:fix

This command runs ESLint with the --fix flag to automatically fix linting issues when possible.

Preview

Start a preview server:

yarn preview

This command starts a server to preview the production build.

Storybook

Run Storybook in development mode:

yarn storybook

This command starts the Storybook development server.

Build Storybook

Build the Storybook static files:

yarn build-storybook

This command creates a production-ready build of the Storybook.

Folder structure and conventions

Below is the structure of src folder in the code base

├── components
│   ├── SampleComponent
│   │   ├── SampleComponent.jsx
│   │   ├── SampleComponent.module.scss (Optional)
│   │   ├── index.js
│   ├── sampleHoc
│   │   ├── sampleHoc.js
│   │   ├── index.js
├── pages
│   ├── SamplePage
│   │   ├── SamplePage.jsx
│   │   ├── SamplePage.module.scss (Optional)
│   │   ├── index.js
│   │   ├── SamplePageComponent (Optional if you need to split your page into multiple smaller components)
│   │   │   ├── SamplePageComponent.jsx
│   │   │   ├── SamplePageComponent.module.scss
│   │   │   ├── index.js
├── hooks
│   ├── useSampleHook
│   │   ├── useSampleHook.js
│   │   ├── index.js
├── services
├── stores
├── utils
│   ├── sampleFunction.js
├── api
│   ├── postsApi.js
├── propTypes
│   ├── postsResourceType.js
│   ├── someCustomType.js
├── data

• Place all reusable components and components used across pages in /components folder.
• Create one folder for each component.
• Use PascalCase for folder name of normal components and camelCase for HOC's.
• All files that export react component should be given .jsx extension. .js extension can be used for hoc's (Higher order components).
• At most only export one react component per file.
• Place all page or route entry point components in /pages folder.
• Use PascalCase for individual page folders. Place any components used only in this particular page in the same folder as specified in the above folder tree structure.
• Place all reducers, actions etc. in /stores folder.
• Place all utility functions in /utils folder. Create a file for each function.
• Place all RTK (Redux Toolkit) Query services in the /services folder.
• Place all hooks in /hooks folder. Create a folder for each hook and re export the hook using index.js.
• Place all files that expose wrapper methods to make api calls to backend in /api folder. We should follow the same structure as backend controllers for these folders.
• Place all files that defined custom proptypes in /propTypes folder. Mostly we will be adding proptypes for resources returned form server. Create one file for each new proptype.
• Place all files that define json or constant variables used by your app in /data folder.