hackodisha/hackodisha-web

Website for Hackodisha organized on the eve of diamond jubilee celebration of NIT Rourkela

HackOdisha

Hackodisha brings an enterprising platform where hackers can showcase their unique ideas and expand boundaries with their creativity and proficiency. Webwiz, the technical club of NIT Rourkela is proud to host the hackathon on the eve of the diamond jubilee celebration of NIT Rourkela and strives to make it exciting, edifying, and educational. We will also be having many Pre-hack events for around a month where multiple communities will be organizing workshops and competitions. In this 36 hours

Hackodisha-web is Starware.
This means you're free to use the project, as long as you star its GitHub repository.
Your appreciation makes us grow and glow up. ⭐
The license of this repository has changed from MIT License to GNU AGPLv3.

Development

Prerequisites 👨‍💻

Install Node JS

Refer to https://nodejs.org/en/ to install nodejs

Install create-react-app

Install create-react-app npm package globally. This will help to easily run the project and also build the source files easily. Use the following command to install create-react-app

npm install -g create-react-app

Cloning and Running the Application in local 💻

Clone the project in localhost

git clone https://github.com/Hackodisha/hackodisha-web.git

Install all the npm packages. Go into the project folder and type the following command to install all npm packages

npm install

In order to run the application Type the following command

npm start

The Application Runs on localhost:3000

Contributions are welcome 🎉🎉

Ways to contribute:

1. Solve the issues which are listed
2. Create your own issue and then send PR.

Please refer to the project's style and contribution guidelines for submitting patches and additions. In general, we follow the "fork-and-pull" Git workflow.

1. Fork the repo on GitHub
2. Clone the project to your own machine
3. Commit changes to your own branch
4. Push your work back up to your fork
5. Submit a Pull request so that we can review your changes
6. So, feel free to fork this repo. If you do, please just give us proper credit by linking back to our website, https://hackodisha.xyz/.

Please abide by Contributing Guidelines and Code of Conduct 🚀

Major Contributors ✨

Thanks goes to these wonderful people (emoji key):

Aniket Pal 🚧 🧑‍🏫 📆 📖 💻 🖋

Sumana Basu 💻 🐛 🤔

This project follows the all-contributors specification. Contributions of any kind welcome!

hackodisha-web's Issues

Semantic tags

Some divs definitely should be article or section. main and nav tags should be present on the page too.

Mobile Usability Issue

Scroll down to the prizes section then click on the prizes card in mobile view the content is overflowing. Need to resize the card and the content. If you find any more bugs except the prizes section, you can create an issue or reply in the thread over here. More specifically the issue raised by the web crawler is:

• Clickable elements too close together
• Content wider than screen

Do attach screenshots of the changes you have made.

Cross-origin links

Social media links are unsafe, so please add rel="noopener" or rel="noreferrer" to improve security and performance 🙂

no hover effect on footer links

[Bug] Provide meta description

To Reproduce
Open page 😄

Actual behavior
Meta description is not provided, which has a bad impact on website.

Expected behavior
With meta description search engines have an easier task and they can confidently show the page in search results 😁

Update README

In README.md in install section wrong repository link is presented 😉

Update CONTRIBUTING

In CONTRIBUTING.md, in Git workflow section wrong repo has been presented, users will fetch content from the wrong repository!

Contributors

What do you think about adding allcontributors bot and section in README to the project? if you find the idea is good, I can take care of it 🥰 @Aniket762 @Sonakshi1901 @sumana2001

Use only one way to style components

I think using different styles of styling in one project will be very difficult to read, so I suggest to rewrite all styles using only Styled Components 😁

Images formats/sizes

I think in our situation, when we are providing all images, we should properly prepare them. Serving them in appropriate format (e.g. WebP) and respectively size them can save seconds on page load!

Build folder

Build folder should not exist in repo on Github. Please add it to .gitignore 😊

Navbar

Change links effect from border to pseudoelements. It's look terrible, when links are not centered

[Code] Loop rendering

I don't think it looks good:
https://github.com/Hackodisha/hackodisha-web/blob/main/src/pages/sponsors.jsx

It's definitely should be rendered in a loop to reduce redundant code.

Tip: create an array with data and then use map method

[Feature] Make gold sponsors logo vertically centered

Problem
I think some logos are not vertically aligned to centered, doing so may look better aesthetically.

Idea
In each grid image should be centered vertically and horizontally.
what it should look like.

Notes
what it currently looks like

[Bug] Navbar on mobile is illegible

To Reproduce
Open navbar on mobile view

Actual behavior
Without background navbar links are illegible

Expected behavior
Add some background to links list to make it more readable

Notes

Optimizing and resizing the images of the website

Tasks to be done

• Resize the map image (homepage) using photoshop or some third party sources to reduce loading time.
• Resize the logos of the sponsors so that the overall folder is not more than 1MB.

No coding required, just plain photoshop and manual resizing of images.

[Feature] remove react-scroll

Problem
Do we really need react-scroll?

Idea
Remove react-scroll and replace it with simple anchor links and scroll-behavior: smooth in CSS

Notes
https://gomakethings.com/smooth-scrolling-links-with-only-css/

Add light mode

Add a button in the navbar such that when toggled light mode and dark mode can be fetched. You can get the blobs from the zip file attached below. And use that while developing the light mode background. Not necessarily white but any light color which you think will look good feel free to implement. No need to making any branches create the PR for the main branch.

blobs.zip

Please do attach a gif or screenshots on how does it look after making the changes😎

Fixing the Sponsors page

[Bug] Images without `alt`

To Reproduce
Enter a page

Actual behavior
Some images don't have alt attribute, it's definitely a bug, even if the picture is only decorative alt must be present

Expected behavior
Add alt attribute to help e.g. screen readers to announce images correctly

Notes
Some example of bugged images:

Create the Speakers page

• Create a separate page with dynamic cards
• Add "Speakers" in the nav bar.

Create and add 4 cards in the Prizes page

Tasks to do:

• Create a separate card component which would display the details when a cursor is brought to it.
• Put it in a loop and display it 4 times in the Prize section in a grid format (ideally 4 in one row).

Do share your ideas as screenshots and mention the animations you would use.

Popup button for all the track cards

The cards in the tracklist do not have any additional info about them.

• Create a "Know more" button
• Create a popup that shows the info for all the track cards using material UI or an npm package.

Landing Page resizing

Open the web application and then via inspect element check the responsiveness you can spot overflow of the map and content overlapping. And add some margin between the 2 buttons ie the Devfolio button and the Discord button. Do attach screenshots of the changes you have made in case you spot some more issues you can create an issue or reply back in the thread here.

I think if the faq response is left align then it will look better

Redirect the 404 page back to homepage

Create a function to redirect users to the Homepage in the 404.JSX file.

Refactor sponsor section

Refactor the sponsor section of code in sponsors data and sponsors page. Define a parameter type as one key, in sponsor data in which the types can be platinum, gold, silver, and bronze. According to the type use map and filter to divide the sponsors in the following cards. In case of confusion feel free to reply in the thread would be more than happy to explain.

Hackathon Schedule Component

Improving the responsiveness (mobile view)

Improving the navbar

A red underline appears while hovering on the links of the navbar. Add a function to the links so that the hover state persists even after the link is clicked on.

Adding responsiveness to the buttons in homepage.

The buttons 'Apply' and 'Discord' have been created but it looks out of place in the mobile version. All you need to do is change the size of the buttons and add some margin to it. Make sure that the buttons are placed below the date.

PR, issue template

I think creating PR and issue template will be very helpful, especially for new people, who has joined the project. They will can easily describe their bugs or changes, which they have made in the app.

This article describes the entire step-by-step instruction:
https://docs.github.com/en/communities/using-templates-to-encourage-useful-issues-and-pull-requests/configuring-issue-templates-for-your-repository

Improving the responsiveness of homepage

It is a very tedious task to make the hackodisha map image, date and the buttons responsive using mediaqueries. If @Bartek532 has a different method of doing so, it would be very helpful. You can change the entire code but just keep the design as it is.

[Bug] FAQ

Actual behavior
In FAQ section questions are grouped in two columns, when user uncovers a few questions, the rows become asymmetrical and it looks not very good

Expected behavior
I think, better idea is to show questions (and answers 😁) in one column, one below the other, what do you think?