Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/apideck-samples/file-picker
A sample project to showcase the React File Picker component
https://github.com/apideck-samples/file-picker
cloud-storage file-storage files filesharing nextjs react tailwindcss typescript unified
Last synced: about 1 month ago
JSON representation
A sample project to showcase the React File Picker component
- Host: GitHub
- URL: https://github.com/apideck-samples/file-picker
- Owner: apideck-samples
- Created: 2021-09-16T13:26:21.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T11:25:43.000Z (almost 2 years ago)
- Last Synced: 2024-08-01T08:15:03.241Z (4 months ago)
- Topics: cloud-storage, file-storage, files, filesharing, nextjs, react, tailwindcss, typescript, unified
- Language: TypeScript
- Homepage: https://file-picker.apideck.dev/
- Size: 1.16 MB
- Stars: 53
- Watchers: 3
- Forks: 7
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome - apideck-samples/file-picker - A sample project to showcase the React File Picker component (TypeScript)
README
# Apideck File Picker Demo
A sample project showcasing the [React File Picker](https://www.npmjs.com/package/@apideck/file-picker) component that works with the Apideck [File Storage API](https://developers.apideck.com/apis/file-storage/reference).
Sign up for a free account at [apideck.com](https://app.apideck.com/signup) to obtain an API key and App ID.
View the code and documentation of the File Picker component [here](https://github.com/apideck-libraries/file-picker).
## 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](https://app.apideck.com/api-keys).
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](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](https://github.com/typicode/husky) and [lint-staged](https://github.com/okonet/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:
- [File Storage API](https://developers.apideck.com/apis/file-storage/reference) - Apideck unified API reference
- [@apideck/file-picker](https://github.com/apideck-libraries/file-picker) - The React File Picker component
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial
- [TypeScript](https://www.typescriptlang.org/) - learn about TypeScript
- [Tailwind CSS](https://tailwindcss.com/) - learn about the utility-first CSS framework Tailwind
- [Jest](https://jestjs.io/) - learn about Jest, the JavaScript Testing Framework
- [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) - learn about testing React components with React Testing Library
- [ESLint](https://eslint.org/) - learn about analyzing code with ESLint
- [Prettier](https://eslint.org/) - learn about formatting code with Prettier
- [Prettier Extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - a Prettier extension for Visual Studio Code