Full app rewrite

[jacobsamo]

The new and improved app directory has now been released as stable from the nextjs team which is very exciting with speed improvements across the board something worth upgrading to

The plan

So from the start I have been really learning a lot and I think this is the perfect time to do a full rewrite of Meally, yes I know that's a lot of work but in the long run it will make things simple and since I already know what I want things to look like and feel like as well as the code that already works things should be simple to do the rewrite. This rewrite will allow be to leverage the new features in React, Nextjs, Vercel, Turbo and many other technologies

Some things we are going to change

Over this change there are going to be massive changes so here are something we are moving to and something we are changing

Move to Preact rather than React

Preact is a small and lightweight package that has all the features that React has but brings you closer to the DOM bringing speed improvements overall

Move from Firebase to Drizzle & PlanetScale

Firebase is an awesome provider from a small-scale application but it has quite a few limitations with its pricing compared to PlanetScale simply with reads and writes which is something I wanted to eliminate as I want to be able to more reads and write to the database for a better experience across the app

Drizzle ORM

Drizzle is a new and upcoming ORM with huge speed improvements compared to Prisma, this also allows for it to run on the edge which is incredibly important with all the new features in nextjs

TODO:

• [ ] Reimplement all old features - once this is done push to master
• [x] Add Vercel analytics
• [x] Make sure SEO is still up to my standards #25

Recipe Form

• [x] Time fields have proper validation and are easy and simple to understand
• [ ] Add back multi-select for certain fields
• [x] All fields that aren't clear or simple have a tooltip

Recipe page

• [ ] Chips on steps make sense and don't produce false positives

Profile / Settings

• [x] simple profile page to display all users recipes
• [ ] Settings so a user can change all their info
• [x] Drafts page for a user to see all their recipes

Search

• [x] Simple dialog for it using cmdk using shadcn's command dialog
• [x] Something that can search off all Info fields of the recipe

Rewrite

• [x] Figure out what I want the User experience to be like
• [x] Do some case studies on recipes websites and recipe books and replicate that experience
• [x] Think about my colours and feel of the app
• [x] Model user flow
• [x] Model data flow
• [x] Design my URL structure
• [x] Design my design system
• [x] Design my project structure
• [x] Design my build structure CI / CD

After this

• [x] delete and start again
• [x] Create a new turbo project check out examples from turbo
• [x] Create the app using the app router
• [x] Make sure I'm not using any experimental features of React
• [x] Work out my shared resources. Components, types, libs, configs, etc
• [ ] Add Preact into the app see example and dailydotdev app here
• [ ] First, check this out use preact in nextjs 13
• [ ] configure webpack / nextjs.config.js to use preact
• [ ] How to cache items in nextjs check this out
• [ ] Figure a better way to do the search with cache results so I don't need to read each time a user wants to search

[jacob-123-s]

On Recipe schema in the database figure out which object would be ok to be a JSON and which object would be best to be split into another table so for example the ingredients probably should be split into a sperate table as we do / will search on it, plus than we can add other functionality to it will a list of ingredients and other things

[jacob-123-s]

For time inputs follow something like how Jira does their time tracking it's super easy to do and has plenty of validation on it

[jacobsamo]

Fully rewrote the app in #67