Fresh meals everyday.
This is a repository containing a SPA/Universal application using TheMealDB to display a random meal on the dashboard page, enable serching the database and display all meal details in a nice way.
- Display random meal on each refresh
- Search TheMealDB database and display results in a nice way
- Navigate to a meal page with detailed instructions, ingredients and video.
- Content skeleton for both Meal pages and Meal Cards.
Personal case study that could serve as a demo application for the following core tools.
You can see the live demo here.
The application was architecturally built to be as encapsulated as possible within the context of the Meallie application.
The application is structured around Pages and Components.
Global components are placed on the upmost components library and contextual components such as ones that are utilised by specific pages, are placed within a components directory within the parent component.
Other than this, the directory structure conforms the default Nuxt framework structure.
The interoperability of the components in external contexts is limited by the use of Vue extension libraries such as VueFontawesome and Vue Chimera which require certain attributes to be accesible within the this scope of the coponents.
While in a component driven development manner it is desired to have scoped styles, in reality browsers themselves will bring global styles to the context of an application plus style-code duplication will occur frequently with larger applications.
This given, I took the decision to have a minimal set of global modifier components to utilise across components. This practice is the same applied by libraries such as Bulma and Tailwind.
In short, yes, the components require certain global styles to work but it's all functional styles that reduce duplication and development time.
Being a simple application, there was no need for advanced state management practices.
Sophisticated state management is a tool best used sparingly as its benefits can quickly outweight its costs on simple applications that could have done without it.
Having only a couple of hours to build the application, I quickly came to the conclusion that it was unrealistic to try to build what was my end-goal-user-experience while testing every bit of it, therefore tests are not available.
# install dependencies
$ npm install
# serve with hot reload at localhost:3000
$ npm run dev
# build for production and launch server
$ npm run build
$ npm run start
# generate static project
$ npm run generateFor detailed explanation on how things work, check out Nuxt.js docs.