Sobre este projeto
it-programming / web-development
Aberto
Contexto Geral do Projeto
Seria basicamente uma cópia de web apps de sites como: - https://copycopter.ai/ - https://www.revid.ai/ - https://www.vadoo.tv/ - https://storyshort.ai/ Para facilitar um pouco mais o entendimento do projeto, incluindo componentes utilizados na web app segue abaixo o descritivo do full stack breakdown utilizou para a criação da web app. The app I've been building for a few weeks (https://copycopter.ai) finally earned some money, so I decided to share a bit about 'what's behind' it. Disclaimer: I wrote my first line of code ~14 months ago, and NextJS was the first (and only) framework I used so far. Multiple times (both here and on Twitter) I complained about the performance and complexity of some solutions implemented in NextJS. But looking back, in reality, I love it. The server components "clicked" with me instantly (tbh, mostly because my brain initially assumed that'd be the default when I first built my React app with OpenAI key running on the client 😂) Anyways, the meat: Language: Typescript → This one's a no-brainer. ALL of my functions use a "dictionary" approach, meaning I have named parameters that I pass to all my functions within one object. Framework: NextJS (Server Actions) → I use server actions everywhere, not only for form submissions or mutations. All my actions act as API routes. I reach for API routes only if I have to. Each server action takes one object with named parameters. Styling: TailwindCSS → This one's a no-brainer too, however, I do add my classes (like flex-center to quickly center a div, or test-red/test-blue/test-yellow to temporarily add a visible border to an element. ✅ ➡️ like this icons: phosphor icons (through react icons) → i find phosphor icons' style very cool, but their package breaks when i import a client-side icon to a server-side component. Hence, react-icons. It is important to modularize import ✅ ➡️ like this ui components: shadcn/ui → this one speeds up the front-end work massively, but don't be afraid to create multiple versions of the same components. Initially I thought components should be fully customisable, but then, e.g. Badge.tsx is being used in so many contexts that it doesn't make sense to cramp all the variations in one place. Animations: Framer Motion → Playful, highly customisable library for creating animations. ✅ ➡️ this is how i made this "floating menu" effect on my website database: supabase → super easy to set up, comes with their own orm. Auth: Supabase Auth → Integrated with the database, almost zero-setup. Super easy to work with. Hosting: Vercel → Zero configuration, infinitely scalable, no thinking about dev ops, shipping from one command in the terminal CDN: Cloudflare → Attack protection & fastest experience for loading webpage Product Analytics: Posthog → Easy to set up, better version of Google Analytics Storage: S3 → Well-tested and cheap. Everyone’s using it. Background jobs: Trigger.dev → Awesome serverless alternative for BullMQ Async State Manager: React Query (love it) State Manager: Zustand (yes, I use both RQ and Zustand) Email (Transactional, Inbound and Broadcast): Postmark Payments: Stripe Schema validation: Zod Markdown: Next/mdx Dates manipulation: Date-fns AI: Replicate + OpenAI + StableDiffusion + ElevenLabs → hardly need anything else Video: Remotion Now, one thing that might be especially interesting is the State Management: I use both React Query (for async states) and Zustand (for in-app states): Query: ✅ ➡️ this is how i fetch the data from my database (each rq state is linked with server action) zustand: on the other hand, i have one zustand store for all the states inside of my video editor, for states that 1) are not saved to database (e.g. App zoom) or 2) have a denounced time before saving it to the database.
Categoria TI e Programação
Subcategoria Programação
Qual é o alcance do projeto? Criar um novo site personalizado
Isso é um projeto ou uma posição de trabalho? Um projeto
Tenho, atualmente Eu tenho o design
Disponibilidade requerida Conforme necessário
Integrações de API Mídias sociais (Facebook, Twitter, etc), Payment Processor (Paypal, Stripe, etc), Cloud Storage (Dropbox, Google Drive, etc), Outros (Outras APIs)
Funções necessárias Desenvolvedor, Fazer o design de uma landing page, Designer
Prazo de Entrega: Não estabelecido
Habilidades necessárias