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.
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
Runs next dev which starts the app in development mode.
Open http://localhost:3000 to view it in the browser.
Runs next build which builds the application for production usage
Runs next start which starts a Next.js production server
Runs the eslint command for all files with the js, ts, jsx, and tsx extensions. See the .eslint.json file for all configuration settings.
Runs the eslint command with the --fix flag which tries to automatically fix linting problems.
Runs the eslint command with the --cache flag which only checks the changed files.
Runs Prettier which formats all files inside the src directory based on the configuration set inside the .prettierrc file.
Runs the tsc command to compile the project and check if it has type errors.
Runs the jest command which runs all tests
Runs the jest command with --watch flag which runs all tests in watch mode
Runs the jest command with --coverage flag which indicates that test coverage information should be collected and reported in the output.
This project uses husky and lint-staged to run linters against staged git files on commit.
Before each commit we run eslint and prettier on all staged files.
Before each push to the repository we run jest to check if all tests are passing.
To learn more, take a look at the following resources:
- File Storage API - Apideck unified API reference
- @apideck/file-picker - The React File Picker component
- Next.js Documentation - learn about Next.js features and API
- Learn Next.js - an interactive Next.js tutorial
- TypeScript - learn about TypeScript
- Tailwind CSS - learn about the utility-first CSS framework Tailwind
- Jest - learn about Jest, the JavaScript Testing Framework
- React Testing Library - learn about testing React components with React Testing Library
- ESLint - learn about analyzing code with ESLint
- Prettier - learn about formatting code with Prettier
- Prettier Extension - a Prettier extension for Visual Studio Code