Syedkhadeer-51/Fabrik-r3f

VARK - Fabrik :

This is the core front-end application for Vark

• Setup
• How to Use Repo
• Testing

Setup

Install Node.js

Download Node.js by visiting the Node.js website.node Double click on the downloaded file and follow the installation instructions.

To verify that Node.js is installed, open your terminal or command prompt and run the following command:

$ node -v

Install pnpm

Once Node.js is installed, you need to install pnpm. Visit the pnpm installation guide guide for instructions on how to install pnpm.

Browser

There are many browsers out there. However, At fabrik we strongly recommend Google Chrome. :

Code Editor

This project is compatible with almost all the code editors, At fabrik we recommend you to use Visual studio to keep the developement experience uniform since we make use of extensions provided by VScode. download Visual Studio Code and follow the installation instructions.

How to Use Repo

Open your terminal or Windows PowerShell and navigate to the desired folder where you want to have the project.

Run the following commands to clone the repository and navigate to the project folder:

git clone https://github.com/Syedkhadeer-51/Fabrik-r3f.git
cd Fabrik-r3f

Once you're inside the Fabrik-r3f folder, install the project dependencies by running the following command:

pnpm install

This will install and resolve all the dependencies required to proceed with the project

Run the developement server :

To start the development server, run the following command:

pnpm run dev

This will start the development server and you can begin making changes to the project Create a new branch from the main branch to make your changes:

git checkout -b "branch name"

After making the necessary changes, commit them with a meaningful message and push the changes to the branch you created. For instructions on committing and pushing changes, refer to thGithub-documentation

Tech Stack :

• Next.js
• React-three-fiber
• Three.js
• pmndrs-drei : R3f components
• Jest
• pnpm

Refer to the provided links for each framework to gain a better understanding of the folder structure and syntaxes specific to the project requirements.

Testing:

At fabrik we prefer Test-Driven Development (TDD) approach to build components in a simple way.

To quicky get started create a test file with .test.tsx extension for the respective component within tests folder available at the root of the application,

and then run :

pnpm test

This goes through all the test cases on watch mode and prints result on you're terminal.

For detailed understanding of how to write test cases, please refer : Jest React-three-fiber: Testing