Giter VIP home page Giter VIP logo

hacktober-fest's Introduction

Hacktoberfest 2023

Note: The Hacktober Fest page is built using React; a JavaScript library for building user interfaces and Vite; a frontend tool used for building fast and optimized web applications.

Powered by:

mlh-logo-color

Steps to run the site on your local system:

These are the steps you need to follow to get this site on your local system.

Install Git in your computer

Follow these steps to install git in your computer.

  1. Go to https://git-scm.com/downloads.
  2. Click on Windows. Download should start.
  3. Go to downloads and install the package.

Clone the repo

Open Git Bash in any folder and paste the following command

git clone https://github.com/tcet-opensource/hacktober-fest.git

Install NodeJs

  1. Go to https://nodejs.org/en/download
  2. Select Current.
  3. Download the 64-bit .msi version. Follow the steps and install NodeJS.

Note: It is important to have NodeJS in your system

Open the folder in VS Code

  1. Install VS Code if not installed.
  2. Open Windows Terminal in the folder you have cloned the repo, as done in step 2.

Install Important Packages/Dependencies

Install pnpm globally

npm install -g pnpm

You can make changes to your respective files and changes will be shown once you have saved the file.

Commands used to run locally

  1. To run the commands, make sure that you have installed pnpm globally first.
  2. All commands are run from the root of the project, from a terminal

Here are a set of commands used to run locally:

Command Action
pnpm Installs dependencies
pnpm run dev Starts local dev server at localhost:3000
pnpm run build Build your production site to ./dist/
pnpm run preview Preview your build locally, before deploying

Steps to run after a Pull / Merge:

  1. To install all dependencies
pnpm install
  1. To run local dev environment
pnpm run dev

hacktober-fest's People

Contributors

0amirk avatar alstudd avatar amitsuthar69 avatar ayeshnasingh avatar beluga0000 avatar demonkillerr avatar harsh3363 avatar himanshu-03 avatar horror26 avatar kamalika0363 avatar mohitbansal321 avatar oblivious19 avatar pranaytiwariii avatar rahilsiddique avatar shivam-fl avatar shlok-2003 avatar tanishakumar18 avatar vish-rt avatar yashodharpatel avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar

Forkers

rizzabh aditi020 tanishakumar18 beluga0000 aisu2635 posh101 shubhashish77 alstudd mohitbansal321 harshau007 sambhavgoel demonkillerr

hacktober-fest's Issues

[FEATURE] - Height of Register button to be changed.

Describe the improvement

Current height of the button seems a little off from the UI given in the Figma file.

image

Why do we need this?

Improvement in the overall frontend.

Do you have a proposed solution?

Possible Solutions

  1. decrease the height
  2. decrease the padding

Do you want to work on this feature?

  • I am willing to implement this feature.

Terms and Conditions

  • I agree to follow this project's Code of Conduct

[BUG] - Error in setting up the project

Describe the bug

When we try to set up the project locally facing a issue .when we going to set up i am getting the local host link but after that its showing a error that "The following dependencies are imported but could not be resolved:" react-router-dom whinch is in navbar.jsx file.

Actual behavior

Getting the react-router-dom error after pnpm run dev

Expected behavior

We should not get that error

How to Reproduce?

  1. pnpm run dev
    Uploading issues.png…

Screenshots

No response

Terms and Conditions

  • I agree to follow this project's Code of Conduct

[NEW] Footer

image

  1. Keep it responsive
  2. the right side part can be put below the right side part in small screen

[FEATURE] - <Remove the border from logo>

Describe the improvement

It does not align with style pattern you follow in the navbar
before
TCET before
after
TCET after

Why do we need this?

Improvement in the design consistency and aesthetic considerations.

Do you have a proposed solution?

Remove the border class from the logo element in src/Components/Navbar

Do you want to work on this feature?

  • I am willing to implement this feature.

Terms and Conditions

  • I agree to follow this project's Code of Conduct

[NEW] Navbar

image

  1. Make it responsive (Mobile first)
  2. Do not add gradients

Button

Describe the bug

  1. Their is a small issue with the button with the text About us.It is overflowing the boundary. - (mobile view)
  2. In the footer page About Us link is not aligned in a single line. - (mobile view)

Actual behavior

No response

Expected behavior

No response

How to Reproduce?

how to fix:

solution one: Apply media query .
solution two: Adjust margin & padding and use css properties.

Screenshots

Screenshot 2023-10-16 171544
Screenshot 2023-10-16 172754

Terms and Conditions

  • I agree to follow this project's Code of Conduct

[FEATURE] - FAQ section should be above the footer.

Describe the improvement

The current site has "Find out about hactoberfest" card above the footer. The FAQ section should be above footer and not the card.

The current site:

Screenshot (70)
Screenshot (71)

We need:

Screenshot (69)

Why do we need this?

Improvement in the design consistency, aesthetic considerations.

Do you have a proposed solution?

Solution:
Editing the src/pages/home.jsx file

Do you want to work on this feature?

  • I am willing to implement this feature.

Terms and Conditions

  • I agree to follow this project's Code of Conduct

[NEW] FAQ Section

image

  1. maintain padding and responsiveness in accordion
  2. do not put gradient this section which is extended in the upper component

[NEW] Explore Section

image

  1. keep it one card per section in small screen
  2. on clicking see more it should display only 1 more row
  3. do not hard code, map all the data

[FEATURE] - <title> mobile verification

Describe the improvement

Mobile number verification, an extra security layer.

Why do we need this?

This will reduce the number of fake accounts, also information can be sent to can be sent via SMS as people tends to read their sms more than they read their email.

Do you have a proposed solution?

A mobile number verification is needed.

Do you want to work on this feature?

  • I am willing to implement this feature.

Terms and Conditions

  • I agree to follow this project's Code of Conduct

[NEW] Hero Section

image

  1. Make proper use of svg
  2. navbar gradient should be included in this component (overflow)

Shorten Hero Section Content, Adjust Register Button Position

Describe the improvement

  1. The hero section content currently contains 7 lines of text, which is too long. It should be shortened to 3-4 lines for better aesthetics and user experience.

  2. The main register button's position should be adjusted to maintain the desired layout and design.

image

Why do we need this?

Improvement in the design consistency, aesthetic considerations.

Do you have a proposed solution?

Possible solutions :

  1. shortening hero section content
  2. Adjusting location of main register button so that it does not shift.

Do you want to work on this feature?

  • I am willing to implement this feature.

Terms and Conditions

  • I agree to follow this project's Code of Conduct

[FEATURE] - Decrease width of the text in the "Find out about hacktober" section

Describe the improvement

The width of the text should be decreased. Also try to get the spacing right between the heading, sub heading and button. Don't change the text of the button.
The current site:
Screenshot (72)
Expected result:
Screenshot (73)

Why do we need this?

Improvement in the design consistency, aesthetic considerations.

Do you have a proposed solution?

Using appropriate css properties.

Do you want to work on this feature?

  • I am willing to implement this feature.

Terms and Conditions

  • I agree to follow this project's Code of Conduct

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.