Mobile
Desktop
- Create personalized individual plates and track their calories and macros – proteins, carbs and fats.
- Categorize your plates to easily locate them.
- Discover new recipes from chefs all over the world and save your favorite ones.
- Filter marketplace recipes by name, proteins, carbs or fats.
- Create daily, weekly or monthly meal plans to track your calorie intake.
- Display your meal plans on a day-by-day basis format.
| Tech | What for |
|---|---|
| React | Build a component-based user interface. |
| Next.js | Server-side rendering (SSR) of React components. |
| Dnd Kit | Drag & Drop toolkit. |
| React Hook Form | Form state management and validation. |
| React Select | Select input control component for React. |
| React Dropzone | Upload image files. |
| SWR | Cache & data fetching. |
| Axios | Fetch data with promise-based HTTP requests. |
| Moment.js | Parse & display dates. |
| Chakra UI | Quickly build beautiful UI components. |
| Tech | What for |
|---|---|
| MongoDB | NoSQL document-based database. |
| Mongoose | Used to interact with the database. |
| Next.js SSR | Next.js API data fetching. |
| NextAuth.js | Local and social authentication solution. |
| CompressorJS | Downsize images before upload. |
| Axios | HTTP promise-based data fetching requests. |
| REST API | HTTP API architecture. |
| Tech | What for |
|---|---|
| Vercel | Deploy, scale, and serve the web application. |
| AWS S3 Buckets | Cloud image hosting. |
| Babel | Compile newer versions of JS to vanilla JS. |
Fitness has always been an important part of my life. With my recent Next.js mastery, I wanted to create an efficient solution for me and my family to ease into our transition into the meal prepping world. We've tried manually counting calories, carbs and fats to stay on track, but it always got tedious. Preppy is a simple solution that allows everyone, especially beginners, to track everything from their phone and keep tabs on their health and fitness.
- Design & code modern UI interfaces.
- Master Next.js & Next.js API feature.
- Learn a modern Drag and Drop library.
- Master form & data collection from users.
- Find the most powerful programming stack.