Welcome to the repo for my random Christmas picture generator app!
I had the idea because I wanted to work on my React skills and create a project that I could later refactor using React Hooks. Since it's so miserable out, I thought "Why not make it festive and spread a little cheer?"
My MVP was an app which allows the user to press a button and generate a new Christmas picture each time. I hope to add more features and expand it over the Christmas season.
A deployed version of the app can be found at https://createchristmas.netlify.com/
React - A JavaScript library for building user interfaces
Material UI - A popular React UI framework
Axios - Promise based HTTP client for the browser and node.js
Netlify - For deployment
Snow made by Pajasevi - CSS animation
A few months ago, I had the opportunity to take the lead on accessibility compliance in a Vue.js app. I had some knowledge of accessibility/a11y but didn't realise how extensive the requirements were. I did a lot of research and learning and found it's an area I'm really passionate about.
Unfortunately, I also discovered that the state of accessibility is at a critical stage and we may be moving backwards due to the nature of SPAs. React is endeavouring to incorporate a11y and so I wanted to use it in this app.
The picture generator is still in its early stages but I've tried to use semantic HTML where I can, good colour contrast and alt tags. Additionally, the snow animation can be turned off by the first button on the page.
I'm looking forward to adding further a11y features to the app as I expand it.
As I mentioned above, I will be adding more features and refactoring the app over time.
One of the things I want to do is create a separate server to hit various endpoints. I feel this is more secure for using with an API key, even though it is currently hidden.
I would also like to add a search element so users could try different festive searches such as "Hot Cocoa" or "Christmas Lights", but I need to think about how to limit this search to just a Christmas or seasonal theme.
Testing, possibly using Jest or Cyprus, is also in my future plans and an accessibility audit using automated and manual testing.
I am also considering adding Sass or Less to the project.