Git Product home page Git Product logo

react-coding-challenges's Introduction

A series of ReactJS coding challenges with a variety of difficulties. Deep dive into the why here.

Interested in some React fundamentals / philosophies? Check out the react-philosophies GitHub repo.

ย 

Sponsored

Time To Estimate. A fun, simple way for agile teams to remotely estimate tasks together. Free, with no sign-up required.

mixmello. Create remixed versions of your favourite Spotify playlists.

ย 

The Challenges

Easy ๐Ÿ™‚

๐Ÿš€ Rocket Ship

Unnecessary re-renders, fine grained control.

ย 

Medium ๐Ÿ˜

๐ŸŒ™ Dark Mode

State / shared state, DOM manipulation.

๐Ÿ Coinbee soon

Data visualisation and graphing. API usage.

ย 

Hard ๐Ÿ˜ฌ

๐ŸŽง Spootify

Loading state, API usage.

๐Ÿค– Chatter

Web sockets, events, callbacks & React hooks. Talks to Botty.

ย 

Future Challenges later

๐Ÿ›’ shopit

A product page with a shopping cart/checkout experience.

ย 

What are the challenges for?

They could be:

  • Short coding exercises, for use in interviews with candidates
  • Ways for you to test yourself / test your coding abilities under pressure
  • Fun exercises to help you learn React

ย 

How do they work / how do I get started?

The scaffolding of each challenges / app is done for you and each challenge has create-react-app as its foundation.

  • Clone the whole challenges repository
  • Run yarn or npm install in any of the individual challenge directories to install dependencies
  • Run yarn start or npm start to start the application on port 3000 (CRA default)
  • Each challenge has a README with requirements for you to complete

Some challenges might require usage of external APIs, but all information will be provided in the individual challenge readme.

ย 

Have you got the solutions?

All the coding challenges have been completed to a high standard. Get an automatic invite to the solutions repository at solutions.alexgurr.com.

ย 

Why are the solutions invite only?

People use these challenges for interviews. By putting the solutions behind a collaboration wall / invite-only repository we can discourage candidates from simply looking up the solutions.

ย 

Can I search for GitHub users and see if they accessed the solutions?

Yes! We track current / past collaborators, meaning if you want to check if a potential candidate had access / looked at the solutions you can simply search for them. You can do this by clicking the search icon in the top left at solutions.alexgurr.com. and searching for them.

ย 

Why does it take so long for updates / new challenges?

I work on these challenges & solutions in my spare time, on top of a full time job and everything else that comes in life. Because of this, I don't always get a lot of time to maintain and add new challenges. Interested in becoming a collaborator or submitting your own challenge? Reach out below or submit a new challenge!

ย 

Community slack-icon

We're on Slack - come and join us!

ย 

Thoughts or feedback ๐Ÿ’ฌ

Conflicting opinion about a challenge difficulty rating? Need some help or guidance? Got a challenge idea? Get in touch at alexgurr.com.

ย 

Contributing ๐Ÿ’ก

We have an issue template, pull request template and a new challenge template. We encourage you to fill out the right template and open a PR / issue!

What Makes A Good Challenge?

  • Clear requirements
  • Fun and engaging
  • Accurate difficulty level
  • Looks good (visually pleasing)
  • Realistic -- would someone ever need to build something like this in real life?
  • Easy to get started (minimal pre-requisites)

react-coding-challenges's People

Contributors

alexgurr avatar grayson073 avatar lukeecart avatar

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.