A sample project to showcase the React File Picker component

Apideck File Picker Demo

A sample project showcasing the React File Picker component that works with the Apideck File Storage API.

Sign up for a free account at apideck.com to obtain an API key and App ID.

View the code and documentation of the File Picker component here.

Getting started

Duplicate .env.example file, rename it to .env and replace the placeholders with your Apideck credentials. You can get your API key at apideck.com.

Note that if the consumer ID is is randomly generated for demoing purposes.

Install the dependencies and run the local development server:

yarn && yarn dev

Commands

yarn dev

Runs next dev which starts the app in development mode. Open http://localhost:3000 to view it in the browser.

yarn build

Runs next build which builds the application for production usage

yarn start

Runs next start which starts a Next.js production server

yarn lint

Runs the eslint command for all files with the js, ts, jsx, and tsx extensions. See the .eslint.json file for all configuration settings.

yarn lint:fix

Runs the eslint command with the --fix flag which tries to automatically fix linting problems.

yarn lint:cache

Runs the eslint command with the --cache flag which only checks the changed files.

yarn lint:format

Runs Prettier which formats all files inside the src directory based on the configuration set inside the .prettierrc file.

yarn type-check

Runs the tsc command to compile the project and check if it has type errors.

yarn test

Runs the jest command which runs all tests

yarn test:watch

Runs the jest command with --watch flag which runs all tests in watch mode

yarn test:coverage

Runs the jest command with --coverage flag which indicates that test coverage information should be collected and reported in the output.

Commit hooks

This project uses husky and lint-staged to run linters against staged git files on commit.

Pre-commit

Before each commit we run eslint and prettier on all staged files.

Pre-push

Before each push to the repository we run jest to check if all tests are passing.

Resources

To learn more, take a look at the following resources:

GitHub

View Github