Git Product home page Git Product logo

demondaddy22 / all-about-reactjs Goto Github PK

View Code? Open in Web Editor NEW
15.0 3.0 12.0 11.67 MB

I'll be working on 20 different ReactJS projects over the course of 60 days and try to create mobile-first, light and dark themed apps out of them.

Home Page: https://demondaddy22.github.io/all-about-reactJS/#/

HTML 0.83% CSS 28.36% JavaScript 70.81%
reactjs react-router html5 css3 javascript github-pages github-actions mobile-first hacktoberfest open-source

all-about-reactjs's Introduction

All About ReactJS

All Contributors Last Commit Repo Size Open Issues Pull Requests Workflow Status


If you want to contribute to this project, consider reading the CONTRIBUTING.md first to get a better idea of how to contribute to this repo.


I'll be working on 20 different ReactJS projects over the next 50 days. I would also be deploying all the projects so that it is easy to visualize the projects.

  1. TodoApp  ☑: A responsive ToDo app with functionalities of adding new todos, editing, and deleting existing todos. Also, data persistence is achieved by storing the todos in the browser's localStorage.

  2. Pricing Cards  💸: A responsive imitation of pricing cards. Also, introduced a dark theme, where text colors and background colors are changed based on the theme activated.

  3. Calculator  ➕➖: A responsive calculator that performs basic mathematical operations. Made use of eval (not recommended) to evaluate the expression string.

  4. Color Picker  🎨: A responsive color picker which allows user to select a color from a randomly generated color palette, or choose a color of choice which gets set as the background color of the header. Implemented various color util methods to help create this exercise.

  5. GitHub Profile Viewer  🙋: A responsive GitHub Profile Viewer which clones the view of searched user's GitHub profile by listing his/her profile details and repo summaries. Made use of GitHub API to fetch details of the searched user.

  6. Stone-Paper-Scissor  ✂: A responsive Stone-Paper-Scissor game built using React Hooks. The score is persisted using the browser's localStorage.

  7. Password Generator  🔐: A responsive password generator that allows the user to generate a password of specified length containing a random sequence of lowercase, uppercase, numeric or special characters. The user can also click on the generated password to copy it to the clipboard.

  8. Random Jokes  😹: A responsive random jokes app which renders random jokes fetched using the icanhazdadjoke API. User can like and copy the joke, and the liked jokes can also be easily accessed from a dedicated Liked Jokes section.

  9. Hover Board  🚥: A responsive hover board which consists of several small square-shaped cells, where each square lights up whenever it is hovered upon. The user can also click any square to lock the color of that cell and click again to unlock it.

  10. Key Code Sequence  ⌨: A response key code sequence generator which displays the code, key, keycode, which (deprecated) of the pressed key.

  11. Random Quotes  💭: A responsive random quotes app which renders random jokes fetched using the api.quotable.io API. This app also makes use of infinite scrolling to fetch more quotes whenever a user scrolls to the bottom of the page.

  12. Carousel  🎠: A simple and responsive image carousel which creates a controlled slideshow of images. The users can move between the images using the control buttons provided. An advanced and modern looking version of the carousel will be added in the future.

  13. Meal Generator  🍲: A responsive random meal generator which uses Themealdb.com API to fetch random meal recipes. Each fetched recipe not only contains a list of ingredients and instructions, but also links to YouTube video and source of the post.

  14. Bill Generator  💰: A responsive bill generator which displays an arbitrary taco menu, and a user can select different quantities of tacos, sides and add-ons. Based upon the items selected, the bill gets generated dynamically.

  15. Form with Validations  ⛔: A responsive form with validations which validates user's input responses. It is just a template form which doesn't store any information entered by the users.

  16. Alternate Grid  💢: A responsive alternate grid which displays an alternate ordered grid where one of the cells, in every row, contains some text information, and the other cell contains an image.

  17. Pokédex  📱: A responsive Pokédex which uses Pokeapi and is inspired by Pokedex.org. The user can search for the desired Pokémon using Pokémon's index or name and basic stats and info of the fetched Pokémon are then displayed.

  18. Twitter UI clone  🐦: A responsive Twitter UI Clone which clones the UI of Twitter feed to some extent. It's a simple UI clone of the feed, so none of the functionalities like liking, retweeting, etc. have been provided.

  19. Voting Poll  ✍: A responsive voting poll which lets user vote for an option from a set of options.

  20. Skeleton Loader  💬: A responsive skeleton loader which serves as a skeleton placeholder for the content. Used JSON Placeholder API and UI Faces for fetching mock content.


Contributors ✨

Thanks goes to these wonderful people (emoji key):


Rohan Gupta

💻 🤔 📖 👀

Vineet Nilawar

📖

Jaikishan

💻

Dipendra Neupane

📖

Ritika0126

📖

Aqsa Umar

📖

Mustafa Masvi

📖

phanlyhuynh

💻

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

all-about-reactjs's People

Contributors

allcontributors[bot] avatar aqsa48 avatar demondaddy22 avatar demondaddy7 avatar dependabot-preview[bot] avatar mustafamasvi avatar neupanedipen avatar phanlyhuynh avatar ritika0126 avatar vineetnilawar avatar

Stargazers

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

Watchers

 avatar  avatar  avatar

all-about-reactjs's Issues

Grammatical fixes in documentation

Fixes for grammatical errors are welcomed through PRs. Also, if you certain easy and quick ReactJS project ideas, you can add them to the README of this repo.

Add guide to contribute

Enhancing Readme.md documentation by adding step by step guide how one can contribute on ideas.

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.