Full Stack Tutorial: Devinder Application

Jul 10, 2024

Full Stack Tutorial: Devinder Application

Overview

  • Goal: Build Devinder - a service where developers can find people to pair program with.
  • Features: Pair programming, live video chat, screen sharing, room creation, and tag-based filtering.

Technologies Used

  • Frontend: NextJS, React, ShadCN (UI components), TailwindCSS
  • Backend: NextJS server actions, Drizzle ORM, PostgreSQL (Docker container for local dev)
  • Authentication: NextAuth (Google OAuth)
  • Video/Audio: Stream.io API
  • Deployment: Railway

Project Structure

  • Root: Contains NextJS standard directories (pages, components, etc.)
  • pages Folder: Custom pages for room creation, browsing, and editing.
  • components Folder: Reusable UI components (e.g., Header, RoomCard).
  • data Folder: Contains ORM schema definitions and database access functions (getRooms, createRoom, etc.).
  • actions Folder: Server actions for data manipulation and interfacing with Stream.io.

Setup

  1. NextJS App: Initialize with npx create-next-app@latest and install dependencies.
  2. ShadCN: Setup UI components following ShadCN installation steps.
  3. PostgreSQL: Use Docker to run a local PostgreSQL instance.
  4. Drizzle ORM: Setup database schema and migration scripts using Drizzle ORM.
  5. NextAuth: Setup Google OAuth for authentication.
  6. Video/Audio: Integrate Stream.io to enable video and audio chat features.
  7. Deployment: Deploy the app using Railway, with environment variables for DB, OAuth, and Stream.io.

Main Features Implementation

Room Creation

  • Form Handling: Uses React Hook Form with ShadCN components for validation and form state management.
  • Database: Rooms are stored in PostgreSQL with references to the user who created the room.
  • Server Action: createRoom action manages the room creation logic and invokes server-side database operations.

Room Browsing and Filtering

  • Filter by Tags: Implemented a search input that filters rooms by tags using URL query params.
  • Dynamic Routing: Utilize dynamic routes in NextJS for room-specific pages (e.g., rooms/[id]).
  • Components: Reusable RoomCard component to display room information.

Room Interaction

  • Live Video: Integrated Stream.io for live video conferencing. Users can share screens and collaborate in real-time.
  • Participants List: Display list of participants in a room using Stream.io components.

Authentication Handling

  • Middleware: Uses NextAuth middleware to protect routes based on authentication status.
  • Account Management: Allows users to delete their accounts and all associated data.

User Interface

  • Header: Displays a navigation bar with links to various sections and authentication controls (login, logout, delete account).
  • Responsive Design: Tailored to work in both light and dark mode with TailwindCSS and ShadCN for theming.
  • Landing Page: Uses TailwindUI for a pre-built, responsive landing page.

Deployment

Railway Setup

  • Database: Create a PostgreSQL instance on Railway.
  • Environment Variables: Add necessary environment variables for DB connections, Stream.io, and OAuth configurations.
  • Migration: Use Drizzle ORM to run database migrations on Railway.
  • Build & Deploy: Automate deployments with Railway to keep the staging environment up-to-date.

Next Steps

  • Chat Integration: Use Stream.io's chat API to enable live text chat within rooms.
  • Optimizations: Improve performance, error handling, and security (e.g., better validation, adding rate limiting).
  • UI Enhancements: Add more polished UI components for a better user experience.

Conclusion

  • The project shows how to build a full-stack application with modern technologies and tools.
  • Demonstrates integration of real-time features with video and screen sharing thanks to Stream.io.
  • Deploying via Railway offers a streamlined approach to managing environment variables, migrations, and hosting.

Useful Links:

Discord for Questions: [Your Discord Invite Link]