Choosing a bedtime story can be a nightmare if you care about diversity. My project, Fierce Stories, allows parents and caregivers to customize bedtime stories to include diverse set of characters and subjects.

The project was created in five days, on my week 5 of coding. It looks like this:

To be honest, that week was my first time with HTML and CSS. It's a huge mess — you can see it in my stylesheet. I just tried to survive while keeping up with the pace of a bootcamp. I always wanted to come back to it but so far, it never happened.

Now that I am a Software Engineering Coach and my students are themselves struggling with the project week, I decided to refactor my code as well. I'll start tomorrow. Here's my quick overview of stuff I want to correct.

Code:

• follow Sandi Metz's rules;
• stick to MVC;
• add nested form in the character creation form;
• add guard clauses;
• fix the CSS (both stylesheets and inline);
• introduce semantic html;
• improve the url game:
  • slugs for titles of the stories;
  • new name for the story_book route;
• add profile page;

UX/UI:

• all the links should be links and buttons should be buttons;
• error handling should be clearer;
• what the hell is up with the fonts?
• colors palette;
• increase accessibility (e.g. option to modify space between lines or font size);
• FB and Twitter should open in a different window;
• the stories should be visible even for the non-logged-out users;
• in the mad-lib, the first letter of a sentence should be capitalized;
• add 404 page;
• adding a gender should not stop/erase the whole form:
  • could we save the data into a cookie?
  • perhaps it could be find or create by?

Next steps:

• make the page responsive;
• redo CSS in SASS;
• redo front-end in Reach;

If you're curious about the project, you can visit its page or the repo. If you'd like to provide me with feedback on either, I would love that!