search

ChicoState / PantryNode

MIT License
2 stars 34 forks source link

Develop Frontend - React #46

Open prestonmasseyblake opened 1 year ago

prestonmasseyblake commented 1 year ago

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 commented 1 year ago

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

Few Subtasks to be mindful of in the end.

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 commented 1 year ago

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

Jooms commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

xl26 commented 1 year ago

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 commented 1 year ago

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

xl26 commented 1 year ago

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 commented 1 year ago

Would appreciate if we have more active discussions on https://github.com/ChicoState/PantryNode/discussions/30

briswells commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

hardikpatil commented 1 year ago

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 commented 1 year ago

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).

FYI: @kbuffardi

Jooms commented 1 year ago

Ran this all locally Last little bit for the docker-compose to spin them all up https://github.com/ChicoState/PantryNode/pull/162