migleankstutyte / pets-front

Pets Information System Front-end

pets-front

Pets Information System Front-end

Live site is available at https://app.petbook.lt/.

Setup

Before starting the setup choose what actions you will do with the code changes. If you will keep it as a local copy - make a repository clone. If you will contribute to the project - make a repository fork and read the Contribution guideline.

The project codebase is optimized for using Visual Studio Code which can be downloaded and used with the most of popular OS. Install Prettier and ESLint extensions as these are mandatory for project codebase consistency.

Get your local copy of the repository by cloning or forking.

If not yet installed, get Node JS (> 10v) and npm. Run node -v in your terminal to check the actual Node version. If you need to be able using various Node versions for your projects, consider installing and using Node version manager.

Install project package dependencies. Run npm install in the terminal. Running the same command is recommended after each repository update as more dependencies may be added in the project development.

Make sure to set up local environment variables to run the project (see next section).

To start development version with hot reload, run npm start in the terminal.

Environment variables

App configuration values are stored in the .env file. For your local build, create .env.local file from .env.sample and set custom values there. Only variables with REACT_APP_ prefix will be included.

Auth0 variables and configs

To have setup for local build register with Auth0 and follow Auth0 React integration guide. Set REACT_APP_AUTH0_DOMAIN, REACT_APP_AUTH0_CLIENT_ID variables according to yours created Auth0 App.

Follow other steps of this guide (in your Auth0 "Application" section - set Allowed Callback URLs, Allowed Callback URLs, Allowed Web Origins, Allowed Origins (CORS)).

The value of the REACT_APP_AUTH0_AUTH_AUDIENCE parameter needs to match an existing API service identifier configured in the "APIs" section of your Dashboard.

Continue setting params in your Auth0 "Application" section - set Application type to "Regular Web Application", Token Endpoint Authentication Method to "None".

After env variables are defined and Auth0 service itself is configured, you're good to go.

GraphQL

GraphQL types used by Typescript should not be defined manually but generated from the schema. To re-generate GraphQL types run npm run codegen command.

Types are stored in the src/graphql/types.ts file.

The latest API features exposed in the development GraphQL Playground.

---

Started by Kayak WeCanCode Academy 2021 @ Kaunas