This project was bootstrapped with Create React App.
- typescript V4.1.2: to provide type safe of code base
- Graphql v16.0.1: providing API calls
- Apollo/* v3.4.17: providing state management for graphql data remote and locally
- React-Helmet-Async v1.0.3: to provide help with access the DOM heading dynamically
- graphql-codegen v2.2.2: to help with generating graphql types for typescript
- React testing library: to provide testing enviroment for code test.
- Wait-for-expect: Wait for expectation to be true, for integration and end to end testing
src
┣ components
┃ ┣ button
┃ ┃ ┣ Button.module.css
┃ ┃ ┣ Button.module.css.d.ts
┃ ┃ ┣ Button.test.tsx
┃ ┃ ┗ Button.tsx
┃ ┣ footer
┃ ┃ ┣ Footer.module.css
┃ ┃ ┣ Footer.module.css.d.ts
┃ ┃ ┗ Footer.tsx
┃ ┣ header
┃ ┃ ┣ Header.module.css
┃ ┃ ┣ Header.module.css.d.ts
┃ ┃ ┗ Header.tsx
┃ ┣ result
┃ ┃ ┣ Result.module.css
┃ ┃ ┣ Result.module.css.d.ts
┃ ┃ ┣ Result.test.tsx
┃ ┃ ┗ Result.tsx
┃ ┣ search
┃ ┃ ┣ Search.module.css
┃ ┃ ┣ Search.module.css.d.ts
┃ ┃ ┣ Search.test.tsx
┃ ┃ ┗ Search.tsx
┃ ┗ index.ts
┣ context
┃ ┗ index.ts
┣ generated
┃ ┗ graphql.tsx
┣ graphql
┃ ┣ index.ts
┃ ┗ query.ts
┣ styles
┃ ┣ App.module.css
┃ ┗ App.module.css.d.ts
┣ tests
┃ ┣ mock
┃ ┃ ┗ result.ts
┃ ┗ App.test.tsx
┣ types
┃ ┣ context.d.ts
┃ ┣ index.d.ts
┃ ┗ props.d.ts
┣ App.tsx
┣ index.css
┣ index.tsx
┣ react-app-env.d.ts
┣ reportWebVitals.ts
┗ setupTests.ts
A github action has been added to help run test on every PR created to merge for main branch
. This is to help automate test.
Git clone the project to your local directory git clone https://github.com:inidaname/react-graphql-spotify.git
Change Directory to the project directory cd react-graphql-spotify
then run yarn
or npm install
, (yarn
is preffered as this project was built using yarn command line)
Then you can run yarn start
to start the project on your local server, you can navigate on your broswer to http://localhost:3000
In the project directory, you can run:
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build
folder.
It correctly bundles React in production mode and optimizes the build for the best performance.