Code Monkey home page Code Monkey logo

ianshulx / react-projects-for-beginners Goto Github PK

View Code? Open in Web Editor NEW
47.0 2.0 32.0 21.9 MB

Are you a beginner eager to enhance your React JS skills? Look no further! This repository is the perfect platform for you to dive into the world of React development and contribute to open source during Hacktoberfest.

Home Page: https://www.anshul.life/React-projects-for-beginners/

License: MIT License

HTML 7.77% CSS 26.61% JavaScript 62.10% SCSS 0.47% Less 0.29% TypeScript 2.76% Shell 0.01%
contribution contributions-welcome hacktoberfest hacktoberfest-accepted hacktoberfest2023 javascript mini-project opensource opensource-projects opensourceforgood react reactforbeginners reactjs beginner beginner-friendly beginner-project learn-to-code learning tutorial-code react-for-beginners

react-projects-for-beginners's Introduction

React Beginners Hacktoberfest Repository

Welcome to the React Beginners Hacktoberfest Repository! This is a special place for beginners who are passionate about learning and contributing to open-source projects using React JS.

NOTE: PLEASE CHECK YOUR PR0JECT CAREFULLY, IT SHOULD BE ERROR-FREE, YOUR PROJECT WILL BE REVIEWED If REVIEWER FOUND ANY ERROR YOU REQUEST WILL MARKED AS "INVALID".

Description

This repository serves as a platform for Hacktoberfest participants who are on their journey to mastering React JS. It's a place where you can share your mini-projects, learn from others, and contribute to the growth of the open-source community.

Whether you've built a simple calculator, a to-do list, or a weather app, your contributions are welcomed here. The main goal of this repository is to encourage learning and collaboration among developers who are new to React and open-source contributions.

What is Hacktoberfest?

Hacktoberfest is a month-long celebration of open-source software run by DigitalOcean. It's open to everyone in our global community. Whether you’re a developer, a student learning to code, an event host, or a company of any size, you can help drive the growth of open-source and make positive contributions to an ever-growing community. All backgrounds and skill levels are encouraged to complete the challenge.

Process of Contribution

1.Fork : Fork this GitHub Repo to your own github account 2.Clone : Clone the forked repo (the repo present on your account) to your local machine.

git clone https://github.com/ianshulx/React-projects-for-beginners

3.Create a new Branch

git checkout -b my-new-branch

4.Changes : Create a new branch and commit your changes on that branch. 5.ADD and COMMIT

  • Add your changes
git add .
  • Commit your changes.
git commit -m "Relevant message"

6.Push : After all changes are commited, push your changes to your remote repo.

git push origin my-new-branch

7.PR : After pushing changes, raise a PR from your remote repo to this repo's dev branch

By participating in this repository, you will not only be contributing to the open source, but also improving your skills in React JS. Let's make learning React fun and interactive during this Hacktoberfest! Happy Coding and Happy Hacktoberfest!

Contribution Guidelines

Please make sure to follow the contribution guidelines before making a pull request. Quality contributions are what make the open-source community an amazing place to learn, inspire, and create.

Find the full list of guidelines in the CONTRIBUTING.md file.

Code of Conduct

This project adheres to the Hacktoberfest Values ↗ and the Contributor Covenant Code of Conduct ↗. By participating, you are expected to uphold this code.

License

This repository is licensed under the MIT License.

Let's start contributing and make the open-source community a better place for everyone!

react-projects-for-beginners's People

Contributors

accodes21 avatar bhanu-code avatar devagya-rattan avatar iakash22 avatar iambijoykar avatar ianshulx avatar iluckyvirani avatar isaurabhverma avatar ojasggg avatar prriya-karn avatar purnasth avatar rahulkottak avatar rhnas110 avatar sandeepkrsuman avatar shagunz avatar trishan9 avatar ultron03 avatar utkarshtiwari1750 avatar yash19sinha avatar

Stargazers

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

Watchers

 avatar  avatar

react-projects-for-beginners's Issues

Add more projects

Enhance "react-project-for-beginners" repo by adding more beginner-friendly React projects. Diversifying the projects will provide learners with a broader scope of practice and deepen their understanding of React concepts.

Blob Generator - CSS Blob Creation using ReactJS

Develop a Blob Generator App.

Description 📜
A simple, minimalistic React Blob CSS code generator app.

Requirements 🛠️
The app, is going to have pleasing UI, with copy code to clipboard option, allow quick changes with Blob CSS code.

Bonus ✨
The app can have a various difficult CSS shape option in the near future.

⭐I would love to contribute the addition of this new mini-project to the React-projects-for-beginners repository.

Missing Favicon in the website

Hi Sir @ianshulx
I'm new to open source contributions and I'd really want to contribute to your project! Please assign this issue to me, Thank you for your response Sir @ianshulx . I also participated in Hacktoberfest2023.

test case for projects

it will great if someone writes some test cases to check that all the projects are error free.

feat: Sorting Algorithm Visualizer in react

Develop a Sorting Algorithm Visualizer in React.

Description 📜

This application has most of the sorting algorithm used in DSA and has visual representation of how these sorting algorithm works in background using clean UI in react. User can easily select different sorting algorithms, number of elements in an array and also can select the speed of sorting.

Requirements 🛠️

The app, is going to have pleasing UI, with various sorting algorithm JS code.

Bonus ✨

Can add visualization of many other interesting algorithm in near future.

⭐I would love to contribute the addition of this new mini-react project to the this repository.

Add more projects

Hey, I want to add more projects for beginners to this repository. Please assign me with hactoberfest label if you want.

React-Score_Game

A beginner friendly react score keeping app that keeps the score of each player and displays the winner at the end of the target.

React-Buy_Me_Sip

The main purpose of this project is to develop a React application that focuses on providing a seamless and secure payment integration for coffee purchases.
It integrate with Stripe, a trusted and secure payment gateway, to handle all your transactions. Checkout is smooth, quick, and protected, allowing you to enjoy your coffee without any worries.
The app will have an intuitive and user-friendly interface, making it easy for users to navigate through the coffee menu, manage their cart, review order details, and access their order history.
Discover a diverse range of flavors and choose your favorites to enhance your coffee experience. Explore different coffee options, and add them to your cart with just a few taps.

Add Search functionality

  1. Add search functionality in the top of the website.
    so that user can search the project and easily get those project.

  2. add some effect in the website for attractive page

feat: Text to Speech in React

Text to Speech in React

Prerequisites

  • vite + react
  • tailwindCSS or native CSS

Description 📜
Helpful application for developers or users who require their website to be accessibility for blind, deaf or even for normal users. Application have pleasing UI with various functions like sound, choice of voices and many more.

Future Updates✨

  • Can include many more voices which users are comfortable with.
  • Can create application give output in various languages.

⭐Please assign this task to me.

feat: Full Stack Chat Application

Description 📜
This application will have entire chat functionality. Use of Tailwind CSS for designing frontend with node.js and express.js to handle the backend API. For real time data transfer Socket.io will also be used.

Requirements 🛠️
The app needs realtime data or chat transfer.
Functionality of sending friend request.

Bonus ✨
Can add media transfer in future by using Amazon S3 bucket for storing Images or any media.

⭐I would love to contribute the addition of this new mini-react project to the this repository.

Adding google keep

Google keep is a note taking app that allow you to make small piece of notes. Please assign me this under hacktoberfest.
Screenshot (59)

[feat]: Create a Color Palette generator.

[feat]: Create a Color Palette generator.

Prerequisites

  • vite + react
  • tailwindCSS

Description

Create beautiful color palettes with the Color Palette Generator. Generate harmonious color schemes with a click and easily copy hex codes. A useful tool for designers and developers.

Update Index

Currently, there are 33 projects stored in the repository, but the index.html file only lists 22 of them. Could someone please update the index.html file to include all 33 projects? Additionally, I kindly request that all new contributors ensure their projects are added to the index file as well. Thank you for your cooperation!

feat: React Web3 theme Landing Page

React Web3 theme Landing Page

Prerequisites

  • vite + react
  • tailwindCSS or native CSS

Description 📜
Create Modern Landing page for companies related to Web3 theme. A useful design idea with modern and latest technology.

Extra✨
Can convert the entire design with developer personal need and requirements. Flexible with modern Tech Stack and design concepts.

⭐Please assign this task to me.

Tenzies-Game

A beginner-friendly react app working on the logic of tenzies game. Its a simple game based on dice results.

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.