Week 46

Began a new project last week.

Really it’s the expansion of a project I had previously conceived and started as a vanilla JS project, but I am expanding and rebuilding it as a React project.

Following the component-based way of thinking, I will break the project up into discreet parts that I can then piece together as I build them. This also allows for the possibility that I won’t get around to complete the whole thing. (It’s a wee bit ambitious…).

Meal Planning App

Some user stories:

1. I can add a meals for every day of the week.
2. I can choose meals from an existing list or add a new one.
3. I can choose which day of the week to start my schedule on.
4. I can choose whether or not to include breakfasts on my schedule.
5. I can click on a meal in the schedule and bring up the recipe for that meal (if it’s available).
6. I can add recipe ingredients to a shopping list.
7. I can view and print my shopping list.
8. I can add/remove items from my shopping list.
9. I can add/remove grocery items.
10. I can import recipes from around the web via URL
11. I can add my own custom recipes
12. I can see a list of recipes
13. I can filter the recipe list by meal type / ingredients / vegetarian

Database

At some point, this project will require saving and accessing data from a database. I’ve looked into some options for this, but for now, I will resist the urge to go to far down that rabbit hole and will build out the basic structure and functionality using locally stored data.

Basic Structure

This app will have three main sections:

1. The weekly schedule
2. The shopping list
3. The recipes

The nice part is each of the sections in its most basic format is essentially a common beginner React project. The increasing difficulty will come from adding more enhanced features and having the different components interact with each other.

Styling

I have decided to use Tailwind.css for the styling. It seems like a logical choice for a project like this. I have used it a bit and so far I kind of hate using it, but that’s mostly because I’m having to look up every class, whereas I could write custom CSS much quicker. But of course that will speed up as I get used to it.

I also already felt like I needed some better way of organizing things rather than just writing out a whole bunch of classes in the JSX.

The pattern I have settled on comes from Ryan Fitzgerald and involves creating an object with the various classes outside the return statement on the component and then referencing the object in the JSX.

The object:

const classes = { wrapper: 'p-5 border border-gray-200', heading: 'm2 text-2xl' }

The JSX:

<div className={classes.wrapper}> <h1 className={classes.heading}>This is the title</h1></div>

This seems like a nice way of keeping things organized. Later in the article he provides some suggestions as to how to manage conditional styles based on state values.