scaler-assessments
v0.0.0
Published
This is the repository for the Frontend of Scaler Contest Platform.
Downloads
4
Readme
Scaler Contest Platform
This is the repository for the Frontend of Scaler Contest Platform.
Installation
Clone the repository:
git clone https://github.com/KingsGambitLab/assessments.git
Navigate to the project directory:
cd assessments/frontend
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 usingindex.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.