Scran.

scran home page

The minimalist meal planning app.

Javascript icon
Javascript
React icon
React
NodeJS icon
NodeJS
Express icon
Express
MongoDB icon
MongoDB
Scran mobile home page

Scran is a full-stack meal-planning web application that makes meal planning efficient and personalised. Unlike subscription-based meal kit services, Scran allows users to create their own meals within the app and generates a collated shopping list, organised by aisle, for all the meals in their current plan.

Meal imageMeal plan imageShopping list image

Key Features

  • User Authentication and Authorisation: Users can create their own account without the app storing any personalised data. Recovery codes are available for account recovery, ensuring both security and privacy.
  • Efficient Ingredient Search: A custom search bar allows users to quickly find and add ingredients. Search functionality supports prefixes, enabling flexibility in input order.
  • Real-Time Updates: React Context ensures instant updates to meals and shopping lists, minimising page reloads. Changes are seamlessly synced with the database in the background.
  • Minimalist Design: The interface is clean and easy to navigate, focusing on usability without unnecessary features. Custom graphics, which I designed, enhance the user experience.
  • Responsive Design: The app features a mobile-first design but works seamlessly on both desktop and mobile devices.

The front-end of the website was developed using React, with routing implemented via React Router DOM and transitions powered by React Transition Group. Authenticated requests were facilitated using Axios and custom hooks while state management was handled using React Context.

The back-end of the website was developed using Node.js with Express and data management was handled using MongoDB and Mongoose. Key packages used include bcryptjs for password hashing, crypto for cryptographic functions and jsonwebtoken for token-based authentication.

scran settings page

Challenges & Solutions

Roadmap