codeforcauseorg / codeforcause.org Goto Github PK

Dynamically change the number of remaining characters as user types in something.

I think its a great idea to embed youtube videos and other coming up contents, blogs, articles, community, etc on a new page.
So that there is more to see when a user gets to our website.

Expected result :

You can see this with landing on the homepage, and realising that the `Events Section is loaded after some time disturbing the scroll position.

You can remove some number errors from the console and create a PR in chunks like removing some at a time

We are having many errors total 20 - 21 currently with rendering or other components. Reduce to 0 error is our goal.
Steps to reproduce:

• start the development server with npm run start
• open console
• watch error panel

Add a simple setting which makes the website go light, or dark, for the creatures of the night.

ALthough having a good internet speed, our website loads slower. This is clear that this is caused due to bigger image sizes that we actually dont need, because we are afterall using smaller resolution image on site.

WorkAround:
The mentors section should use smaller resolution pictures.
And youtube/course videos should fetch images from the youtube api (much much faster, because youtube is cached in almost everyones computer)

Here is the component design

Here is the full prototype: #199

I was assigned to #82 which required me to add validation to the Campus Leader Application Form. Before creating a pull request #86, I tested the changes with my credentials to check whether the validation was working or not. I assumed that there would be separate databases for production and development.

However, this morning I received an email that I was selected as the Campus Leader. I have mailed the team to exclude my candidature but I am also creating this issue to state the requirement for having separate databases for production and development so that such errors will be avoided.

I have seen commented out sections of code in multiple files. I don't understand their purpose as they are just code and does not conveys any useful information. In my opinion, it will be better to remove them to improve code quality.

ReadMe says:

Remember to run npm run format before creating pull request.

But npm format doesn't exist.

$ npm run format 
  npm ERR! missing script: format

Available Scripts:

    "lint": "eslint ./src",
    "start": "PORT=5000 react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"

Maybe lint was the required script, but it again shows lots and lots of errors instead of formatting code.

Tapping to any random url is taking to blank page, instead the user should have routed to 404 page.

There must be validators for forms like:

• Mobile numbers can only have digits
• Email should have proper format
• Url and handles should be validated
• Year should be single digit.
• and so on.

The open source div is not serving any click events, Is it good idea that clicking on open source would redirect a user to our open source projects @codeforcauseorg.
What is your view?

Currently, there exists a header on the home page but that doesn't align with the prototype design.

We need to shift to provide design.

There are many dependencies like "react-quill", "formik", "immutable", "react-draft-wysiwyg" and many more...

Add this section in between WhatWeStandFor and Team section

you can take ref from https://github.com/codeforcauseorg/codeforcause.org/blob/development/design/home_view/home_web.pdf

Expected result

src/components/PostCard

• Files that can be deleted

All the Files are important based on their functionality but is not used in current codebase but future feature updates can include this. So we can Delete it from here but archive this somewhere else.

• Not used but Important Components: Should not be removed
  They are the part of Redux and Redux-Router-DOM and state management
  src/reducers
  src/services
  src/store

• package that can be removed:
  QuillEditor

• Codes that can be optimised:
  Topbar
  Auth, etc

• Contents that can be moved to src/data
  https://github.com/codeforcauseorg/codeforcause.org/blob/d4ad2c5b5f8c95531be5f71867206cd633c36b03/src/views/pages/CLView/CLViewData.js
  https://github.com/codeforcauseorg/codeforcause.org/blob/ffd4352664c9d55a6d6cf73bb733df724e148ec7/src/views/pages/HomeView/HomeViewData.js

And other optimazations that should be followed after these changes.

Do we have that play button svg already available?

The current scroll bar, in my humble opinion, does not look very pretty (even worse than the default one). Now, compare this to something like,

and you can already start to see a massive difference.

Update font family for the website to Montserrat

you can find the detail of font at https://fonts.google.com/specimen/Montserrat

Currently the user is redirected to google forms for submitting such requests, We should instead make our own forms and process internally.

Here is the component design:

here is the full prototype #199

I found this link to be broken in REAME. Moreover, I think that this should be https://sandbox.codeforcause.org instead, but I am not sure.

Distortion in check detail button on smaller/mobile screens:
see image

Steps to reproduce:

1. Visit codeforcause homepage on mobile device
2. scroll down to course section
3. Check details button is cropped from bottom.

The current hover effects are plain, simple, and not very fun. Making cooler hover effects for things can have the following possible advantages

• Make people stay on the website longer.
• Make people be more likely to buy the course.
• Just have a better user experience on the site overall.

The testimonial section follows reverse motion when all the array of cards is shown, we should make it unidirectional infinite.

While switching to a different route
The scroll postion is expected to move to top ( window.scrollTo(0, 0) )
But it remains fixed and does not work the way it was expected in the function

Add .nvmrc file targetting to the latest node LTS version 12.16.1

We need to show customized popups, anouncements and recomendations. I think hello-bar is good to start with.

Description

The Code for cause card is overlapping with the mentors card in home page in mobile view.

Steps to reproduce

1. Click on live website
2. Scroll through homepage
3. See the error

Screenshot

Mobile

OS: Android 10
Model: Samsung Galaxy M30s
Browser : Samsung Internet

We code for cause are commited to provide opportunities to everyone we know, for maximizing the reach to job providers an Hire-with-us page is strongly needed.
We can make this by breaking things into components:
Download full pdf prototype:

Hire With us-min.zip

There are smaller issues linked to it, we should write the code for seperate components as component issues are linked with it.

You should create page in https://github.com/codeforcauseorg/codeforcause.org/tree/development/src/views/pages by making its seperate folder.

Ping with tagging any of the project maintainer for any small or big help.

The homepage takes up to 20 sec to load completely on a fast broadband connection.

This is due to larger than the required image sizes that can be optimized and still look good.

Solution:

The highlighted assets can be optimized i.e. should use the smaller and compressed pictures.

this was mentioned in #42 as well

I think most of the developers use google calendar to manage events around them to get reminded of the stuffs around them. Infact it is natively supported in android devices that could pop up the event dates and times in the notification panel.

We can add a google calendar in our website that could just take us to google calendar to mark the event dates so that no one could miss or forget our live sessions.

Backend help: https://stackoverflow.com/a/21653600/13635762
Frontend: I think we can make a new button for this or click on the date(The green strip in which event date is written inside event section) that will take us to create an event.

Actually everytime some unused variables are left out while pushing code to github even after running npm run format.
And netlify preview fails building.

AIM: Add no unused var check on npm run format

We can either do some backend stuff to cache the user into our system or if not possible we could place a circular progress bar until the state of the user is known(loggedIn/Not)

From user experience perspective, I believe it will be better to change "Apply Now" to "Coming Soon" if that's the case.
Also the link points to a form to signup for Code For Cause newsletter. Is this desirable?

when clicking on the campus leader option rest of the option gets vanished making difficult for the user to check other pages.

Create hire-with us Hero component
Here is the hero component:

Here is the full prototype: #199

Can I customize the scroll bar in the website so that it will not look dull like present
I will send the screenshot before the pull request
Can i work on this ?
Edit : I think this will look great with the website theme

Multiline input field on Events page breaks on devices smaller with width less than 500px
It is having width greater than screen width.

I would like to work on this issue.

Expected Result

we can add semi rule to eslint so that semi colon is added to the places where one forget to add after running npm run format

Eslint docs: https://eslint.org/docs/rules/semi

Summary of Requirements

• New rule added to eslint rc
• npm run format used to fix any violators

I want to work on this

Adding issue and pull request templates makes organization much easier, and makes a smoother collaboration for both the devs, and the people opening pull requests/issues.

If you like, I can create a PR for it. Alternatively, you can add it yourself, it's not very hard 😄

Adding a section in footer for important links might be a good way to go.
Pledge website: https://pledge.codeforcause.org/

Expected result :

Content and assets will be added in the comment section by tomorrow. you can proceed with component structure till then.