https://github.com/sohanemon/the-three-shop
Create your own t-shirt as you want.
https://github.com/sohanemon/the-three-shop
drei framer-motion next13 nextjs r3f react react-colorful react-uploader-plugin redux redux-toolkit tailwindcss three-fiber threejs typescript vercel
Last synced: 7 months ago
JSON representation
Create your own t-shirt as you want.
- Host: GitHub
- URL: https://github.com/sohanemon/the-three-shop
- Owner: sohanemon
- License: mit
- Created: 2023-04-08T05:03:37.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-05-01T09:02:42.000Z (over 2 years ago)
- Last Synced: 2025-01-15T11:52:23.467Z (9 months ago)
- Topics: drei, framer-motion, next13, nextjs, r3f, react, react-colorful, react-uploader-plugin, redux, redux-toolkit, tailwindcss, three-fiber, threejs, typescript, vercel
- Language: TypeScript
- Homepage: https://3shop.vercel.app
- Size: 1.15 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## Getting Started with Three
```sh
yarn add three @react-three/fiber @react-three/drei maath framer-motion
```
### Switch between tabs
```tsx
function generateTab(currentTab: string) {
switch (currentTab) {
case 'colorpicker':
return ;
case 'filepicker':
return ;
case 'aipicker':
return ;
default:
null;
}
}
```
```tsx
export default function LeftSideTab() {
const currentTab = useSelector((state: RootState) => state.editor.currentTab);
return (
<>
{generateTab(currentTab)}
>
);
}
```
## Next 13 / NextJS / API Routes
### GET
```ts
export async function GET() {
return new Response('Hi man');
}
```
### POST
```ts
export async function POST(req: Request) {
return Response.json({ msg: 'Alhamdulillah' });
}
```
Or for type safety use
```ts
export async function POST(req: Request) {
return NextResponse.json({ msg: 'Alhamdulillah' });
}
```
Handling body
```ts
export async function POST(req: Request) {
// await is must
const res = await req.json();
return NextResponse.json(res);
}
```