curio-org/curio

YouTube video translation platform

curio's Issues

Migrate to typescript

Currently the react app is based up on javascript but as it scales it'd be nice to migrate to typescript.

Make pages for links in footer

Make pages for links in footer

Fix build CI

CI is failing with:

Logging into your Netlify account...
Opening https://app.netlify.com/authorize?response_type=ticket&ticket=16etsv
- Waiting for authorization...
 ›   Error: Timed out waiting for authorization. If you do not have a Netlify account, please create one at https://app.netlify.com/signup, then run netlify login again.
Error: Process completed with exit code 1.

Convert class based components to functional components.

A checklist to keep track of converted components -

• App
  • comments
    • AddComment
    • Comment
    • Comments
    • CommentsHeader
  • Footer
    • Footer
    • Twilio
  • Header
    • Header
  • Recorder
    • Recorder
    • UploadAudio
  • UnderHeader
    • APIError
    • Feature
    • SearchBar
    • UnderHeader
  • Video
    • Player
    • VideoItem
    • VideoList
    • translatedAudio

Feature: Setup prettier

It would be nice to add prettier to the project for consistent code formatting. Regardless of who contributes to the repo, it helps follow the same code styling, etc.

Feature: add home page link when logo is clicked

Currently, when the user clicks on the Curio logo, nothing happens. Add a link on the logo div to navigate the user to the home page when they click on it.

Disappear underheader when video suggestions are loaded

Currently when we enter a search query on curio the suggestions load below underheader component, we want underheader to disappear when video suggestions are loaded.

[feat] Add netlify testing CI

• Implement a basic netlify CI for deploy preview.

Create Issue and PR Templates

Create templates for raising an issue or PR to maintain uniformity and for better documentation purposes

Improve Footer

Update twitter logo

Docs: Improve Readme

Fix Youtube API Error when API key is invalid

When the Youtube API key is set to an invalid key, the application shows an ambiguous error message to the client:

Ideally, the above error message shouldn't be shown to the client. Also, the application should show an error message in the console saying the API key is invalid and any other useful message we get from the API response.

Make watchVideo page responsive

Add Responsiveness to Homepage

Link Social Icons to it's respective URLs

Add links to the social icons to redirect to the social media account in a new tab

Update logo on website

Add top loader bar

Add top loader bar i.e. Search, watch & translate

Dockerize Curio

Watch Button Not working in `VideoItem` component

Watch button is not redirecting users to /play page and neither returning any error in console.

Have Socials Icons in place of About, Sign In & Sign Up on `Header`

These 3 buttons are currently redundant -

It'd be nicer to have linkedin, twitter & Github icons in place of them.

Redirect to Watch Page if Clicked on VideoItem

Docs: Improve Underheader's content

Description

The main page content of CURIO plays a crucial role in conveying our platform's value to users. It's the first impression that visitors have of CURIO, and it should effectively communicate its purpose and benefits. However, there is a lot of room for improvement in the current content.

Objective:

The objective of this issue is to enhance the main page content of CURIO to make it more engaging, informative, and relevant to the users. This improvement aims to provide a better user experience and to clearly convey what CURIO is and how it can benefit different user groups.

Redesign `Send us the Video` form in footer

Currently the form looks like this -

We want it to be decent looking and not out of the place like right now.

Fix production deployment failure due to dependency conflicts

Currently the build is failing with -

Build Logs

npm ERR! code ERESOLVE
--
23:16:27.693 | npm ERR! ERESOLVE could not resolve
23:16:27.693 | npm ERR!
23:16:27.693 | npm ERR! While resolving: react-scripts@5.0.1
23:16:27.693 | npm ERR! Found: typescript@5.2.2
23:16:27.693 | npm ERR! node_modules/typescript
23:16:27.693 | npm ERR!   typescript@"^5.2.2" from the root project
23:16:27.693 | npm ERR!   peer typescript@">= 2.7" from fork-ts-checker-webpack-plugin@6.5.3
23:16:27.694 | npm ERR!   node_modules/fork-ts-checker-webpack-plugin
23:16:27.694 | npm ERR!     fork-ts-checker-webpack-plugin@"^6.5.0" from react-dev-utils@12.0.1
23:16:27.694 | npm ERR!     node_modules/react-dev-utils
23:16:27.694 | npm ERR!       react-dev-utils@"^12.0.1" from react-scripts@5.0.1
23:16:27.694 | npm ERR!       node_modules/react-scripts
23:16:27.694 | npm ERR!         react-scripts@"5.0.1" from the root project
23:16:27.694 | npm ERR!   1 more (tsutils)
23:16:27.694 | npm ERR!
23:16:27.694 | npm ERR! Could not resolve dependency:
23:16:27.694 | npm ERR! peerOptional typescript@"^3.2.1 \|\| ^4" from react-scripts@5.0.1
23:16:27.694 | npm ERR! node_modules/react-scripts
23:16:27.694 | npm ERR!   react-scripts@"5.0.1" from the root project
23:16:27.694 | npm ERR!
23:16:27.695 | npm ERR! Conflicting peer dependency: typescript@4.9.5
23:16:27.695 | npm ERR! node_modules/typescript
23:16:27.695 | npm ERR!   peerOptional typescript@"^3.2.1 \|\| ^4" from react-scripts@5.0.1
23:16:27.695 | npm ERR!   node_modules/react-scripts
23:16:27.695 | npm ERR!     react-scripts@"5.0.1" from the root project
23:16:27.695 | npm ERR!
23:16:27.695 | npm ERR! Fix the upstream dependency conflict, or retry
23:16:27.695 | npm ERR! this command with --force or --legacy-peer-deps
23:16:27.695 | npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
23:16:27.695 | npm ERR!
23:16:27.695 | npm ERR!
23:16:27.695 | npm ERR! For a full report see:
23:16:27.695 | npm ERR! /vercel/.npm/_logs/2023-10-11T17_46_25_264Z-eresolve-report.txt
23:16:27.696 |  
23:16:27.696 | npm ERR! A complete log of this run can be found in: /vercel/.npm/_logs/2023-10-11T17_46_25_264Z-debug-0.log
23:16:27.710 | Error: Command "npm install" exited with 1

i.e. Has conflicts between [email protected] & [email protected]

Enable Favicon

Integrate Twilio

Make translateVideo page responsive

Optimize the UI to make it Mobile Friendly

All changes/improvements regarding the UI to make it more user friendly. Let's make it this issue active and contributors can link their PRs such as

To # (issue)

This shall enable contributions without closing the issue while also getting continous updates

To-Do -

• Change the underheader styles for mobile view
• Optimize the footer to make it mobile friendly
• Add "Read more.." to the long texts in the underheader
• Change the input box and send designs