https://github.com/whoabuddy/react-ts-template
All the batteries for when I'm ready to create an app. Easily deploys on Cloudflare Pages or Replit.
https://github.com/whoabuddy/react-ts-template
Last synced: 3 months ago
JSON representation
All the batteries for when I'm ready to create an app. Easily deploys on Cloudflare Pages or Replit.
- Host: GitHub
- URL: https://github.com/whoabuddy/react-ts-template
- Owner: whoabuddy
- Created: 2024-08-21T12:27:17.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-08-22T11:33:01.000Z (10 months ago)
- Last Synced: 2025-02-07T17:35:36.060Z (4 months ago)
- Language: TypeScript
- Size: 13.8 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# INSERT_TITLE
## Description
INSERT_DESCRIPTION
## Development
Tech stack:
- React + Vite
- Typescript + ESLint
- Chakra UI
- Framer Motion
- Jotai
To run this locally:
1. Clone this repository
2. Run `npx npm-check-updates -u --target=minor` (optional)
3. Run `npm install`
4. Run `npm run dev`
5. Open [http://localhost:5173](http://localhost:5173) with your browser
Very simple to deploy with Cloudflare Pages or Replit.
### Template Text
This template contains a few values that can be replaced through global search.
Manually reviewing each entry is recommended.
- INSERT_TITLE
- INSERT_DESCRIPTION
- INSERT_URL
### Custom Theme
- `#ffffff` (primary color)
theme file has color schemes (Chakra style)
### Custom Logo
Custom logos are stored in the `public/logos` directory. To add a new logo, follow these steps:
- obtain the image for the desired custom logo
- store the image in the `public/logos` directory
- update the `index.html` file to reference the new logo
### Custom Icons
Custom icons are stored in the `public/` directory. To add a new icon, follow these steps:
- obtain the image for the desired custom icon
- convert the image to the required files [(favicon-generator)](https://www.favicon-generator.org/)
- overwrite the files in the `public/` directory
As long as the files are named correctly, the icon will automatically be updated in all locations.
If there are any issues with the icon, check the following:
- the icon exists in the `public/` directory
- the icon is referenced in the `index.html` file
### Custom Metadata
[Hey Meta generator](https://heymeta.com)
### Custom Fonts
Custom fonts are stored in the `public/fonts` directory. To add a new font, follow these steps:
- obtain the desired custom font files
- convert the files to woff/woff2 format [(transfonter)](https://transfonter.org/)
- store the woff/woff2 files in the `public/fonts` directory
To use the custom font, follow these steps:
- update `index.html` to preload the `woff2` file
- update `src/fonts.tsx` to include the font in the `fontFaces` array
- `font-family` is the name of the font (used by the theme)
- `src` is the path to the `woff2` and `woff` files
- update `src/theme.ts` to include the font in the `fonts` object