apruner / my-fridge Goto Github PK
View Code? Open in Web Editor NEWMyFridge web app
License: MIT License
MyFridge web app
License: MIT License
Self explanatory
Deployment options:
CI/CD options:
Self explanatory!
Libraries considered so far:
App framework: React + (Gatsby/Next.js/Create-React-App)
Component lib: Material UI (to match flutter App)
Testing: Jest + Enzyme
Other decisions to make:
Eslint: Airbnb standard? Google? None?
Type-safety: Flow/Typescript?
After fumbling around with these gatsby build issues, I've decided that we're gonna move to CRA! It'll just give us more freedom, and shouldn't be too too hard. :)
Build out a page to select and then view a shopping list (dummy data for now)
Page should be at route /shopping-lists
Since adding eslint and stuff, there are a bunch of code style warnings/errors. Let's fix em!
Button/dialog to create a new shopping list (undefined as of right now, need to figure out what exactly this will look like)
Dependent on issue #38
Click picture icon in shopping list to get a full screen image of the item.
It's possible that we might want to introduce redux (or some other state management lib) when more data starts flowing through the app. Let's consider it!
Add .template.env file to the project for storing useful environment variable info like api keys and stuff
On shopping list/id page, have a button/dialog for adding a new item to a shopping list
Once the login page has been mocked up, actually hook it into the firebase auth
We'll obviously need some sort of navbar component through which to navigate the site! Let's use material ui's App Bar!
Like the mobile app, when the user is logged in, we want them to be able to navigate through pages in a slick way.
Options to pick from in the sidebar/dropdown nav:
More pages will be added here later, but for now this will do!
Self explanatory, should have a button (and maybe "are you sure?" alert) to delete a shopping list from both the shopping lists or shopping list/id pages
Ideally we have some strict-ish eslint and prettier rules for things like:
strings: double quotes,
semi-colons: none,
indentation: 2spaces, etc
Self explanatory! Follow sign in with google example and use firebase sdk to do everything
Self explanatory. Hook into firebase auth for MyFridge!
For now, the modal won't actually hook into firebase auth. It'll just be a mockup.
We will need a page/dialog to view a single shopping list.
This page will be navigated to from the general shopping lists page, and will have a URL route of /shopping-lists/{id}
This issue is dependent on #26
On the Fridge page, we want to render a list of items (queried from the backend) that the user has in their fridge!
Mock this up with some dummy data
Let's add some stuff to the signin dialog:
Add a CONTRIBUTING.md
file that guides new contributors!
When a user first logs in to the app (basically when they create a fresh account with either user/pass or google), they'll need to fill out some initial data, such as creating a "household" for themselves, food preferences (types of foods they consider staples), etc
Let's create a form for this. It should be located at some sort of /profile/data
route or something like that. There's probably more to flesh out here.
Self explanatory! Test whatever components, worry about coverage later
Add picture to each individual item in the list.
Avatar component from material-ui might be a good fit.
This HUGE css file is auto-generated by gatsby, and we proooobably don't need it. Let's make sure we can get rid of it and then do it.
Edit the README.md
file so that it explains a bit more about what the project is trying to achieve
read into how replaceComponentRenderer works and check out gatsbyjs/gatsby#6127
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.