Welcoem to posts!!
in the future - u will be able to do some more stuff here,,,!! like pat catgirl- i mean um yeah... for now u can only see others's posts :c
Building an AI Translation App π
In the interest of testing AI models and their voice-to-text capabilities, I built an application that allows users to translate text between languages, record their voice, save translations, and create account to manage saved translations sorted by languages. Here are key steps in the process:
1. Setting up the Next.js application:
- Npm for package management.
- Created a new Next.js application using the command npx create-next-app@latest
- Configured Tailwind for styling.
- Used App Router over Pages Router.
- Tailwind CSS is configured for styling1
2. Building the UI:
- Added and styled two text areas: one for input and one for translated output.
- Added a dropdown component is created for language selection.
- The dropdown is made dynamic by mapping options from an array of language objects.
- Added a submit button to trigger the translation.
3. Integrating AI Translation:
- Picked Google Gemini API is used for text translation and on Google Studio dashboard generated an API key.
- Stored the Gemini API key is securely in a .env file.
- Created a server action to handle API requests to the Gemini.
- Used @google/generative-ai npm module to make API calls.
4. Adding Speech-to-Text Functionality:
- Created a voice recorder component to capture audio from the browser's microphone.
- Used the MediaRecorder API to record audio.
- Converted the recorded audio to base64 format.
- Added transcription of the audio process using Gemini before generating translations
5. Database Setup
- I set up a Neon Postgres database to store translations
- Defined the database schema with necessary tables and enums
- Implemented queries for adding and fetching translations
6. Authentication System
- Integrated Clerk for user authentication and management
- Configured environment variables in the .env file
- I set up middleware to protect routes
- Implemented sign-in/sign-out functionality using Clerk's components
- I added a save button with signin page redirection
7. Translation Features
- Created a page to display saved translations
- Implemented database fetching with language grouping
- Designed a translation card component for display
8. Improvements on the UI
- Created a header component with navigation
- Added a hero section explaining the app's purpose
9. Deployment Process
- Uploaded the project to GitHub
- Deployed the application using Vercel
- Configured the necessary environment variables
Key Technical Implementations:
1. Used server components for server-side rendering and client components for interactive elements
2. Implemented server actions for secure data handling
3. Created API routes for request handling
4. Managed component state using React's useState hook
5. Integrated the neon/serverless module for database operations
6. Implemented authentication and route protection using Clerk
21 - 3
Another Portfolio video but this time with NextJS 15 and a Blog β‘οΈ
6 - 0
Let's build a portfolio with an integrated blog βοΈ
1 - 0
Should I do more System Design Videos?
3 - 1
Introducing Newsletter Tutorial π°
- Landing Page that includes blog posts preview and a subscribe to newsletter callout to capture user emails
- Admin Panel to manage newsletters/blogs
- Queues to manage pending emails and newsletter distribution tasks
- Authentication and Protected Routes for previous newsletter posts
8 - 0
Langchain Tutorial will be up tomorrow!
We will explore text embeddings, vector databases and build podcast summarization tool using langchain. The coding part will also involve creating embeddings and saving them in the vector database. π₯
43 - 5
AI Form builder is now live π
A platform to generate forms using AI. Built with NextJS, Shadcn and Drizzle ORM.
Features Include:
- Authentication β
- AI Form Generation β
- Form Publish and Submissions β
- View your forms β
- Admin Panel β
- View Results β
- Settings & Upgrade Subscription β
- Analytics β
- Landing page β
20 - 0
Excited to start the new year with working on a new tutorial!π It will be a full-stack application and here's the stack and libraries I'm thinking of using:
- NextJS 14
- Next-auth - authentication
- Shadcdn ui- ui library
- TailwindCSS - styling
- Open Al or Bard
- Prisma - ORM
- PostgreSQL - database
- Zustand - state management
- Stripe - payments
- React-table
- React-charts
- Typescript
any suggestions or questions?
41 - 13
As I've been building web & mobile apps lately and less of tools, it's been a while since I've done things like handle command-line arguments, read & write files or other file-handling in NodeJs, this challenge was a good refresher as I tried to re-create main Git functionalities, check it out:
2 - 0
Have a video coming up about self-hosting nextjs application on a custom server as it might be confusing for the first-timers, here's the outline:
1. Connect to your VPS(using SSH)
2. Install & update Dependencies(Git, Node, Npm, etc)
3. Copy your Application Code(Using Git Clone)
4. Add Environment Variables
5. Generate Build for your Next App
6. Run the Application(using PM2)
7. Setup NGINX Server & Reverse Proxy
And you can watch a sneak peek hereπ
x.com/webdecoded_g/status/1731481430767673679
12 - 0
Advance your web development skills with tutorials on React, Typescript, GraphQL and etc.
Please fill out this survey to help us better plan our content
iu6kc6m43a5.typeform.com/to/H6CP2ILg
If you'd like to support the channel:
buymeacoff.ee/webdecoded5