codeforcauseorg / edu-client

Product focuses on 100% education as well as upskilling developing countries and rural areas.

✨ Edu Client ✨

Product focuses on 100% education as well as upskilling developing countries and rural areas.

❤️ Note to new contributors

Thank you for considering and taking the time to contribute! Before contributing kindly read and follow Code of Conduct. To help new developers/contributors there are set of instructions added in CONTRIBUTING.md. Which describes the intial stages for working on this project. Also refer the MIT License.

📌 Prerequisites

💻 1. System requirement :

1. Any system with basic configuration.
2. Operating System : Any (Windows / Linux / Mac).

💿 2. Software requirement :

1. Updated browser
2. Node.js installed (If not download it here).
3. Any text editor of your choice.

⚡ 3. Skill set :

1. Knowledge of git & github.
2. JavaScript
3. ReactJS
4. Mobile development Experience in Any Tech (optionally)
5. Ionic / Capacitor (optionally)

📌 Potential Maintainers :

Anuj Garg Ganga Chaturvedi

📌 Credits :

This project exists, thanks to all the people who contribute.

edu-client's Issues

refractor:prettify all the files of the repo

Description

The repo contains many eslint and prettier errors, the command npm run format prettified all the files. I'm hoping to solve all the eslint errors.
Should I make a PR for this?
The files affected after prettifying were:

        modified:   .eslintrc.json
        modified:   .github/ISSUE_TEMPLATE/bug_report.md
        modified:   .github/ISSUE_TEMPLATE/feature_request.md
        modified:   .github/feature_request_template.md
        modified:   .github/pull_request_template.md
        modified:   CODE_OF_CONDUCT.md
        modified:   CONTRIBUTING.md
        modified:   README.md
        modified:   android/app/src/main/assets/capacitor.config.json
        modified:   capacitor.config.json
        modified:   package-lock.json
        modified:   package.json
        modified:   public/manifest.json
        modified:   src/App.js
        modified:   src/App.test.js
        modified:   src/Routes.js
        modified:   src/actions/accountActions.js
        modified:   src/components/Button/ButtonComponent.js
        modified:   src/components/auth/Auth.js
        modified:   src/components/courseCard/courseCard1.js
        modified:   src/components/courseDetails/schedule.js
        modified:   src/components/courseDetails/scheduleDetails.js
        modified:   src/components/wishlistCard/index.js
        modified:   src/config/index.js
        modified:   src/constants/index.js
        modified:   src/context/SettingsContext.js
        modified:   src/index.js
        modified:   src/layouts/MainLayout/BottomNav.js
        modified:   src/layouts/MainLayout/TopBar/Account.js
        modified:   src/layouts/MainLayout/TopBar/HeaderItems.js
        modified:   src/layouts/MainLayout/TopBar/Item.js
        modified:   src/layouts/MainLayout/TopBar/index.js
        modified:   src/layouts/MainLayout/index.js
        modified:   src/pages/CoursePageViewWithVideo/index.js
        modified:   src/pages/HomePage.js
        modified:   src/pages/HomeView/Hero.js
        modified:   src/pages/HomeView/NonHero.js
        modified:   src/pages/HomeView/index.js
        modified:   src/pages/PersonalPage.js
        modified:   src/pages/ProfilePage.js
        modified:   src/pages/WishlistPage.js
        modified:   src/pages/wishListView/index.js
        modified:   src/reducers/accountReducer.js
        modified:   src/reducers/index.js
        modified:   src/reportWebVitals.js
        modified:   src/services/authService.js
        modified:   src/setupTests.js
        modified:   src/store/index.js
        modified:   src/theme/index.js
        modified:   src/theme/shadows.js
        modified:   src/theme/typography.js
        modified:   src/utils/analytics.js
        modified:   src/utils/axios.js
        modified:   src/utils/bytesToSize.js
        modified:   src/utils/getInitials.js
        modified:   src/utils/settings.js
        modified:   src/utils/wait.js

Adding a step of npm install in readme.md

As I was setting my dev environment, I followed up the procedure that was given in the documentation apparently the command of npm install or npm install -g npm-install-missing is missing, adding that step will help newcomers to set up the dev environment easily and quickly, and also can check the project in deployment mode

Adding tags to Readme.md file

Problem faced

The Readme file still lacks some information. The short information will let the user / contributors get a quick glance of the projec.

Describe the solution you'd like

Adding shield.io tags will help the Readme File to me more specific for users

Storybook Env setup for writing stories for existing components

It is a feature request related to the environment setup of the storybook in the project edu-client.

Let me first explain what storybook UI is?

Storybook UI is an open-source tool for developing UI components in isolation for React. read more about it here

what does it mean by isolation

By isolation, it means that it doesn't affect the flow of the project means we have a separate env within a project which has nothing to do with react workflow all we do is to write stories for its components.

Now, what is a story?

In most simple words a story is referred to as the UI representation of a component.

why it is important or why do we need this in this project?

• It makes the project scalable like for ex: If A mentor is representing the project at any conference or something then if there are some people who don't know about the project that much or they want to know about project components means how different components are working, etc. So they can see the UI representation of the project's components which provides them a better picture of the project.

• It will be helpful for first-time contributors as well like if someone wants to contribute to in project and he/she doesn't know how to start with the project or how these comments are working then it will help them to learn about the project.

• As writing a story need creativity and good knowledge of component and it takes time as the codebase getting bigger with time and more components will be added with time so we can raise separate issues for writing stories which may help the beginner to contribute in the project as it doesn't require that much tech stack to write a story. we can also set up milestones to achieve this with the project. As it is very hard to write stories for all components for one individual so as we raise issues that may help different contributors, to work together.

why do we need this right now

As for now, the project is at the very beginning stage so it will be good to implement it right from the beginning.

Add Credits Section in README.md for contributors

Have a credits section in our README.md file like this to recognise contributors in the project.

Rename default branch to main

Rename default branch name to main from master

Create Upcoming section in Home

Need a section to display upcoming courses.

Create a new section in home

We should show some upcoming events or course in home.

We can create a new section under the "continue learning".

Logout Button Alignment Issue

Issue

By Clicking on profile picture logout button pops up, but the allignment of this button is overlapping with the profile photo

Fix

The logout button should have some margin on the top

Can you please assign this issue so that I could fix this
Thank you

Add splash screen inside Android/iOS Application.

What is feature

We want to have a splash screen for the ionic aplication when opened in android or iOS.

Describe the solution you'd like

Adding splash screen, requires a bit of ionic/ capacitor knowledge:
https://ionicframework.com/docs/native/splash-screen
.

Myclasses / Moreoption crash

Describe the bug

In myclasses section when we click on More option the page has no return button or no info available due to this we have to reload the page again

To Reproduce

Steps to reproduce the behavior:

1. Check for issue
2. Introduce some info
3. Make a redirecting route to Myclass when clicked on back button

Before clicking More options

##After Clicking More options

ESLint: react-scope-in-jsx is not required in React v17

As per the React v17 new JSX Transform, we can use JSX without importing React in each and every file.

Additional context

We should disable the rule "react-scope-in-jsx" from eslint from the project. Also remove all the react imports from every file.

Can't scroll the wishlist section

Describe the bug

A clear and concise description of what the bug is.
The Wishlist section card at the end is overlaped by the bottom navbar

To Reproduce

Steps to reproduce the behavior:

1. Try to scroll the wishlist section.

Environment (please complete the following information):

• OS: ubuntu
• Browser: firefox

Additional context

Add any other context about the problem here.
So I think we should add a little padding at the end.

Create course Details Page

Full Page pdf:
Course Details.pdf

We are breaking this issues into several sub issues, you are required to solve subissues.
We are MAterial-ui and Ionic-React

Create Course Card components for Course Page

Part 3 of #2

The component screenshot:

Please see the parent issue for more details and full design

The bottom navigation icons look outdated and want to work on new ones.

Events page

For now the Events page is showing no info so we can add

1. A carousel for Events pictures
2. Image cards for Events with basic info
3. Contact area

Documentation missing installation of dependencies from package.json using 'npm install' / 'yarn install'

Describe the bug

As per the documentation, after cloning the repository and setting up the remote, one can type 'npm start' / 'yarn start' in terminal directly and the project starts running but instead of running, the command gets terminated with 'react-scripts: not found' warning.

To Reproduce

Steps to reproduce the behavior:

1. Fork the repo.
2. Clone the repo.
3. Set up the remote as per the documentation/README
4. Open Terminal, go to the project directory and type 'npm start' / 'yarn start'

Environment (please complete the following information):

• OS:
• Browser:

Additional context

One should run 'npm install' or 'yarn install' before running 'npm start' / 'yarn start'

Add License to the Project

Adding MIT License to the project

Create a pull request Template

Create a pull request that covers all the requirements for A perfect Pull request and is not limited to:

• Perfect code style check
• successful build
• No console errors
• No console warnings (sometimes)
• Pull request against branch name
• responsive UI
• Test case being passed

Need Help! - Not able to run project locally

Command "start" not found.
after running the command yarn start

Create schedule view for course page

Part 2 of #2

Please see the parent issue for full design and more information.

Create Hero for Course Detail Page

Part 1 of #2

Compoenents are required to be made with material-ui: https://material-ui.com/

Adding Multiple languages

Is your feature request related to a problem? Please describe.

It would be nice if the repo has a Readme. MD for different, I know that it's not necessary at this moment and there are plenty of other issues to work on but it would make our community more welcomed for people who are from different communities and thus the Code for Cause can grow a lot from it

A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
I want to add a Readme.MD file for different languages

Describe the solution you'd like

adding a readme. md file in some other language maybe Spanish or french using Google translator or some other translator but I guess google translator will do it for us and linking it with the original readme. MD file

A clear and concise description of what you want to happen.
I want that if a person of a different community comes to the repo then he/she shouldn't get back from using our product or our app in this case just because he/she doesn't know the language but adding a readme. MD file that is in some other language and it's connected to the original readme. MD and also has the same content then it would take our community a long way

Additional context

Add any other context about the feature request here.

Bottom Navigation Design

The Bottom navigation buttons can be updated with a more modern design.

Add navbar with static pages

Is your feature request related to a problem? Please describe.

currently, there is no navbar on the top of the application for the web app and android app of the project. we can add a navbar with logo and link to static pages like about us, contact, etc.

screenshots

web app

Android through chrome inspect

Describe the solution you'd like

make a new navbar/header component and use that for all pages.

Documentation Update

• Basic of Fork,Clone & hitting a PR
• Setting up the Project Locally
• Code of Conduct
• Contributing Rules/Style (same as #13)

Typo error

Hi @Siddhant-K-code,
BottomNav.js file in "client/src/layouts/MainLayout/" is BoottomNav.js
I think i should change it.

Remove all errors from development console

Describe the bug
Application has a lots of console errors on the browser console window. We can fix it by doing some minor tweaks in code style.

To Reproduce

Steps to reproduce the behavior:

1. Start the application with npm run start
2. Head over to console window once application is live on localhost
3. These are the errors and warnings we can get rid of.

Expected behavior

There should 0 errors in the console.

Environment (please complete the following information):

• OS: Ubuntu
• Browser: google-chrome-stable

Fix some small mistakes in the README and add some hyperlinks

In the README there are some minor mistakes such as spelling or grammar which I can fix.
Secondly I propose adding links for the technologies being used so people can access them quickly.
I can work on this

scrollable list in Wishlist page.

The present wishlist page does not scroll.

Create Course Page

Full Course page:

Use Material UI for creating components:
Material-ui: https://material-ui.com/
Ionic: https://ionicframework.com/docs/react

Wishlist Alignment and Scrollable issue

Describe the bug

At present the wishlist section is not scrollable and also the alignment could be made better , font sizes are too small to be read

To Reproduce

Steps to reproduce the behavior:

1. bring whole list in an aligned div
2. Bring scrollability to the page
3. Use better font weight and size
   

Header and Navbar for the application

A header along with a navbar which are responsive and provide a user name and login and logout buttons.

Making a Step by Step Guide to locally clone and set up the project

A step by step guide along with screenshots showing how to clone and locally run the project using npm commands can be helpful for beginners looking to contribute to basic stuff but don't know how to setup this locally

Create a Contribution guideline.

We can add a Contribution.md for the project which will help the people in setting up the project and also tell them how to contribute and go over the basic steps of how to contribute.
I would like to work on this one.

Adding 1-1 interview using webRTC

It takes a lot of money to invest just to prepare yourself for an interview so why not users get a chance to interview each other by sharing their video, audio, and screen in a 1 - 1 fashion.

We could use technology like WebRTC to implement this feature. The interview process will not be limited to just solving data structures and algorithms related problems but could include much more.

Add placeholder login page and limit user from seeing content without login

Create swipeable views to swipe to change between the pages.

Adding Swipeable Views

Since the app is focused for mobile we can use in-built feature of material-ui to make the views swipeable . Swipeable in the sense that the user can navigate through the pages swiping left or right.

React-swipeable-views

To be able to make the views swipeable .We need to drop React Routing from the views. If the team is not planning on lazy loading the pages or code splitting, this feature is a must since it will give the user a mobile like experience.A major refractor needs to be done to support swipeable views.
Refer:-https://material-ui.com/components/tabs/

Profile Page not made [Static]

Describe the bug

The Profile Page is not made

To Reproduce

Steps to reproduce the behavior:

1. Inserting Card-Profile Feature:

• UserName
• email
• courses on going
• payment details
• DOB(age restriction according to policies)

You can assign me this task!

Create a .env file to store config keys

Create a .env file to store config keys of firebase auth.

Add: about us page

Hi @KeenWarrior @kunal-kushwaha ,
We should add:

• About us page
• Terms & condition
• Privacy policy

Can I work on them.

Issues with lock files.

Describe the bug

Some people are using npm and some are using yarn. I think it is not recommend to have both lock files. They could have sync issues. I looked into it to find a better mix yarn/npm experience.

Possible Solution

I think we could use yarn import to have a smooth mixed npm/yarn environments.
https://classic.yarnpkg.com/blog/2018/06/04/yarn-import-package-lock/
https://classic.yarnpkg.com/en/docs/cli/import/

Add favicon and title to the react app.

Currently, the edu-client react app has official react logo as a favicon and react app as a title. Edit that to CFC- codeForCause official logo (shown below in "after" snip from the official site)and change the title to codeForCause-edu.

before

after

Add a feature request template

Since the project is in its initial development phase, it would be good to have a feature-request template while proposing any new or additional features.

I am working on this and will soon generate a PR for the same

confusion

I thought the main idea of project was to create a platform where one can take live classes ,take tests ,upload notes and bea education system between a teacher and the student
but the pic shows something else
please just tell me the idea i thought of was wrong or the code was meant to be improved later

[Feature Update] Adding a Search bar with Explore Courses DROPdown button instead of Courses

I propose to add a Extensive search bar consisting of the logo at the left side of the Explore DROPdown button.

The Explore Button will include all the necessary things inside it like:

1. Goals
2. Subjects
3. Personal Statistics (preferably integration with WAKATIME)
4. [Extra features soon]

Why using the Left side approach will fetch more users?

here's why : Click ME

According to UX Research:- Web users spend 80% of their time viewing the left half of the page and 20% viewing the right half. Adhering to design conventions will help maximize users’ efficiency and company profits.

Please Assign me this job so that i can work on this asap!

Thank you,
Archie

Add prettier & make it auto format the code during commit

It could easily coexist with eslint

https://indepth.dev/posts/1282/setting-up-efficient-workflows-with-eslint-prettier-and-typescript

Bottom Navigation Button

Hi @Siddhant-K-code ,
Text of button doesn't change with the size, we should use css instead of material-ui (so that we can use "rem")

Bottom Navigation doesn't update according to the page.

Describe the bug

The bottom navigation for the website doesn't update according to the page.

To Reproduce

Steps to reproduce the behavior:

1.useEffect hook to update the value of the navigation each time according to the location will keep it updated.

Expected behavior

The Navigation will update each time the page changes.

Environment (please complete the following information):

• OS: Windows
• Browser: Edge

React.App.and.7.more.pages.-.Personal.-.Microsoft.Edge.2021-03-14.03-04-34_Trim.mp4

Create an issue templates

I propose to make an Issue Template, which will includes weather the issue is a bug or feature request, etc.

I would like to work on this issue, so @Abhishek-kumar09 can you please assignee this issue to me?

Thank you