Develop Frontend - React

[prestonmasseyblake]

This is the new issue for the frontend team this issue will stay open till everything is done. Open sub issues pertaining to a particular section of the frontend.

[AbhinavReddy-Dev]

This is the current plan of action (order is trivial) for completing migration to React.

• Plan UI structure for components' development.
• Material UI.
• Routing.
• State Management.
• Testing.
• Integrate APIs.
• Integrate SKU lookups.

Few Subtasks to be mindful of in the end.

• Build CI
• Linter
• Docker Container

Please reassign yourselves to this issue (old #22) and add your thoughts.

Please tag this issue in the future pull requests related to this issue.
Also be mindful of documenting your work for others to understand as more than one person might work on the same code or reuse it in the project.

We will not close this issue until the complete migration to React is complete.

[AbhinavReddy-Dev]

Please join the team on Figma to work on the UI style and component separation.

• You are free to add your style recommendations for the UI.
• Once we decide on the index page, we will begin writing code for it.
• Until the code for index page is complete, we shall work on the UI for the next page taking inspiration from the existing Pantry Node.

Can someone please take the responsibility to screenshot all the current pages in the Pantry Node and share the pdf for our reference?

[Jooms]

Yo yo team. Glad to see moving to React is on it's way!

It looks like yall created a "dead" folder in the repo that is bypassing the main CI. I'll take this to mean that you plan on rebuilding the frontend alongside the existing frontend code, and then swapping it in once you achieve feature parity.

Please make sure you add a subtask for that so we don't forget to do things like, 1) enable the build in the CI, 2) enable the linter, 3) load into container, 4) use new postgreSQL DB, etc.

[AbhinavReddy-Dev]

Yo yo team. Glad to see moving to React is on it's way!

It looks like yall created a "dead" folder in the repo that is bypassing the main CI. I'll take this to mean that you plan on rebuilding the frontend alongside the existing frontend code, and then swapping it in once you achieve feature parity.

Please make sure you add a subtask for that so we don't forget to do things like, 1) enable the build in the CI, 2) enable the linter, 3) load into container, 4) use new postgreSQL DB, etc.

Hey!!!
You're right! we are planning to build the frontend fresh and then swap it with the existing one. I have currently built the linter specific for React locally, I'll push those changes to the frontend branch. As you suggested, we should have a subtasks for the things mentioned, I'll add those.
I'm assuming that the backend and frontend interaction will be in the form of APIs instead of rendering the view from the backend. Please correct me if that's not the current plan we're on.

[Jooms]

I'm assuming that the backend and frontend interaction will be in the form of APIs instead of rendering the view from the backend. Please correct me if that's not the current plan we're on.

Good question, I'd say since yall are handling the rewrite, you get to make that choice.

[AbhinavReddy-Dev]

I'm assuming that the backend and frontend interaction will be in the form of APIs instead of rendering the view from the backend. Please correct me if that's not the current plan we're on.

Good question, I'd say since yall are handling the rewrite, you get to make that choice.

We'd definitely want the APIs way (right, everyone?), it should make things easier on the backend too.

[abhilashSreenivasa]

Can we decide on who is doing what?
Also , Are we using redux for state management or are we gonna use useContext hook?

[xl26]

Can we decide on who is doing what? Also , Are we using redux for state management or are we gonna use useContext hook?

Ideally, we should be using React hooks.

[AbhinavReddy-Dev]

Can we all get active on the discussions to discuss the work division? @xl26 @hardikpatil @prestonmasseyblake @abhilashSreenivasa @SANDESHSOBARAD @priyankavrao97 @nvkulkarni12 @murthy-001

[xl26]

For everyone that has never used Material UI here is the reference link to get accustomed to: https://mui.com/material-ui/getting-started/overview/
We must decide on the color palette, font family, font weights, etc before we jump into coding for the front end. Anyone with access to all screens can please add screenshots to the Figma link and we should get going.
MUI includes a comprehensive collection of prebuilt components that are ready for use in production right out of the box. Easier to implement.

[AbhinavReddy-Dev]

Would appreciate if we have more active discussions on #30

[briswells]

I'm assuming that the backend and frontend interaction will be in the form of APIs instead of rendering the view from the backend. Please correct me if that's not the current plan we're on.

Good question, I'd say since yall are handling the rewrite, you get to make that choice.

We'd definitely want the APIs way (right, everyone?), it should make things easier on the backend too.

Our plan on the database side was recreate the current express API calls using a new stack. There's a few routes I'd love to change but that's a bigger discussion regarding how we want to improve the application.

[AbhinavReddy-Dev]

I'm assuming that the backend and frontend interaction will be in the form of APIs instead of rendering the view from the backend. Please correct me if that's not the current plan we're on.

Good question, I'd say since yall are handling the rewrite, you get to make that choice.

We'd definitely want the APIs way (right, everyone?), it should make things easier on the backend too.

Our plan on the database side was recreate the current express API calls using a new stack. There's a few routes I'd love to change but that's a bigger discussion regarding how we want to improve the application.

True, we (frontend and backend groups) need to have a brief discussion on the features and API expectations.

[prestonmasseyblake]

I think it's ok to silo the frontend development once a good amount of the frontend pages are built out we could use dummy data for the time being. It would make sense to us what type of data would be needed. A conversation with the database team as well as the backend team should take place. I'm thinking they do the backend in express typescript but I'll leave that for them to decide.

We could work in tandem to specify views routes for specific data needed, create models with the database team etc.

Does anyone in particular want to be in charge of coordinating between the three teams (frontend, backend, database)?

[murthy-001]

This is first time working on a project like this, I would appreciate any sort of guidance on what to do?
As a week of spring break available, I can work on the skills which are necessary and benefits the team in anyway possible.

[AbhinavReddy-Dev]

I'm proposing a virtual meeting on Monday March 13, or we can do it on the weekend as well. The earlier the better for us to start on this. Please let me know, I will generate a zoom link and share by tomorrow EOD.

[briswells]

Right now I don't think there's really a difference between the backend and database teams. If we wanted to meet regarding what routes we wanted I'd be happy to participate. We built out a database with a bunch of models already just using ideas of what we might need in the future, so now it really just depends on how we want to update the routes. If you want to see the models and our current schema for the database check out the implement-sequelize branch.

[AbhinavReddy-Dev]

Shall we create a new branch for all frontend development? And I think we should delete the react-tsx-frontend branch. We all can then create our branches locally and when satisfied with the commit, then merge those changes with frontend branch. This way we all can work on the latest frontend changes.

[AbhinavReddy-Dev]

Shall we create a new branch for all frontend development? And I think we should delete the react-tsx-frontend branch. We all can then create our branches locally and when satisfied with the commit, then merge those changes with frontend branch. This way we all can work on the latest frontend changes.

Update, I have created a branch 'frontend', please merge all your changes into that branch before making a pull request to main.

[AbhinavReddy-Dev]

I was looking at the React documentation and this caught my attention, please share your opinion about our create-react-app which is designed to help learn React or develop a single page application. What is the requirement for our PantryNode application and its scalability in the future assuming that we are serious about its real world deployment one day? We can have multiple pages using Router but wanted to know your opinions on this.

The React team primarily recommends these solutions:

If you’re learning React or creating a new single-page app, use Create React App.
If you’re building a server-rendered website with Node.js, try Next.js.
If you’re building a static content-oriented website, try Gatsby.
If you’re building a component library or integrating with an existing codebase, try More Flexible Toolchains.

[AbhinavReddy-Dev]

Please join the team on Figma to work on the UI style and component separation.

• You are free to add your style recommendations for the UI.
• Once we decide on the index page, we will begin writing code for it.
• Until the code for index page is complete, we shall work on the UI for the next page taking inspiration from the existing Pantry Node.

Can someone please take the responsibility to screenshot all the current pages in the Pantry Node and share the pdf for our reference?

I see that someone added current page screenshots to Figma, I really appreciate the effort. I have added a couple that were missing.

[priyankavrao97]

Can we have a zoom meeting when it works for everyone to discuss what screens each will be working on? We could also discuss on discord as well if that works.

[AbhinavReddy-Dev]

Can we have a zoom meeting when it works for everyone to discuss what screens each will be working on? We could also discuss on discord as well if that works.

It'd be difficult to find a time that works for everyone except for the usual class hours, I'd initially suggest we try to have some conversation on repo discussions to understand the commitments of the team members and to further the progress?

[murthy-001]

Can we have a zoom meeting when it works for everyone to discuss what screens each will be working on? We could also discuss on discord as well if that works.

It'd be difficult to find a time that works for everyone except for the usual class hours, I'd initially suggest we try to have some conversation on repo discussions to understand the commitments of the team members and to further the progress?

That sounds like a good idea. Utilizing the repository's discussion feature can be a great way for team members to communicate with each other and discuss project-related matters asynchronously. It allows everyone to participate in the conversation at their own pace, without being constrained by a specific time.

[AbhinavReddy-Dev]

There has been a merge into branch frontend, please rebase it with your local changes.

[hardikpatil]

Just for reference.

1. Check if frontend is up to date with main.

2. Checkout new feature_branch from frontend.

3. Develop in feature_branch.

4. Create a pull request from feature_branch to frontend and request for a review before squash and merge.

5. Create a pull request from frontend to main for rebase and merge.

[Jooms]

Spoke with @briswells and @prestonmasseyblake

Learned a bunch I'll share in a discussion after we get it working.

Preston is working on a PR to prove the front-end can talk to the backend.
Backend is Express (Brian and team have been working on). Frontend is React (Preston and team have been working on).

• @prestonmasseyblake is going to give us a tiny MR that proves the frontend can connect to the backend.
• @briswells is going to containerize it and add it to the docker-compose
• @Jooms is going re-organize the two chunks of work in the repo and update the CI appropriately.

And after this we should have a tiny MVP that we can all run and poke at.

FYI: @kbuffardi

[Jooms]

Ran this all locally
Last little bit for the docker-compose to spin them all up
#162