Sora Next Web

Sora Next Web

Live Demo

https://web.getsoraapp.com

Quick Start

1. clone project

git clone https://github.com/SoraWeb/sora-next-web

2. install dependencies

cd sora-next-web
yarn

3. set environmental values

rename .env.template to .env.local under root dir, and add the env vars

NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=
CLOUDINARY_API_KEY=
CLOUDINARY_API_SECRET=
CLOUDINARY_FOLDER=<Your cloudinary folder contains video files>

Sign up your free Cloudinary account to get your Cloudinary details

Also change the next.config.js file, to allow accessing files from cloudinary

remotePatterns: [
      {
        protocol: "https",
        hostname: "res.cloudinary.com",
        pathname: "/<NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME>/**",
      },
    ],
```

4. videos folder structure

You will need to put videos in the following structure in the Cloudinary:

<CLOUDINARYFOLDER>//nhdp.mp4 <CLOUDINARYFOLDER>//nhdp.webm <CLOUDINARYFOLDER>//hd1080p.mp4 <CLOUDINARYFOLDER>//hd1080p.webm

![cloudinary](./public/cloudinary.png)

Where video file starts `nhdp_` for preview and `hd1080p_` for details view.

If you prefer different logic of reading files, change the logic in `organizeVideos.ts`

5. local development

```shell
yarn dev

open http://localhost:3000 for preview

Credit to

• nextjs for full-stack development
• tailwindcss for page building
• vercel gallery template for the page styling
• get sora app for the sora prompts

Subscribe to the coming Sora App

you can subscribe our mailing list at Get Sora App

Sora Prompt Helper

try our Sora Prompt Helper here

Support