My first React web app has been created for one of my university units. Whilst I have the most experience in Vue, this project shows that once you get the hang of one framework ( and obviously have understanding of vanilla JS), the knowledge is easily transferable to other frameworks. Of course, syntax will be different, but the logic is pretty much the same.
Background story
The assessment task was to create a web app in React that would help students. We had to find the area that young people struggle with and think of the tech solution that would in some extend solve it. Seems easy at first, but when you can build anything you want, some serious research is vital to create something actually useful to others.
The problem I wanted to solve with my creation is poor diet and low cooking skills of young adults. By creating a collection of fast and easy recipes with a step by step guide on how to make them, students will be able to quickly find delicious recipes, that are delicious and won’t take long to prepare. Integrated weekly planner will help students plan ahead what to cook each day and thanks to a shopping list, they will know exactly what to buy whilst grocery shopping.
Next step: design
The next step was to design a web application solution. For this task I have used Figma. I remember not liking this software back in first year of uni, and being a huge fan of adobe XD (🤷♀️) This have changed, and now I can’t imagine working with anything else! If you haven’t tried it yet, I highly recommend. Its free, its online and has lots of useful plugins too! (Check out this post with a huge list of figma plugins)
Anyway…back to the topic! To start of, I have decided on a colour scheme and created the logo for my app (it was not a requirement, however it helped to give the project a bit of a character).
With creative juices flowing, I’ve also quickly created user journey and scribbled some low fidelity wireframes to decide what elements should be on which screen. For low fidelity wireframes I have used Rough, a plugin for Figma, which turns elements into hand drawings. I like it as it looks like you have drawn them on a piece of paper but in the other hand they look clean and presentable.
High fidelity wireframes
I have focused on mobile screens, as the intention of this app is to use it while cooking, and having your cookbook (and shopping list!) always with you- inside your phone. Bottom tab bar gives my web application more of a native app feel.
I have decided to use Iconly 2.3 icons by PicoDesign as they coordinate nicely with the style I wanted my app to have. Images are from unsplash.com and empty states illustrations are from Iconscout Store (another cool plugin for figma here)
The home page is where you can find all the recipes. Access a single recipe page by tapping on the chosen recipe tile. From there you can check the ingredients, instructions, add a recipe to your weekly planner and ingredients to the shopping list. The initial design also had save to favourites button and share a recipe, although because of the very limited timeframe, I have prioritised other functionalities and decided to scrape those 2 (most likely will add them in the future)
Shopping list page is quite self explanatory, tick off the items you have at home or as you put them into your shopping cart, and clear off the list via a trash can icon.
On the weekly planner page you can see all your planned meals. Here you can move the recipes to a different date or remove it.
The only screen that doesn’t not have a design for is a profile page. The reason is quite simple. I did not plan on doing a login functionality, although in the middle of the development it just made a lot more sense to add this is.
Few other changes that happened during coding:
- I have removed search bar due to time constrains,
- Changed the colour of the tab bar icons to white.
- Slightly different style of the recipe card in the weekly planner
- Slightly different style of the shopping list
If I was to create this app for a client, some of those changes may not have been possible, but because it’s my app, I could. Haha 😃
Development
Time for my favourite part- coding! I have created a new repository on GitHub to store my project online and have a version control of my code.
I’m using Visual Studio Code as my text editor. I have followed the installation instructions from the react documentation (https://reactjs.org/docs/create-a-new-react-app.html), added react-router (https://reactrouter.com/docs/en/v6/getting-started/installation#create-react-app) and then tailwind css (https://tailwindcss.com/docs/installation). With the scaffolding of my app ready, I have created a first commit and pushed the changes to GitHub.
Time to style up the pages and connect them together via Routes (react-router). I usually use dummy data while doing frontend work (as usually backend is not yet done :D). I’ve already mentioned few changes from the design that happened in the development phase. Some made the app look/feel better, some were dictated by a deadline. Adjustments like that happens, so I’m not gonna dwell on it. Done is better than perfect, as they say! As a perfectionist, it took me a while to get that 😀
For the last year and a half I was using Vue.js, so this is my first big project in React. I had to google a lot and my fingers needed a bit more time adjusting to a different syntax (muscle memory is real thing guys!), but other than that… well React is quite cool!
Firebase & Firestore
Another novelty for me and I’m surprised how awesome it is. I will definitely use it more for other personal projects. You can easily host your website for free and if you add firestore, you have a free database too (with limits of usage on a spark plan but big enough for my needs so far) Documentation is really good too, which makes learning a lot easier. Check Firebase out on https://firebase.google.com/
Thanks to firestore I was able to create a collection of recipes and pull it down via API into my app, and users have ability to add ingredients to their list and recipes to their own planners. Registering and log in functionalities are also super simple with Firebase, either a regular email/password or via social media accounts. Firebase is a very powerful tool and surprisingly easy to get the hang of.
Testing
You can’t deploy without thoroughly checking everything. I mean EVERYTHING. This is sometimes hard as you know the app, you know the flow and how stuff should be done. Your users don’t. And that’s why it’s important to be prepared for those moments, with 404 pages, toast notifications, error messages, empty states. Basically anything that will help the user go back onto the happy path if they ever loose track. If you can, ask someone to go through the app and see how they get on with it.
Deploy
This most nerve racking task is relatively easy with Firestore. Again, the documentation will help you go through and deploy and host your site in no time.
Final product
You can check my finished student cookbook app here:
https://cookbook-53824.web.app/
⚠️ Whilst it is a fully working application, I would consider it as an MVP (minimal viable product)
0 Comments
1 Pingback