What is it?

Random number picker is a web app which has various different randomising utilities, such as rolling dice, flipping coins, picking from a list, and (of course) picking random numbers. I decided to make it after wanting to play scattergories at a friend's house and had to make letters out of bits of paper to draw out of a hat - having a website which will generate a random letter is much quicker!

From there, I added more randomised number pickers and other random pickers and generators:

Which technologies does it use?

The random number picker app is entirely made with React - there's no server-side element to the site. This seemed like a good choice since each picker is a completely separate view, and has several interactive components which can update instantly. I used a React/Redux boilerplate as the basis of the app, although other than routing the app doesn't require any state, so I could probably strip out most of the Redux side to leave a collection of views. The boilerplate also saved me from having to set up a test environment, which is one of my pet hates!

What went well

Using React and ES6 meant I could split code into separate modules easily, which made creating new generators quick and simple, and also prevented the project from becoming a big tangle of unmaintainable code. Using a boilerplate for the setup was a big help as well, especially since it came with a test environment set up - all I needed to do was write tests and run npm test, rather than spend hours configuring Webpack to build tests sepearately and find a test runner to run the test code in Phantom. Setting up environments is easily the most tedious part of programming, and I'm in favour of anything that helps to speed up that process.

What could be improved

I'm planning on spending a bit of time to improve the site's performance, and start to strip out parts of the boilerplate which I don't need - in particular, I'm not using any state in the app, so can probably remove Redux, as long as it's not required by the routing. This is the downside of using a boilerplate project as a starting point - it makes things very quick to start a project, but when you get to the optimising stage, you don't have a complete overview of what's necessary, since you didn't add every single component yourself.

Next steps

The next stage is to add even more random pickers and generators to the random number picker site, including string generators. I'm also looking into React Native to see how much work it would take to port to a phone app.