kavitappatil/langjo

LangJo

To start server:

cd server - change to the server directory

npm install - to install dependencies

npm run dev - to connect to the server

Models folder contains the database collections schema

controllers folder contains the CRUD operations on database collections

Routes folder contains the different routes/endpoints

to call the videos locally, http://localhost:5000/api/videos/beginners-level will display the videosCollection

langjo's Issues

Login backend validation

As a developer,
I want the supplied user credentials to be cross-referenced with stored data in the database before approving users' request

So that, only approved users can be redirected to the landing page after login checks.

Acceptance criteria:

• Given that, a user remains on the login page if supplied credentials are wrong
  The error message from the server is displayed to the user on the login page

• Given that, a user is redirected to the homepage when the credentials are a match.
  The user will get redirected to the correct endpoint

• Given that, a user is sent to the registration page
  if a user clicks on the registration button

Login Button functionality

As a user:

I want to be logged in and granted access to the system once I provide the right credentials

Navbar

Navbar

• As a website user
• I want the navigation bar
• So
• that I can see available options to select
• Acceptance Criteria
• so I will able to select one of the available options.
• given that I can see the app logo

google authentication to Login Page

User Story:

As a user,
I want to be able to Login to the application using my Google account,
So that
I can access the features and functionalities without the need to create a separate account.

Acceptance Criteria:

1. The login page should display a "Login with Google" button.
2. Clicking on the "Login with Google" button should initiate the Google authentication process.
3. After successful authentication, the user should be redirected to the application's main home page.
4. If the user cancels the Google authentication process or encounters an error, an appropriate error message should be displayed on the login page.
5. The user's Google account information should be retrieved and used for authentication within the application.

Implementation Criteria:

1. Integrate the Google Sign-In API into the login page.
2. Configure the Google API credentials for the application.
3. Implement the necessary code to handle the Google authentication process and retrieve the user's information.
4. Set up the necessary logic to store and use the user's Google account information for authentication within the application.

GoogleAuth Backend

As a user,

As a user,
I want to login successfully using my Gmail account

Acceptance Criteria

1. I am redirected to the homepage when my credentials are authenticated.

Logo

Story
As a user
I want to see the Logo of the website in every page

So that I have insight and keep track of the website I am working on.

-Acceptance Criteria
Given I am logged into the website,
I can see the Logo at the right or left hand side of the website
I can see information about the developers of the website when I click on the Logo

Free Online Test

User Story;
As a user
I want to easily access a free online English test to assess my language proficiency,

so that I can see my skills and identify areas for improvement.

Acceptance Criteria;

Given I am on the 'Free Online English Test' card
I can see a clickable link to the British Council website's English test page.
Then I can navigate to the British Council website when I click on link.
(The link should open in a new tab or window for a smooth user experience.)

Implementation Notes;

-Link as "Take Free Online English Test".
-Direct link to the British Council website's English test page.
-Link opens in a new tab or window.

[DB] Data structure

As a user, I could reach video, audio, transcript, words to learn and remember, and quiz.

So I can watch the video, read the transcript, hear the audio, learn new words, and answer the quiz questions.

Acceptance Criteria - proper details should be linked to the video including transcript, words, audio, and quiz.

Create new issue- 1

Sign Up

Story
As a user, I would like to see an input field for entering my name.
As a user, I would like to see an input field enter my email.
As a user, I would like to see an input field enter my password.
As a user, I would like to see a signup button.

So that I am able to register myself for accessing the site.

Acceptance Criteria
Style the Signup page to look like Figma's design.

Implementation Notes
1- Style the text and make it more presentable.
2- Style the buttons.
3- Style the input fields

New-Footer

Story
As a user
I Want to see the footer

So That I see the site owners' copyright and different social media links

-Acceptance Criteria
Given I am taken to the respective social media page when I click on the icon

-Implementation Notes
Social media pages are yet to be created.

new repo issue

Video Instructions[FE]

Story:

As a user,
I want to be able to see instructions about YouTube video,
So that I can get a clear idea about the chosen youtube video.

Acceptance Criteria:
Display relevant video instructions, e.g. "Do the preparation task first. Then listen to the audio and do the exercises.

Hero-section

Story
As a user
I Want to see the hero section of the page

So That I have a brief intro to the website

-Acceptance Criteria
Given I am on the landing page
I can see a brief intro to the website
Then I can see more information when I click on learn more button.

-Implementation Notes
Image - ask kavita for the image
Learn more button - need to create content.

Q&A Section

Stories:

As a user,
I want to be able to write and submit my question in the Q&A section,
So that I can seek help or clarification from the community.

As a user,
I want the ability to reply to specific questions with my answers or comments,
So that I can contribute to the discussion and provide assistance to others.

As a user,
I want to see a "Login" or "Register" option to post comments,
So that I can participate in the discussion and share my insights or opinions.

Acceptance Criteria:

1. Users should have an input field to write their questions in the Q&A section.
2. The input field should have validation to ensure that it cannot be empty before submission.
3. Submitted questions should be displayed in a clear and organised manner.
4. Each question should have an option for users to reply with their answers or comments.
5. Users should be able to view and interact with the existing replies to questions.
6. The Q&A section should display a clear "Login" or "Register" option for users who are not logged in.
7. Clicking on the "Login" option should redirect the user to the login page.
8. Clicking on the "Register" option should redirect the user to the registration page.

Implementation Notes:

1. Create an input field component for users to write their questions.
2. Implement client-side validation to prevent submitting empty questions.
3. Design the layout and styling for displaying questions and replies in a clear and organised
   
   manner.
4. Develop the functionality to allow users to reply to specific questions.
5. Implement the necessary API endpoints to handle question submission and retrieval of existing questions and replies.
6. Design and implement a visually distinct "Login" or "Register" option within the Q&A section.
7. Set up the necessary routes and endpoints to handle the redirection to the login and registration pages.
8. Ensure that the redirection back to the Q&A section after login or registration is implemented correctly.

Introduction, transcript and quiz

User Story;
As a user
I want an Introduction for the video.
I want a transcript of the video.
I want Words to Learn and Remember from the video.
I want the audio of the video.
I want a quiz on the video.

so that I can improve my skills and vocabulary.

Acceptance Criteria;

Implementation Notes;
As per Figma design

login bug

Login password also has bug!

English Level

Story;

As a user
I want to learn more about the importance of understanding my English proficiency level,

so that I can make informed decisions about my language learning journey.

-Acceptance Criteria;

Given I am on the 'Understand your English Level ' card
I can understand the level can help me set goals
Then I can choose appropriate learning materials and track my progress effectively.

-Implementation Notes;
Write informative content that emphasises the benefits of understanding one's English proficiency level.

Display one video

As a user:
I want to be able to fetch one video from the video collections
So that, only the requested video by ID is displayed

Transcript

link-to-login-button

User Story:
As a user,
I want to be able to click on the Login button in the Navbar section
So that I can access the Login page and log in to the application.

Acceptance Criteria:

1. The Navbar should display a "Login" button when the user is not logged in.
2. Clicking on the "Login" button should redirect the user to the Login page.
3. Upon successful login, the user should be redirected to the homepage or a designated dashboard page.
4. If the user is already logged in, the Navbar should display a different set of options (e.g., Profile) instead of the "Login" button.

Implementation Notes:

1. Implement the routing using React Router to navigate to the Login component when the "Login" button is clicked.
2. Set up a route in the main application that maps to the Login component.
3. Test the login functionality thoroughly, including both successful and unsuccessful login attempts.
4. Test the Navbar and Login integration to ensure that the "Login" button functions correctly and updates appropriately based on the user's login status.

bg-color-navbar

Change the colour for NavBar to dark.
Find colour number in Figma Design.

YouTube Video

Story:

As a user,
I want to be able to view YouTube videos related to a specific topic,
So that I can explore and learn more about the chosen topic.

Acceptance Criteria:

1. Integrate the YouTube API to fetch and display YouTube videos.
2. Implement a UI component to embed and play YouTube videos within the application.
3. Provide basic video controls such as play, pause, and volume.
4. Display relevant video information, such as the title and duration.
5. Ensure the video player is responsive and works across different devices and screen sizes.

Implementation Notes:

1. Obtain a YouTube API key to access the YouTube API.
2. Set up the necessary API requests to fetch YouTube videos based on user input or predefined topics.
3. Implement a UI component to embed the YouTube video player within the application.
4. Integrate the necessary video player controls and functionality (play, pause, volume).
5. Retrieve and display relevant video information from the YouTube API, such as the title and duration.
6. Test the video viewing functionality across different browsers, devices, and screen sizes.
7. Handle any potential errors or exceptions when interacting with the YouTube API.
8. Update the project's documentation to reflect the changes made.

Hero section

Story
As a user
I Want to see the hero section of the page

So That I have a brief intro to the website

-Acceptance Criteria
Given I am on the landing page
I can see a brief intro to the website
Then I can see more information when I click on learn more button.

-Implementation Notes
Image - ask kavita for the image
Learn more button - need to create content.

two-buttons-navbar

Create two buttons as in Signup and Login side by side.

Tips Blocks

Story
As a user
I Want to see different tips/links to improve my vocabulary

So That I see read and expand my English knowledge

-Acceptance Criteria
Given I am redirected to the webpage of the link/tip I click

-Implementation Notes
Users to be redirected to IELTS page
OR
We create more contents explaining verbs, adjectives etc.

Signup bug!

The password input doesn't work in signup page.
Could be bug!

Login-page

Story
As a user, I would like to see an input field for entering an email address.
As a user, I would like to enter my password.
As a user, I would like to see a login button.

So that I am able to go landing-page.

Acceptance Criteria
Style the login page to look like Figma design.

Implementation Notes
1- Style the text and make it more presentable.
2- Style the buttons.
3- Style the input fields

Backend Comments

As a user:

I should be able to add comments, provided i am successful logged in

Footer

Story
As a user
I Want to see the footer

So That I see the site owners' copyright and different social media links

-Acceptance Criteria
Given I am taken to the respective social media page when I click on the icon

-Implementation Notes
Social media pages are yet to be created.

Beginnner's level

-Story
As a user
I Want to see an overview of the beginner’s page
So That I can have an understanding of the contents of the page

-Acceptance Criteria
Given I am on the beginner's level page
I can see different videos on different topics
Then I can see the complete video and transcript when I click on one of the learn more buttons.

-Implementation Notes
Videos will be displayed in a grid
Videos must be clicked to play