Specially in videos with segments. Overlap is happening.

I would like to add a "Show Password" checkbox below the password field in the /api/auth/signin endpoint for a better user experience.

Current State

Desired Result

Sidebar toggler can be a great feauture to have,when we split our screens the sidebar takes more space so looking for forword for this FIX!

Thanks in advance.

Description :

For a better user experience when watching videos, we can add keystroke events similar to those found on YouTube.

We just have to add these lines in VideoPlayer2.tsx

Code :

const handleKeyPress = (event: any) => {
  switch (event.code) {
    // ... existing cases for play/pause, seeking, and fullscreen

    case 'ShiftPeriod': // Shift + > for decreasing speed
      player.playbackRate(Math.max(player.playbackRate() - 0.1, 0.5));
      event.stopPropagation();
      break;

    case 'ShiftComma': // Shift + < for increasing speed
      player.playbackRate(Math.min(player.playbackRate() + 0.1, 2));
      event.stopPropagation();
      break;
  }
};

store in the DB (along with the duration watched) if the video is marked as done
expose user progress in percentage and show somewhere on UI

Enforce linting on PRs

In the image, there is padding given on left right and bottom side of video when in full-screen mode. It should occupy the entire screen.

I suggest that the left sidebar should slide separately from the main site content on the website for a better user experience. Currently, the sidebar moves along with the main content, and it would be more user-friendly if they could move independently.

now

after

• Just like here in this site we have the left side bar is not dependent upon sliding of main site.

• we can login without entering email and password.

• if either email or password is not provided it doesn't present proper error. Faced login issue when the mail and password was auto filled but sign in request was not sending the username in the request.

Solution :
validate if the email or password is not provided.

1. Conflict between #54 & #64, can see 2 cards.
2. Extra space at the top, in main image, probably due to #49

1st:

2nd:

put links in every week
Gives them a public portfolio of all they've done

while switching to light mode the sidebar texts

https://github.com/code100x/cms/blob/main/.github/workflows/lint.yml isnt triggering on PRs

It is like if your video is selected to run at any faster speed take it as 1.5x for example then if we change the video quality of the video then the video automatically switches to 1x but still showing 1.5x .

As shown in this image, when I have clicked on 1.5x its being selected 1x and 1.5x both and speed is not increasing to 1.5x

Right now if we want to play / pause video we need to go to bottom left corner to play/pause. Instead of this add this option on video hover so that user can do it easily.

Earlier this wasn't an issue but I think the ideal solution is for it to fill the screen width available.

Adding crypto payment gateway for buying the course. Users can buy the course using usdt.

Can work on something like this: https://cryptopay-eta.vercel.app/
GH repo: https://github.com/ameeetgaikwad/Crypto-Payment-Gateway?tab=readme-ov-file#verification-logic

Proposed Architecture-1:

1. Asking users for approval of ERC20. The approval will be given to a smart contract.
2. The smart contract then will transfer the ERC20 tokens to an 100xdev's EOA/Smart Contract. The Chainlink Functions will be used to hit the backend api to handle adding user to the database. ref

Proposed Architecture-2: (this is similar to what is used in the above website mentioned)

1. Asking users for approval of ERC20. The approval will be given to a smart contract.
2. The smart contract then will transfer the ERC20 tokens to an 100xdev's EOA/Smart Contract. Transfer(from, to, tokenId) event emitted.
3. The Graph will be used to track this event and trigger a function which will hit the backend api to handle adding user to the database.
   We can avoid using The Graph in this method. After the approval transferFrom function will be executed. If the transaction is successful that means we got the tokens and then we can add the user to the database. If error we didn't got the tokens.

Cost associated:

• Architecture-1: Infrastructure cost for Link tokens + Gas fees.
• Architecture-2: Infrastructure cost for The Graph + Gas fees.

These three videos are shown outside the course video folder which is not looking good

https://cms-qrlx.vercel.app/

While moving to one video to another I face problem and want the left bar items to be link so that i can open new videos on new tab, and i think most of us would be facing this issue.

attaching an image for better clarity.

Here is the issue , what it looks like when visiting auth/signin route of 100xdev webpage.

The following two config files contradict each other so
npm run format:check
npm run lint:check
will not be successful at the same time so, the whole repo needs to follow a single code style and must be linted in a separate pr

Will require db migrations

UI changes needed looking very basic fonts, sidebar, cards, sidebar, Navbar. We have to give proper feeling of educational website. Please accept I will start contribution.

Develop seperate scroll bar for sidebar.

116bd23 broke login

email isn't reaching the backend correctly. Have rolled back prod but should be fixed ASAP

When clicking on the ML Course View Content button, instead of redirecting to the content of that course, it redirects us to this page. The Android Course button also has the same issue.

Attaching screenshots for reference:

(P.S. I'd like to work on it if approved.)

I am getting this after clicking the view all chapters button.

It would be pretty nice to have a section right below the video , that contains FAQ and discussions about the topic the user's currently watching . I've seen a lot of people being overwhelmed about using discord after seeing so many channels and discussion groups . it'll give them a place to participate too .

Mainly 2 issues in UI:

1. Redundant Scroll Timestamp

Details With Images :

• The SCROLL time stamp is unnecessary because the chapter segments are already dynamic and detailed - they have a timestamp AND give an idea what is being taught at what time. PLUS, chapter segments details (timestamp + info) are partially blocked by SCROLL timestamp when scroll is dragged across the video length, providing incomplete info and/or unclean look.
• EXAMPLE :

As evident, the SCROLL timestamp is obstructing a good information feature.

• Also obstructs chapter segment if viewing the chapter details near the scroll:

Possible Solution :

• Remove the TIME STAMP feature of the scroll, NOT the scroll itself. Just the hovering timestamp. Seeing video time is nicely done already with the chapter details. I would do this myself but I'm a little behind and do not know TS yet :(

2. Chapter Segment Details BG Too Opaque

Details :

• They make it hard to see the bar along which we manually seek the scroll, like this :

• If I am hovering across the bar to see where I want to go, the BG of chapter details almost completely hides the video UI.

Possible Solution :

• Just making the BG of hovering chapter details translucent/less opaque should work nicely. Again, I would do this but don't yet know TS.

Thank you!

Description -

Currently, our UI lacks interactivity when it comes to user interactions with section cards. I feel that Implementing a slight scale effect on hover can significantly enhance the user experience by providing visual feedback and making the interface more engaging.

Proposed Solution:

I was thinking of introducing a CSS transition property to the section cards, enabling a smooth scale effect upon hover. By applying a transform scale property, we can achieve the desired visual effect without compromising the layout or functionality of the cards.

I have attached a recording showing what exactly do I mean by a hover scale effect (although, the original effect will be more smoother and better than the one showcased in the recording).

Looking forward to contributing to the project!

shouldnt scroll down

Description:

Toggling the theme provider component results into additional margin/padding on the document/body causing layout shift.

Steps to reproduce:

(1) Visit https://app.100xdevs.com/
(2) Toggle the theme

Expected behaviour: no layout shift while toggling

Actual Behaviour: shifts the entire app layout resulting into bad user experience

Upon accessing Week 10, instead of the expected thumbnail image accompanying the video title for week 10.1 and 10.2, there's a broken image icon displayed.

And moreover upon insepcting the component it seems the that the both the image sources are linked to the same address which is "http://appx-recordings.s3.ap-south-1.amazonaws.com/drm/100x/images/10.1.png".

There exists a naming error in the website for Week 11 classes it named as Week 12 instead of Week 11

Proposed Changes

1. Introduce a settings icon to access video quality and playback speed options.
2. Move the progress bar above the control bar for improved visibility.
3. Apply a gradient background to enhance the control bar's aesthetics.

These changes will make a sleeker and more user-friendly control bar.

Visuals:

- Before Changes

- After Changes

Request for Assignment :

Can I go ahead with implementing these changes? If possible, could someone (@hkirat) assign this enhancement to me?

Noticed the project has yarn-lock and package-lock file. There will be issues in the future if the project continues to use yarn and npm. Stick to one.

As you can see what the issue is from below images.