communityofcoders/cocwebsite

The official website of Community Of Coders, VJTI.

cocwebsite's Issues

Add reminder email service for Events

Update README

We should update the README now. The changes could involve a better title, some information about CoC, and details about client and new_client.

Go back link gets covered by Mobile Navbar Icon

On nested pages that have a Go Back link, the Mobile Navbar Icon covers the arrow part:

Default option shown to a new user is "Logout"

I have observed that for a logged out user, the default option shown for auth is "Logout", even though the user has no auth token. The reason is the line 14 shown below. It checks localStorage.get('token') for an empty string. It should instead check if it's null

COCWebsite/new_client/src/reducers/authReducer.js

Lines 12 to 18 in 9a8cc70

	const initialState = {
	token: localStorage.getItem("token"),
	isAuthenticated: localStorage.getItem("token") !== "",
	isLoading: null,
	userID: localStorage.getItem("userID") ? localStorage.getItem("userID") : "",
	username: localStorage.getItem("username") ? localStorage.getItem("username") : ""
	};

This might be the same issue as the one mentioned at the end of this comment

Registered user count of the event is incorrect

The below function counts the number of registered users for a given event. However, there is no field users in the event object. The correct field is registeredUsers. Same needs to be changed in the controllers as well

COCWebsite/server/src/controllers/Events.js

Line 29 in f1e2292

const numUsers = (event) => {

Events page optimizations

1. Add Button should open a modal with AddEvent in it.
2. Edit should stay the same I guess since we need the eventId to edit the event.

Caveats:
If a user wishes to close modal, they should be warned that modal close will discard all data.

[issue]/[feature enhancement] Scrolling issue in dropdown of hamburger menu.

Steps to reproduce the issue
After opening the website when we click on the inspect element and resize the screen to the different dimensions
the drop-down menu is not Scrollable.

Expected result
The drop-down menu should be scrollable to increase the accessibility of that component.

Actual result
The component is fixed not showing any scroll feature.

System information (as much as possible)
None

Additional comments
None

Date of adding a new blog should not be user editable

• When adding a new blog, the date picker allows the user to select a date from the past or from the future.
• When editing a blog, the date picker allows the user to alter the date on which the blog was written.

Both scenarios provide undesirable UX.

Updating the `About Us` page for 2022-23 tenure

The heads and core team members have yet not been updated for 2022-23.

would like to take up this issue, could you please assign it to me?

Need to improve tests

Our api tets were configured to test all routes without middleware. In reality, certain routes like adding a blog, editing or deleting a blog, adding a new event, etc. need to be checked for authorization using middleware. (Ref #22 ). We need to mock those authorizations in our tests.

Sinon may be a good thing to look out for.

Footer covers content

As pointed out by @ShubhankarKG , the footer from #65 covers the main content.

Graduation Year should support Open to All category

Currently, Add and update event both have graduation year as a field. This field is a text field with validation that the input should be a valid number. However, some events are open to all and this should be allowed to be entered into the field. Also, some events may include students belonging to 2 different graduation years (Skill Up 2.0).

Allow filtering interview experiences using `Year`

Issue: Currently, there is no way to filter interview experiences using year. They are all showed together on the same screen (unordered/unsorted I believe)

Proposed Solution:

• Display the experiences sorted by the year. (For eg:. all 2021 experiences, followed by 2020, etc.)
• Add a filter by year option.

Redis causes server to crash

Traceback

events.js:292
[0]       throw er; // Unhandled 'error' event
[0]       ^
[0]
[0] Error: connect ECONNREFUSED 127.0.0.1:6379
[0]     at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1146:16)
[0] Emitted 'error' event on RedisClient instance at:
[0]     at RedisClient.on_error (/Users/saifkazi/Desktop/COCWebsite/server/node_modules/redis/index.js:341:14)
[0]     at Socket.<anonymous> (/Users/saifkazi/Desktop/COCWebsite/server/node_modules/redis/index.js:222:14)
[0]     at Socket.emit (events.js:315:20)
[0]     at emitErrorNT (internal/streams/destroy.js:106:8)
[0]     at emitErrorCloseNT (internal/streams/destroy.js:74:3)
[0]     at processTicksAndRejections (internal/process/task_queues.js:80:21) {
[0]   errno: -61,
[0]   code: 'ECONNREFUSED',
[0]   syscall: 'connect',
[0]   address: '127.0.0.1',
[0]   port: 6379
[0] }
[0] [nodemon] app crashed - waiting for file changes before starting...

Remove Some External Stylesheet Links

In new_client/public/index.html, there are some <link> tags that link to CDN stylesheets and fonts:

COCWebsite/new_client/public/index.html

Lines 8 to 14 in 33bf683

	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel=stylesheet href=https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css>
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<!-- Fonts -->
	<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css2?family=Titillium+Web:wght@700&display=swap" rel="stylesheet">

Fonts can be placed in new_client/src/components/assets, just like Recharge Bold is already there. This might speed up loading.

Also, there's already the @material-ui/icons dependency for icons, so Material Design Icons and Font Awesome links can be removed after changing all usages.

Navbar UI enhancement

A few changes are required in the navbar -

• Right-align all the auth links and left-align everything else
• Navbar overlaps content from various pages
• Navbar should not stick to the top while scrolling
• In mobile view, the hamburger icon isn't visible as both the icon and the backgrounds of a few pages are white in colour

flagship event cards are not centre aligned

The cards are not centre aligned however the Title text is. Must be related to flex.

Interview Experiences Feature

Users can read and submit their Interview Experiences directly on the Website.
Editor.js can be used for a rich block-styled text editor for the experience.

RSVP feature for events

The events part of the website is a bit garbled currently. We wish to establish a proper flow for the events section in the following manner:

1. Admin/Member shall be able to add an event.
2. Once an event is posted, dynamically generate a link that shall be sent along with a nice little event to all users registered.
3. On clicking that link, user shall see details of event.
4. User can RSVP for that event.
5. If user isn't registered, they shall be redirected to login first.
6. If user is registered, rsvp shall be noted and email reminder shall be scheduled.

We can fix the flow first as priority, and then take on the RSVP part as a followup.

Pagination in Events Page

The events page has no pagination which leads to a long scrolling page. Year-wise pagination can be added just like Alumni Section.

I can take up this issue. Please assign it to me.

Email validation for new user

When our new user registers, we don't validate their email address. If someone enters a wrong email ID, our mailer will then try continuously to send mails to a wrong email address, whenever a new event is created.

Solution: Implement email verification. We have a system already that is used for the "Forgot Password" functionality. On similar lines, we can send an email verification link to a new user on signup.

Specify engines in package.json

After the update to npm (7.x), the lockfile version was upgraded to v2.0. Some of our contributors might have npm 6.x installed, which results in a package-lock.json that has version as 1.0. This leads to multiple changes to the package-lock.json files.

One thing that we can do is to force a particular NodeJS version. Open for other ideas as well.

Events backend and frontend missing bits

If there are any errors while submitting the Event, the modal should not get closed, instead, it should stay on.

Edit event page is broken

Edit event does not put the content of specified event in the form fields.

Require padding for mission section

In the mobile version, there is no padding for the mission statement. Uniform padding on the sides like the learn section would look good. Below is the image of the current look.

Tracklist of bugs to be worked on, in priority.

• Implement projects banner to be consistent with all other pages.
• Fix RSVP schedule.
• Text appears on top on Chrome in Alumni back cards.
• Reset vertical scroll after changing page.
• Some CSS Missing on Add Event page.
• Bring events and project cards to a similar style.

Window Alert in Forgot Password Form

If there are errors in the Reset Password form, there's a window alert triggered.

Error text already appears on an invalidform submit, so this alert is not required. There are alerts in the ResetPw and the NewPw components. We should probably remove them.

Secure restricted routes

All the add routes should not be accessible when we are not logged in:

I am not logged in, but I'm able to access this route, which should not be allowed.

Implement redux to ease state handling

Currently, auth state is being handled by state lifting. Redux is a viable option for consistent state management. Implement that in existing functionality.

Improve UI of glimpses page

• Add vertical padding to all glimpses page
• Currently, there is no back button to go back to the all glimpses page from an individual glimpses page

Setup CI pipeline

CI providers like Travis or CircleCI can be used to check mergeability. We'll have to write tests for that.

Fetching effect in Projects triggers continuously

COCWebsite/new_client/src/components/projects/Projects.jsx

Lines 9 to 14 in 1a6ae09

	useEffect(() => {
	axios.get(process.env.REACT_APP_API + "/domains").then((res) => {
	const domainList = res.data;
	setDomains(domainList);
	});
	});

This effect runs infinitely, since it sets the domains state.

Add a footer to all pages

A footer is a common part of a website's UI. We can add a footer with links to our GitHub and Social Media accounts.

Streamline Production deploys

This is an umbrella tracker issue and is aimed to solve majorly the following:

• Streamline the entire deployment on production environments throughout Github actions.
• Keep a copy of production necessary files in a directory, preferably only on the prod branch.
• Use Releases to ease up deployment.

Order of cards in the Alumni Section

Currently, the Alumni cards are displayed in the order in which people submitted their details. It will be better if we display the cards in alphabetical order of name. Sorting can be done anywhere - frontend or backend

Better Design for the Footer

Currently, the Footer on the website has some padding issues. Can we fix it?
I've designed this Footer Layout in Figma. (1st is new, 2nd is old)

Mobile View:

I can work on this.

Increase the JWT validation time, or auto refresh the token

If our user stays logged in for a long period of time, they won't be able to access the API because of JWT Expired. Either we increase the JWT validation time, or we implement some sort of auto refresh token in our client side.

use circular progress indicators during api calls

Our codebase makes an API call very frequently. When we make an API call, there is a slight delay, and we have no UI to display this to the user. All we have is a blank screen.

If we know we are making an API call, we can display a CircularProgessIndicator to the user till the data fetching is complete.

New Navbar

We have been following the navbar as designed earlier, but we need a new design for the navbar, something that is really catchy but not too overtly expressive. We'll need the following sections -

1. Home
2. About Us
3. Events
4. Glimpses
5. Blogs
6. Resources
7. Projects
8. Sign In / Logout

We don't have new designs in mind, so if someone is able to come up with a cool design, we'll encourage that, else we'll put up our own designs.

Send event mails only to users of the years the event is targeted to

While creating a new event, there should be an option to select which Academic Year students receive the mail. Currently, the mail is being sent to all the registered users.
Eg. 2023, 2024: So both year students will receive the mail and not others.

Code Repetition in Server Ejs views

In server/src/views code is repeated over the files

Suggestion :
One can create a base Ejs View and using partials extend the existing views in order to remove the code repetitions

The following Code seems repeated :

  <!DOCTYPE html>
  <head>
  <style type="text/css">
    @import url('https://fonts.googleapis.com/css2?family=Catamaran:wght@400;800&display=swap');
    * {
      margin: 0;
      border: 0;
      padding: 0;
    }
    body{
      font-family: 'Catamaran', sans-serif;
      background-color: #ffffff;
      font-size:18px;
      max-width: 700px;
      margin: 0 auto;
      padding: 2%;
      color:#565859;
    }
    #wrapper {
      background: #f6faff;
      border-radius: 7px;
    }
    img{
      max-width: 100%;
      margin-top: 2%;
    }
    header {
      background: #000000;
      border-top-left-radius: 7px;
      border-top-right-radius: 7px;
    }
    #logo{
      max-width: 500px;
      margin: 2% 0 0 5%;
      
    }
    .one-col{
      margin-top: 2%;
      padding: 2%;
    }
    h1{
      letter-spacing: 1%;
    }
    p{
      text-align: justify;
    }
    .button-holder{
  
      margin: 3% 2% 4% 0;
    }
    .btn{
      background: #52b107;
      color: #f6faff;
      text-decoration: none;
      font-weight: 800;
      padding:8px 12px;
      border-radius: 8px;
      letter-spacing: 1px;
    }
    .btn:hover{
      background: #5bc40b;
    }
    a{
      color:#52b107;
      text-decoration: none;
    }
    .line{
      clear:both;
      height: 2px;
      background-color: #e3e9e9;
    }
  </style>
  </head>
  <body style="font-family: 'Catamaran', sans-serif;background-color: #ffffff;font-size: 18px;max-width: 700px;margin: 0 auto;padding: 2%;color: #565859;">
    <div id="wrapper" style="background: #f6faff;border-radius: 7px;">
      <header style="background: #000000;border-top-left-radius: 7px;border-top-right-radius: 7px;">
        <div id="logo" style="max-width: 500px;margin: 2% 0 0 5%;">
          <img src="https://res.cloudinary.com/dw2ejcbvt/image/upload/v1609946419/qq_suisct.png" style="max-width: 100%;margin-top: 2%;">
        </div>
      </header>

improve UI of individual blog preview

We want to customize the card preview of our blogs section such that the edit and delete icons are on the top right and read more is at the bottom right.

Display creators name in Project Section

To display the name of the person who created that project in the Project Card.
The Projects Schema already has a field named owner that can be used here.

Use flash messages to show errors.

We can use the connect-flash library

Use DB or persistent InMemoryDB for email schedulers

Lets use MongoDB. We can refer to events by id, and schedule it again, if such an event does not exist.

Considering this is a big change, lets raise an issue for it, and do it in another PR. We can merge this PR once the other points are addressed

Originally posted by @AliabbasMerchant in #27 (comment)

Typewriter Effect in Home component causes content below it to move vertically

On smaller screens (about 370px and lower width), the words in the typewriter effect cause the content below to move up and down:

This makes scrolling down and reading a little inconvenient.

Navbar overlapping with all events list

#47 adds a new navbar to the website. However, the page which shows all the events does not take into account the height of the navbar. As a result, the navbar overlaps the list. The same could be true for rest of the pages, but that's yet to be verified. Here's an image of the same,