https://github.com/fpapado/framed
Fit photos to boxes, quickly and locally on your browser.
https://github.com/fpapado/framed
frames photos react
Last synced: about 1 year ago
JSON representation
Fit photos to boxes, quickly and locally on your browser.
- Host: GitHub
- URL: https://github.com/fpapado/framed
- Owner: fpapado
- Created: 2022-08-30T07:12:21.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-03-14T16:12:56.000Z (about 3 years ago)
- Last Synced: 2025-01-09T10:29:14.288Z (over 1 year ago)
- Topics: frames, photos, react
- Language: TypeScript
- Homepage: https://framed.fotis.xyz
- Size: 2.69 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Framed
> Pictures in frames, quickly and locally in your browser.
## Prerequisites
You will need [node](https://nodejs.org/en/) and [pnpm](https://pnpm.io/installation#using-corepack).
We recommend using [nvm](https://github.com/nvm-sh/nvm) to manage your node version.
Start by installing nvm, then in a terminal, such as iTerm, Gnome Terminal, or Windows Subsystem for Linux, type:
```shell
nvm use
```
This should install the correct version of node for your system.
Then, follow the instructions for [installing pnpm, preferably using corepack](https://pnpm.io/installation#using-corepack).
## Install dependencies
Assuming that you have set up node, pnpm and nvm, in a terminal run:
```shell
pnpm i
```
You should be ready to go!
## Available Scripts
In the project directory, you can run:
### `pnpm start`
Runs the app in the development mode.\
Open [http://localhost:5173](http://localhost:5173) to view it in the browser.
The page will reload if you make edits.\
You will also see any lint errors in the console.
### `pnpm test`
Launches the test runner, specifically [Playwright](playwright.dev/).
Playwright is used for end-to-end testing, using the real browser environment.
### `pnpm run build`
Builds the app for production to the `dist` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
### `pnpm run preview`
Builds the app for production (similar to `pnpm run build`), and launches a local server that serves the app in production mode.
`pnpm run preview` is useful for benchmarking performance issues, since all optimisations are applied.
### `pnpm run lint`
Runs ESLint, surfacing errors and warnings in the project.
## Deployment
The production app is on [Netlify](netlify.com/).
You can deploy the app anywhere that serves static files, i.e. those under the `dist` directory.