saba-var / folksoul-front

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

---

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]

folksoul-front's Issues

import this in moudle files, they do not required imports and if u do not import they just default to any

https://github.com/RedberryInternship/folksoul-front-Var-saba/blob/8eef007dbe2a67999392102baf5c29471eb603d5/src/pages/Login/components/types.d.ts#L2

ImageData type is a function with return type no need to put return type here aswell, its already in type

https://github.com/RedberryInternship/folksoul-front-Var-saba/blob/2ef0ed3aa97ab5131f98c839af35ae9b9d4a9687/src/services/imageService.ts#L3

move api link to .env file

https://github.com/RedberryInternship/folksoul-front-Var-saba/blob/8eef007dbe2a67999392102baf5c29471eb603d5/src/helper/changeMember.ts#L22

text overlofws

u are distructiing props in other files like ErrorAlert but not here, pick which one u want to do and do it everyhwere else

https://github.com/RedberryInternship/folksoul-front-Var-saba/blob/8eef007dbe2a67999392102baf5c29471eb603d5/src/components/Modal.tsx#L5

kebab-case

not like this, do not pass entire URL unless u have absolute need for it, and in this case u do not, pass id in function and have URL in function not here, u have few functions like this, do this for all of them

https://github.com/RedberryInternship/folksoul-front-Var-saba/blob/c4056a2906dbcd03f0373f1515f110f0998a3ec2/src/pages/Members/components/DeleteDialog.tsx#L30

remove this file

https://github.com/RedberryInternship/folksoul-front-Var-saba/blob/c4056a2906dbcd03f0373f1515f110f0998a3ec2/cypress/fixtures/example.json#L1-L2

where are u using this? i can't find it,

https://github.com/RedberryInternship/folksoul-front-Var-saba/blob/8eef007dbe2a67999392102baf5c29471eb603d5/src/helper/changeMember.ts#L1-L43

please slow down spinning, i struggle to click on them ;-;

readme project strcuture

change this type of project structure to something like this:

  components
      componenet-file.tsx
     index.ts
pages
    page-folder
      page-file.tsx
      index.ts
     componenet-folder
          index.ts
           componenent-file.tsx
    helpers.ts [#OPTIONAL]

if u do not understand what I mean check react example project here

import from helpers

https://github.com/RedberryInternship/folksoul-front-Var-saba/blob/8eef007dbe2a67999392102baf5c29471eb603d5/src/pages/About/components/types.d.ts#L1

add scroll here

i should be shown preivew of the image i uploaded

write axios calls like axiox.[method].() i mean axios.post, not this

https://github.com/RedberryInternship/folksoul-front-Var-saba/blob/8eef007dbe2a67999392102baf5c29471eb603d5/src/pages/Members/components/MemberForm.tsx#L40-L47

absolute imports

https://github.com/RedberryInternship/folksoul-front-Var-saba/blob/8eef007dbe2a67999392102baf5c29471eb603d5/src/pages/Members/Members.tsx#L5

absolute imports

https://github.com/RedberryInternship/folksoul-front-Var-saba/blob/c4056a2906dbcd03f0373f1515f110f0998a3ec2/src/index.tsx#L3-L4

gitignore vidoes and screenshots from cypresss

i cant go main page when im logged in

i uploaded image and it doesn't render

import from helpers not helpers/index

https://github.com/RedberryInternship/folksoul-front-Var-saba/blob/8eef007dbe2a67999392102baf5c29471eb603d5/src/pages/Members/components/ChangeMember.tsx#L6

what about other erros? error 500 can also happen

https://github.com/RedberryInternship/folksoul-front-Var-saba/blob/8eef007dbe2a67999392102baf5c29471eb603d5/src/pages/SocialLinks/components/ChangeLinkForm.tsx#L57

not how state setter functions look like

https://github.com/RedberryInternship/folksoul-front-Var-saba/blob/c4056a2906dbcd03f0373f1515f110f0998a3ec2/src/helpers/types.d.ts#L4-L17

i can't add memember

i just logged in

i think u should choose better name for this, like isWordGeorgian or something like that

https://github.com/RedberryInternship/folksoul-front-Var-saba/blob/8eef007dbe2a67999392102baf5c29471eb603d5/src/helper/georgianLan.ts#L1-L18

few problems with your packages

https://github.com/RedberryInternship/folksoul-front-Var-saba/blob/8eef007dbe2a67999392102baf5c29471eb603d5/package.json#L7-L24

this is generally in e2e.ts file

https://github.com/RedberryInternship/folksoul-front-Var-saba/blob/8eef007dbe2a67999392102baf5c29471eb603d5/cypress/support/commands.ts#L198-L213

in some plcaes u put any and in some any, pick which one will be error type

https://github.com/RedberryInternship/folksoul-front-Var-saba/blob/2ef0ed3aa97ab5131f98c839af35ae9b9d4a9687/src/pages/Members/components/ChangeMember.tsx#L52-L53

import from assets

https://github.com/RedberryInternship/folksoul-front-Var-saba/blob/8eef007dbe2a67999392102baf5c29471eb603d5/src/pages/Main/Main.tsx#L2

make .example file for cypress.config.ts aswell same principle as with .env

make sure this don't overflow if text is too long and just put ... incase they do

do not use contain for finding elements, use it only for when u are checking errors

https://github.com/RedberryInternship/folksoul-front-Var-saba/blob/c4056a2906dbcd03f0373f1515f110f0998a3ec2/cypress/e2e/HomePage.cy.ts#L26-L31

uploaded band memeber image does not render

just do export * from './types

https://github.com/RedberryInternship/folksoul-front-Var-saba/blob/c4056a2906dbcd03f0373f1515f110f0998a3ec2/src/pages/Home/components/index.ts#L10-L19

look over all any in project and change it

u are blinding typescript when u use any do not do it, everything has type and if u do not know type look it up or write it in channel and we will help u 🙌 , but do not use any, if u actually do not know type u should give it unknown

when i add band memeber instead of showing me modal jjust close edit mode and redirect me to memeber list page

its time to talk about services :disappointed:

https://github.com/RedberryInternship/folksoul-front-Var-saba/blob/8eef007dbe2a67999392102baf5c29471eb603d5/src/helper/fetchBandAbout.ts#L16-L33

test this error modal

get 100%

please use brackets and mutli lines, this is hard to read

https://github.com/RedberryInternship/folksoul-front-Var-saba/blob/8eef007dbe2a67999392102baf5c29471eb603d5/src/components/AvatarModal.tsx#L23-L26

no need to create function for minLength use form hook already has minLength rule

https://github.com/RedberryInternship/folksoul-front-Var-saba/blob/8eef007dbe2a67999392102baf5c29471eb603d5/src/pages/Login/components/InputField.tsx#L16-L17

why are both of them on git?

just pass inputName is prop why do this?

https://github.com/RedberryInternship/folksoul-front-Var-saba/blob/c4056a2906dbcd03f0373f1515f110f0998a3ec2/src/pages/Login/components/InputField.tsx#L6

show backend errors in front

im getting cors error i can't log in

import from componenets not componenets/svg

https://github.com/RedberryInternship/folksoul-front-Var-saba/blob/8eef007dbe2a67999392102baf5c29471eb603d5/src/pages/About/components/BandImage.tsx#L3

there is input type called color use it instead of making user remember hexcodes for colors

do not use contain to assert something, its fragile, one space can mess it up, use id or data attribute

https://github.com/RedberryInternship/folksoul-front-Var-saba/blob/8eef007dbe2a67999392102baf5c29471eb603d5/cypress/support/commands.ts#L6

set default values for useform hook, so it will infer type , u will have better autocomplete

https://github.com/RedberryInternship/folksoul-front-Var-saba/blob/c4056a2906dbcd03f0373f1515f110f0998a3ec2/src/pages/About/components/EditInfo.tsx#L14-L16

what are u doing here??? i don't undetrstand just create axios instance

https://github.com/RedberryInternship/folksoul-front-Var-saba/blob/7cb2937582c10cf83067d40be66bc9d138d95635/src/services/axios.ts#L1-L52