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:https://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