Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/alexgurr/react-coding-challenges

A series of ReactJS coding challenges with a variety of difficulties.
https://github.com/alexgurr/react-coding-challenges

app candidates challenge coding-challenges exercises interview interview-practice interviews javascript react react-coding-challenges reactjs

Last synced: 2 days ago
JSON representation

A series of ReactJS coding challenges with a variety of difficulties.

Awesome Lists containing this project

README 

        



#

 

### ⭐️ Looking for collaborators ⭐️

We're looking for people to come and help work on the latest challenge **Coinbee**. If you're interested, get in touch via our slack community or via my website [alexgurr.com](https://alexgurr.com)!



 

#

A series of **ReactJS coding challenges** with a variety of difficulties. Deep dive into the why [here](https://dev.to/alexgurr/react-coding-challenges-for-interviews-beginners-1hlk).



Interested in some React fundamentals / philosophies? Check out the [react-philosophies](https://github.com/mithi/react-philosophies) GitHub repo.



 

## Sponsored



 [Time To Estimate](https://www.timetoestimate.com). A fun, simple way for agile teams to remotely estimate tasks together. Free, with no sign-up required.



 [mixmello](https://www.mixmello.com). Create remixed versions of your favourite Spotify playlists.



 

## The Challenges

### Easy 🙂

##### 🚀 [Rocket Ship](https://github.com/alexgurr/react-coding-challenges/tree/master/rocket-ship)

Unnecessary re-renders, fine grained control.



 

### Medium 😐

##### 🌙 [Dark Mode](https://github.com/alexgurr/react-coding-challenges/tree/master/dark-mode)

State / shared state, DOM manipulation.



##### 🐝 Coinbee ![soon](https://badgen.net/badge/status/coming%20soon/green?icon=)

Data visualisation and graphing. API usage.



 

### Hard 😬

##### 🎧 [Spootify](https://github.com/alexgurr/react-coding-challenges/tree/master/spootify)

Loading state, API usage.



##### 🤖 [Chatter](https://github.com/alexgurr/react-coding-challenges/tree/master/chatter)

Web sockets, events, callbacks & React hooks. Talks to [Botty](https://github.com/alexgurr/botty).



 

## Future Challenges ![later](https://badgen.net/badge/status/coming%20later/yellow?icon=)

##### 🛒 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](https://www.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](https://www.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](https://puu.sh/Hse6N/da4145b9e1.png)

We're on Slack - come and [join us](https://join.slack.com/t/reactcodingch-ywm3888/shared_invite/zt-o5ns0i1x-nUW_obRlBOAh2muJITqX~g)!



 

## 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](https://www.alexgurr.com).



 

## Contributing 💡

We have an [issue template](https://github.com/alexgurr/react-coding-challenges/blob/master/issue_template.md), [pull request template](https://github.com/alexgurr/react-coding-challenges/blob/master/pull_request_template.md) and a [new challenge template](https://github.com/alexgurr/react-coding-challenges/blob/master/new_challenge_template.md). 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)