|
1 | | -# Create T3 App |
| 1 | + |
| 2 | +[Live Demo](https://jabwemeet.vercel.app/) | [Pitch Deck](https://www.canva.com/design/DAFdhOPv1eA/qvB2ivAdB--1m9PxY-buWw/view?utm_content=DAFdhOPv1eA&utm_campaign=designshare&utm_medium=link&utm_source=publishsharelink) | [Hackoverflow 1.0](https://hack-overflow.tech/) |
| 3 | +# Jab We Meet |
| 4 | +Jab We Meet is a web application that allows users who speak different languages to converse with ease by translating the audio on the fly and speaking the translated audio in the native language of the user as well as provide them with translated captions. It also offers HD video and screen share, and can accommodate up to 100 concurrent users. The application also generates automatic meeting summaries and transcripts, making it easy for participants to review important details from the meeting. |
2 | 5 |
|
3 | | -This is a [T3 Stack](https://create.t3.gg/) project bootstrapped with `create-t3-app`. |
| 6 | +> This is the Winning solution developed at 36-hour National Level hackathon called 'Hackoverflow 1.0' by PHCET, Navi Mumbai. |
4 | 7 |
|
5 | | -## What's next? How do I make an app with this? |
| 8 | + |
6 | 9 |
|
7 | | -We try to keep this project as simple as possible, so you can start with just the scaffolding we set up for you, and add additional things later when they become necessary. |
| 10 | +## Use cases |
| 11 | +- Startups and MNCs with international work culture. |
| 12 | +- Freelancers with daily foreign communication. |
| 13 | +- Content creators & live streamers to reach global range audience. |
| 14 | +- Educational organizations to teach courses to multilingual students. |
8 | 15 |
|
9 | | -If you are not familiar with the different technologies used in this project, please refer to the respective docs. If you still are in the wind, please join our [Discord](https://t3.gg/discord) and ask for help. |
| 16 | +## Built with: |
10 | 17 |
|
11 | | -- [Next.js](https://nextjs.org) |
12 | | -- [NextAuth.js](https://next-auth.js.org) |
13 | | -- [Prisma](https://prisma.io) |
14 | | -- [Tailwind CSS](https://tailwindcss.com) |
15 | | -- [tRPC](https://trpc.io) |
| 18 | +<p align="left"> |
| 19 | +<img src="https://ui-lib.com/blog/wp-content/uploads/2021/12/nextjs-boilerplate-logo.png" height="50px"> |
| 20 | +<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Typescript_logo_2020.svg/1024px-Typescript_logo_2020.svg.png?20221110153201" height="50px"> |
| 21 | +<img src="https://pbs.twimg.com/profile_images/1526251266862505985/KlWqqTp1_400x400.png" height="50px"> |
| 22 | +<img src="https://pbs.twimg.com/profile_images/1504919223168077836/RSsCSpKf_400x400.jpg" height="50px"> |
| 23 | +<img src="https://trpc.io/img/logo.svg" height="50px"> |
| 24 | +<img src="https://www.svgrepo.com/show/374002/prisma.svg" height="50px"> |
| 25 | +</p> |
16 | 26 |
|
17 | | -## Learn More |
| 27 | +- [**Next JS**](https://nextjs.org/): React-based framework for building server-side rendered and statically exported web apps. |
| 28 | +- [**Typescript**](https://www.typescriptlang.org/): Statically typed superset of JavaScript, adds type annotations to enhance code reliability & readability |
| 29 | +- [**Livekit**](https://livekit.io/): End-to-end WebRTC infrastructure to build live video and audio applications. |
| 30 | +- [**Pusher**](https://pusher.com/): Pusher Channels is a hosted WebSockets solution for Realtime updates and bidirectional communication. |
| 31 | +- [**TailwindCSS**](https://tailwindcss.com/): Utility-first CSS framework |
| 32 | +- [**Planetscale**](https://planetscale.com/): Highly scalable, globally distributed database |
| 33 | +- [**tRPC**](https://trpc.io/): Provides a simple, type-safe way to build APIs for TS & JS |
| 34 | +- [**Prisma ORM**](https://www.prisma.io/): Modern, type-safe ORM for Node.js and TS |
| 35 | +- **APIs used**: Browser's [Webspeech](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API) API for transcribing and tts/speech synthesis. [Google-translate-browser](https://www.npmjs.com/package/google-translate-api-browser) API for translating texts, OneAI's [Summarizer](https://www.oneai.com/summarize) for summarizations of meeting transcripts. |
18 | 36 |
|
19 | | -To learn more about the [T3 Stack](https://create.t3.gg/), take a look at the following resources: |
| 37 | +> **Note** |
| 38 | +> This project was bootstrapped with [create-t3-app](https://create.t3.gg/). Check [package.json](https://github.com/swasthikshetty10/hackoverflow/blob/main/package.json) to know all the dependencies and tech stack we used. |
20 | 39 |
|
21 | | -- [Documentation](https://create.t3.gg/) |
22 | | -- [Learn the T3 Stack](https://create.t3.gg/en/faq#what-learning-resources-are-currently-available) — Check out these awesome tutorials |
| 40 | +## Features |
| 41 | +- Multilingual Meeting Support |
| 42 | +- Real-time Translation and Transcriptions |
| 43 | +- Automatic Meeting Minutes generation |
| 44 | +- Support to upto 100 concurrent users |
| 45 | +- Supports HQ Video streaming |
23 | 46 |
|
24 | | -You can check out the [create-t3-app GitHub repository](https://github.com/t3-oss/create-t3-app) — your feedback and contributions are welcome! |
| 47 | +## Architecture |
| 48 | +<img width="1073" alt="Screenshot 2023-03-18 at 11 09 44 AM" src="https://user-images.githubusercontent.com/83623339/226187854-03ec9559-1122-42a3-93c7-80614fdae396.png"> |
25 | 49 |
|
26 | | -## How do I deploy this? |
| 50 | +## Installation steps |
27 | 51 |
|
28 | | -Follow our deployment guides for [Vercel](https://create.t3.gg/en/deployment/vercel), [Netlify](https://create.t3.gg/en/deployment/netlify) and [Docker](https://create.t3.gg/en/deployment/docker) for more information. |
| 52 | +1. - Fork the [repo](https://github.com/swasthikshetty10/hackoverflow) |
| 53 | + - Clone the repo to your local system `git clone https://github.com/swasthikshetty10/hackoverflow.git` |
| 54 | + - Change current directory `cd hackoverflow` |
| 55 | +2. Install latest version of [Nodejs](https://nodejs.org/en/) and install all the dependencies: |
| 56 | + |
| 57 | +```bash |
| 58 | +npm install |
| 59 | +``` |
| 60 | + |
| 61 | +3. Generate prisma client |
| 62 | + |
| 63 | +```bash |
| 64 | +npx prisma generate |
| 65 | +``` |
| 66 | + |
| 67 | +4. Copy and Rename the .env.example to .env, place it in the root directory and fill the essential vars. |
| 68 | + |
| 69 | +```bash |
| 70 | +cp .env.example .env |
| 71 | +``` |
| 72 | + |
| 73 | +> **Warning** |
| 74 | +> Do not rename the original .env.example, it is used to keep track for env vars list as .env with values is gitignored |
| 75 | +
|
| 76 | +5. Run the development server: |
| 77 | + |
| 78 | +```bash |
| 79 | +npm run dev |
| 80 | +``` |
| 81 | + |
| 82 | +## Known Issues |
| 83 | +- There is latency of around 5-6 seconds between the original time and the time when translated audio is spoken out. The latency issue can be tackled by following ways: |
| 84 | + - Use native models for faster transcriptions |
| 85 | + - Use paid APIs for quicker translations like Whisper AI, Google translate etc. |
| 86 | + - Develop a learning model to predict the next moves of the speaker, which is a replacement for WebSpeech API's final transcription boolean. |
| 87 | +- As the app relies on browser's native Web Speech API for transcribing and tts, few browsers like Brave with known issues for this API and microphone functions tend to fail at running the app successfully. |
| 88 | + |
| 89 | +## Team Members |
| 90 | + |
| 91 | +| <img src = "https://avatars.githubusercontent.com/u/83623339?v=4" width="50px"> | <img src = "https://avatars.githubusercontent.com/u/91735807?v=4" width="50px"> | <img src = "https://avatars.githubusercontent.com/u/74966490?v=4" width="50px"> | |
| 92 | +| :-----------------------------------------------------------------------------: | :-----------------------------------------------------------------------------: | :------------------------------------------------------------------------------: | |
| 93 | +| [Nagaraj Pandith](https://github.com/nagarajpandith/) | [Swasthik Shetty](<https://github.com/swasthikshetty10/](https://github.com/rudra246)>) | [Tanishka Rao](https://github.com/tanishkarao16) | |
| 94 | + |
| 95 | +## Attributions |
| 96 | + |
| 97 | +- [Icon from - Flaticon](https://www.flaticon.com/free-icons/) |
0 commit comments