Life's too busy to worry about what you have at home. FridgePal will help you keep track of that.
Welcome to the client for my FridgePal project. The project was assigned as our first foray into full stack development. We were assigned a time frame of 4 days to work on this project
You can visit the app here. Client is currently optimized for mobile use. To get started, please sign-up with the sign-up button. As a safety precaution, please don't use a real email or a real password. Be creative, make a new persona for yourself! Afterwards, just hit the New List button and you are on your way!
To start using the app, create lists. You can only make items inside of a list
Client App Client Repo API App API Repo
My planning for client consisted of separating the workload into their own sections.
- User API Functionality
- Item API Functionality
- List API Functionality
- Handlebars to display my lists
- CSS
Listed below are the technologies used to complete the client
- HTML
- CSS
- Sass
- Bootstrap
- JQuery
- JavaScript
- AJAX
- Handlebars
The main features we wanted to add to our project can best be described by our user stories for this project.
| As a ... | I want ... |
|---|---|
| user | to keep track of things |
| user | organize my things |
| user | 'use' my things and change their quantity |
| user | my things to belong to me ONLY |
I started this client after the backend API. The first steps were to build out the base HTML with a nav. I took a little time to create the fridge icon used for the nav bar I then worked on the client API logic and authorization with the necessary form and buttons. I did some of the styling afterwards and got the nav drop down to work. Afterwards I used handlebar for the table and spent a good amount of time trying to get accordions to work. Finally finished it off by moving buttons and forms around to simplify the functionality of the app.
Throughout this project, I was met with multiple challenges which took me a while to figure out. I had issues with the nav bar and getting it to close and display only one. I used bootstrap's collapsable navbar and did some hardcoding to force the close and display one. The API logic had issues passing on a Bearer token for authorization (syntax error). Handlebar bootstrap-collapsable took a while to implement (hard code).
- Expand functionality
- Ability to share lists and have some permissions
- Desktop version (more powerful?)
- Dark Mode