---

FolkSoul is a music band platform where we can find out about the band and its members or just enjoy the visuals.

Table of Contents

• Table of Contents
• Prerequisites
• Tech Stack
• Getting Started
• Testing
• Project Structure
• Resources

Prerequisites

• 

  Node JS @12.X and up

• 

  npm @6 and up

Tech Stack

• 

  [React @18.2.0] - front-end framework

• 

  [Typescript @4.7.4] - JavaScript with syntax for types.TypeScript is JavaScript with syntax for types

• 

  [React Hook Form @7.32.2] - flexible and extensible forms with easy-to-use validation

• 

  [cypress @10.3.0] - JavaScript End to End Testing Framework

• 

  [tailwindcss @3.1.3] - css framework

Getting Started

1. First of all you need to clone repository from github:

git clone https://github.com/Saba-Var/Folksoul-front.git

2. Next step requires install all the dependencies.

npm install

or

yarn install

3. copy .env

cp .env.example .env

4. after that you can run FolkSoul application from terminal:

npm start

Runs the app in the development mode. Open http://localhost:3000 to view it in your browser.

Testing

1. copy cypress.config.ts

cp cypress.config.ts.example cypress.config.ts

2. Run application from the terminal

npm start

3. start cypress

npx cypress open

In order to see coverage of testing go to coverage/lcov-report and open index.html

Project Structure

├─── cypress
├─── readme
├─── src
│    ├── assets
│    │
│    ├── components
│    │   ├── component-file.tsx
│    │   ├── index.ts
│    │   ├── types.d.ts
│    │   └── svgs
│    │       ├── svg-file.tsx
│    │       ├── index.ts
│    │       └── types.d.ts
│    │
│    ├── helpers
│    │   ├── helper-file.ts
│    │   ├── index.ts
│    │   └── types.d.ts
│    │
│    └── pages
│        └── page-folder
│            ├── component-folder  [#OPTIONAL]
│            │   ├── component-file.tsx
│            │   ├── index.ts
│            │   └── types.d.ts    [#OPTIONAL]
│            ├── page-file.tsx
│            ├── index.ts
│            └── types.d.ts        [#OPTIONAL]
- .babelrc
- .env
- .eslintrc.json
- .gitignore
- .prettierrc.json
- cypress.config.ts
- package.json
- tailwind.config.js
- tsconfig.json

Resources

• Application Design [Figma]
• Application Design Prototype
• Git commit rules
• Font [BPG Arial]
• Font [BPG Nino Mtavruli]