hanseaston / pandemic-produce-delivery-project Goto Github PK

As I have talked about the project's introduction page. You are welcome to utilize this project however you see fit, and I would be totally stoked if you can put our shop delivery service website into use in your own neighborhood.

For example, right now, I'm thinking about using this website in our Seattle neighborhood 👍

Since our contributors come from different parts of the world, feel free to create a new branch and eventually use it as your own project.

If you want to create a new branch and translated the project into the language you speak, please do so!! Just leave a comment under this issue and create your own branch and get started hacking!

Our goal is create a diverse workplace of programmers where everyone can contribute. ♥️

I have spent a long time and a good amount of energy writing out the README.md.

It definitely needs some refining and polishing. If you find any typos or if you think any part of the documentation needs some more clarification, please open an issue and try to fix it!

Thank you so much ya'll. 💜

It's really easy to implement circle ci
Just go to Circleci.com
You can sign up with github!

If you do on the dashboard left hand side -> click projects
look for -> Pandemic-Produce-Delivery-Project
click button -> Setup Project
Done.

before you do i have a .circleci(Folder)(Yes the name of the folder does need to be started with a dot)(idk why ;/)
i'll provide a pull request for you.
i dont think it will effect other people pull request.
Due to its main purpose of checking test before merging

Right now, the project's meeting lacks consistency and quality.

Many of the project files are not commented.

Please help us comment our projects!

• Whenever you add good commenting to a specific file, open a new issue specifying which file you have commented on, and we will merge it to our main branch!

• Your commenting doesn't need to confirm to a standard (such as JSDoc). It is good as long as it is clear and thorough.

• Before you open a new issue, make sure to check in the issue page whether the same file has been commented on or not.

Hey @hanszhang00 I was going through the README.md files and saw a few typos so I went ahead and fixed them in my IDE.
This issue is in relation to #37.

Futhermore, in the user authentication in code section of the README I have made changes to the route code that you had added on their, I might make a seperate issue for that but just wanted to point that out.

Please review the changes I've made and let me know if I missed out on something!

Thank you for your time!

As you might have notice, right now the admin product only supports adding a certain product. If you want to change certain information on an existing product, there is no way for you to do that unless you change it directly in the database.

We certainly want to add more functionalities to our admin page. And I think our job is to make the CRUD operation for the products complete.

Listed this as one of the more important milestones. It is important because adding the functionalities drastically increases the usability of our website. This should be one of the first milestones we need to be tackling as of right now.

The stripe payment credit card is only for testing purposes at the current phase. However, some other users might not know that and would actually type in their real credit card information. So we might want to add a few lines of warning at the bottom of our checkout page.

• includes a line that says that our shop page is still in the development progress
• includes a warning that tells the user not to enter their real credit card info
• includes instructions on what to enter for the credit card field for testing purposes

Right now, if I refresh the page, all of the cart's content will be gone.
That would end up being a really bad user experience.
At least, I want my cart items to preserve if I accidentally refresh the page, or even when I close or reopen the tab.
So, maybe sessionstorage or localstorage would be better for this to happen.
I am leaning more towards localstorage, and maybe this npm package will help.
Or maybe, whenever user updates their cart, we want to directly write the cart content directly to the database?
What do people think? Would that be too inefficient to do so?

This is a similar issue compared to #13

We also want to display a better message if a user fails to sign up (wrong confirming password, email already used, etc..)

Please coordinate with the person who is/will be in charge of #13 to discuss what error message should be display and what error message component should be created (it should be a reusable error message component).

Check out the documentation https://firebase.google.com/docs/reference/js/firebase.auth

When the user signs in from their Google account, it would be better to display their Google account image in the navbar. Currently, the navbar looks like this.

It would be good to display their google profile picture at the rightmost section of the navbar.

Note that we should only add the profile only if the user is signing in using their Google account.

Right now, the user and authentication part is handled by Google firebase/firestore, while all of the product's information is stored in MongoDB.

We could store everything in either firebase or MongoDB only. But part of this project's goal is also exposing newcomers to as many interesting tool stacks as possible, so that everyone has something they are interested to work on. Combining Firestore and MongoDB and let each one of them be in charge of one aspect of our shop seems like a fun and good way to go.

This structure needs to be further improved on. For example, for our MongoDB database, we can create one collection for each produce category, rather than storing everything in a gaint collection.

Please let me know what you think and how we can improve on the backend structure together. Questions, suggestions, comments are all welcome! ♥️

Listing this as one of the milestones because there will be consistent modifications to our backend structure as our project scales up.

This is a spin-off thread for the milestone proposed at #19

I think a reasonable first step to do is hiding our add-product form entirely. Then we would display a search box. The idea is that as you type in the produce name, the matching products will show up accordingly below the search box, as a list. Then once the user finds the product they are looking for,

• they can click on the product and it will bring up the form pre-populated with the produce's information, so that the user can edit the information
• there is a button for them to delete the product as they wish.

Next to the search box is a button "add product." Once the user clicks on the button, the hidden form (the same as the one we are using right now for the project will show up). Then the user can add the product as they wish.

This is simply a general outline for what we need to do to make the basic functionality complete. There's certainly a lot more we can make once we finish the basic functionalities. Futures issues will certainly arise related to the current milestone.

Feel free to make any improvements and let me know if you want to contribute to this milestone! 👍

Right now, we have an env file for the backend to store secret keys, while in the frontend code, we have another two js files storing the firebase and stripe connection keys. This setup feels a little cumbersome and it makes the configuration process a little more tedious. There should be a way to streamline the setup the process, for example, maybe storing both the frontend and backend keys in the .env file in the server folder?

Any suggestions or comments on improvement?

Right now, in the Sign In page, the forms are not aligned at the top. So we should probably align them at the top.

Also, we want to add a bit more background to the two forms. Maybe setting the background color to a color very close to white to provide a bit more structure. That would probably make it look nicer.

We need to add a new shop title to our webpage. The title should be "Seattle Produce Delivery Shop".
It should stick regardless of which page you are currently (so placed it in the middle of the navbar).
I think it is better to make the style match with other components in the navbar.

Right now, the product overview page (Shop tab in the navbar) doesn't really make sense logistically. It shows us only 4 items in each category, but there is no place we can click on to bring us to the collection page of that category, where all of the produce items are listed out.

I propose that, whenever we click on the category name, it will directly take us to the collection page of that category.

Actually implementing this shouldn't be hard. We should convert the text to a button, and then add a new Route. That should be it!

As a demo, when we click "Vegtables"

It would take us to the following page.

It might be better to display more useful information that shows user has entered an invalid email or password Right now, we are simply using a pop-up window displaying a generic error message. This won't be helpful to user as they don't know which part of information they have entered wrong.

However, at the same time, we don't want to let them know whether they have entered the email or password wrong. That would a security vulnerability.

So overall, we should display a better error message (something like either your email or password is incorrect, and when the user doesn't type in either field, we want to display another kind of message). And the form shouldn't simply be a pop-up window, but maybe a new component that displays on the top of the screen.

Since the error will be thrown by Google firebase (we are calling their method signInWithEmailAndPassword), you might want to check the documentation on what errors the method throws and conditionally renders an error message depending on the error type.

Check out the documentation https://firebase.google.com/docs/reference/js/firebase.auth

Right now, the admin's order page is missing.

The main functionality of the admin's order page is to keep track of all of the user's current orders.

The idea is that once the user pays successful, we want to use the order (all of the item's the user has ordered, the user's username and email, when they have ordered, any comments they have regarding the products).

This is a pretty involved part of the project's new feature and should be addressed with high priority, since the feature is essential to the website's main functionality.

Check out the code in src/components/stripe-button/stripe-button.jsx.

const onToken = (token) => {
    axios({
      url: "payment",
      method: "post",
      data: {
        amount: priceForStripe,
        token: token,
      },
    })
      .then((response) => {
        //TODO: might want to show a more helpful success message
        paymentSuccessCallback();
        alert(
          "Your payment is successful. We will be in touch through email soon"
        );
      })

Essentially, if the Stripe backend detects the payment has been processed successfully (using the test credit card of course), the onToken method will be called, and inside the method, we alert a success message (which should be enhanced, check out issue #), and also call the paymentSuccessCallback().

The method paymentSuccessCallback() is defined in src/pages/cart-checkout/cart-checkout.js.

paymentSucceeded = () => {
    const { cartItems, user } = this.props;
    const { displayName, email } = user;
    // Want to transform the cartItems into an array of object
    // Where each object contains the product name and the product quantity bought
    const transformedCartItems = cartItems.map((cartItem) => {
      const { name, quantity, id } = cartItem;
      return { name, quantity, _id: id };
    });
    axios
      .post("/checkout", {
        transformedCartItems,
        displayName,
        email,
      })
      .catch((err) => {
        console.log(err);
        throw err;
      });

This method retrieves the relevant product and user information, as well as storing the information into the MongoDB database.

What we want to do next is retrieving the same information from the database and displays it in the Admin checkout page

I think a more visual representation would be nice, where each user's order is listed out as a card item. So essentially, the entire page would be filled with card items laid out nicely. Like a blog card item here.

I am only laying out the general idea. What specifically needs to implemented and how to realize the implementation is of course much more complicated and open to discussion. We might need to (or definitely) change up how and what the data needs to be stored in the database, and adding CRUD operation on each user checkout item card as well.

I'm listing this as one of the project's milestones because there's a lot to implement.

Feel free to ask any clarifying questions here and contribute any ideas!

Right now, when the user either signs in or signs out, there is no obvious change in the interface to indicate their action has succeeded. We want to display a message (or a quick pop-up component to indicate that) instead. Definitely don't use alert(). I feel like that would ruin the user experience since that strategy doesn't align with the rest of the app.

Whoever is interested in tackling this might need to fire an action based on the Firebase's onChangeListener.

Right now, our project is all done in Javascript.
A better and more advanced way is to convert our project to Typescript. There's some tradeoffs, but I see this as an exercise for those who want to practice using Typescript.
There's a lot of code in this project, and converting everything to using Typescript is a daunting task.

So here's what we are going to do.
We are going to use a new branch titled "typescript." So that all of the work can be done in typescript, then we will merge the change into our master branch periodically.

Important

Please follow the steps below when doing Typescript conversion.

• You should open a new issue titled with the structure of "Upgrading xx.js(x) to xx.ts(x)", where xx.js is the file you are converting to typescript.
• Then, you want to self-assign yourself to the issue so that others know.
• After the conversion, you may want to specify the path of the your file you have made changes on, as well as any other noteworthy code you have written.
• Finally refer to this root issue (using #) and choose the "Typescripting our project" milestone in your issue.

This is a discussion post on project testing. The goal is to find out a way to test our project in a systematic way.

For the frontend, we can incorporate either Jest or React testing library. For the backend, still undecided.

Any inputs to how to get the testing started is much appreciated! Testing is a highly essential part of our project's quality, so we want to make sure to brainstorm and brainstorm before getting started.

We probably also want to create a new branch dedicating to testing as well.

Right now, once the shopping cart is open, we need to click the shopping cart icon again to reclose it.
I don't think it will be a good user experience because some users might not know that you need to click the icon in order to close it again. I think it would be better to be able to close the cart whenever the user clicks outside the shopping cart area.

Any other ideas on how to improve the user experience?

Applying the fixes made in the README to the actual code

The styling of the button is inconsistent with the stylings of the rest of the checkout page.

We might want to change the styling to match it with the stylings of the other components. In particular, it is better to use the button component already defined in the components folder.

You might run into potential issues because the current button and the stripe credit form is bundled together (we downloaded the entire component using a stripe npm package). So you might need to come up with an alternative way of making this work. Please check out the Stripe API on ideas. You are totally welcome to reinvent the Stripe payment flow as you would wish and make it really different. The design choice is up to you!

I am thinking about adding typescript-eslint to ensure the robustness of our project.

This issue is related to the milestone #25

Let me know what you think about adding a layer of static analysis, whether this is feasible, and if you are interested on working on it. Just feel a comment below! 💪

This is entirely open to discussion.

Right now, as we are scaling up the project, I want to at least touch base on optimization. There are lots of different optimizations for web development, and we should brainstorm what kind of optimization can be specifically applied to our project.

Feel free to leave a comment or an idea how to get to started!

Listed this as a milestone.

Right now, our CSS style is global, which isn't ideal if our project scales up.

We have two (definitely more, feel free to brainstorm) options, either using CSS modules, or styled Components.
I personally would prefer using CSS modules because it's easier to get your feet wet and get started, but I definitely see some tradeoffs.

Since this is a big task (transforming all of our project's style is a lot of work), we will tackle the style one file after another using individual tracking issues. We will probably imitate the protocol resembling #25 to make progress slowly.

I'm listing this as one of the major milestones.

Please let me know what you think.

We are using heroku for deployment, but the MongoDB side doesn't seem to work.

Firstly, see if you can try to replicate this issue.

Sign up for with Heroku, clone the project, and connect it with Heroku using necessary commands (check out the docs on the website, should be very simple).

The scripts have already been done for you, so you should be able to connect on the first try.

Don't forget to set the whitelist of your MongoDB atlas to "all websites allowed," also add the project's heroku uri to the firebase whitelist as well.

Now, you will see that the MongoDB database is successfully set up, but it is not able to receive any requests, and thus the shop page is always empty.

This is a fairly urgent issue. I have been stuck on this for quite a while today. Would appreciate if anyone can help me fix this!

Right now, the potato icon will take us to the home page.
But some users might not know this functionality.
Adding the word "Home" to the potato icon will defeat the purpose of using an icon here.
So I think it is better to add a new tab to the navar, called "Home". When the user clicks on it, it should bring us to the home page.
Should be easy, you need to go add a new Route in app.js and add the logics in the navbar.jsx as well. Should be a simple fix.

Right now, in our shop page, the products are listed, but each individual product isn't clickable. This is not going to be ok if our project scales up, since we want to display more information for each product. For example, a short description of the project, how long it is able to be shipped, etc.

We would need a separate page, so that whenever the user clicks on the image of a certain product, it would bring them to that product's about image. We would need a new component in the page folder to do that.

This issue is currently open to discussion as we need to first figure out the design, layout, as well as content of what should be included in the page.

Feel free to leave any ideas or suggestions here and whether you are interested in working on this issue.

When I coded this page, I decided to go with the minimal design and got it done as soon as possible.
Now, the more I look at it, the more I feel like it is lacking something.
Need some ideas how to improve this page. We can play around with it. But I do want to make it look a bit different, a bit prettier and more modern.
What do people think? Need some inputs here.

Hello there! We are happy to have you here ☺️

Here's a few things to note before you start diving into the project and all the fun!

• The issue page here consists of the problems and potential ideas people can contribute to the current project.

• You are also use this page to ask clarifying questions and pose interesting ideas and perspectives to the project.

• The tags will help you understand the type of a particular issue and will guide you make an informed decision on whether the issue is suitable for you or not.

• Milestones are groups of more challenging topics of the project. There are usually about some bigger concepts and goals of the future of our project. We will usually have multiple issues that relate to or reference to one of the milestones.

• If you are new to the project, please look out for issues tagged with "beginner-friendly". These are usually the ones that only require a few lines of fixes and will help you transition into contributing without feeling overwhelmed! Check out #36 as well, this is a really good opportunity for starters. You can comment on project files while contributing to this issue at the same time. It is a really good way to understand what the project is doing.

• Feel free to open an issue (asking a question, posing a new idea, fixing a certain bug) and mark the appropriate the tags. If your issue is related to a particular milestone, please add the relevant milestone as well. Always add the "Issue progress" for the projects tab. All the settings can be found on the right-hand-side of the issue page.

• When you open an issue, describe your issue, concern, or questions with appropriate description. Attach images, code snippets, and use the markdown as appropriate. Please check out the Github markdown guide on how to style your issue description.

• Whenever you want to contribute to an issue, make sure someone else is not in the process of contributing to the same issue (it would suck if you guys have conflicting works!). To prevent people accidentally working on the same issue, please make a comment on the issue letting us know you want to contribute before your work on it! This is to let others know that you have been working on this issue. I will also assign your Github username to that particular issue just to be safe!

• You are more than welcome to comment on a certain issue, ask followup question, and exchange ideas with others. Please be respectful though!

• Once you finish resolving an issue and submit a pull request, one of the project organizers will review your code and merge it when everything looks good!!

• If you would like to learn more the workflow of Github issue, check out the official guide!

This is a new page that I have working on lately. The goal of this page is to display information on the current COVID-19 situation.

Some of current delivery customers choose to use our service because they are worried about safety due to COVID-19. I realized it might be good idea to include some relevant information on COVID-19 in the shop page as well. Right now, I have been following this awesome Youtube video on building up some related functionalities. This is what I have built so far.

There's certainly a lot more we can do to make this page do better. Any ideas or suggestions would be appreciated. If you want to modify this page or add new features, just leave a comment down below and open a new issue describing what you will be doing.

If this is something people are really interested in working on, I will potentially categorize this as one of the milestones! ♥️

Definition of PWA can be found in the mozilla developer page

The idea is to bring a native app-like user experience to cross-platform web applications. I feel like we would want this concept to our app.

We should first discuss its feasibility and what steps we need to take in order to get this started.

Since there might be a lot for us to change and implement if we want to make this happen, I decide to list this as one of our project milestones.

Potato icon in the header is a little off. We should make it smaller so that it aligns with the tabs on the right side of the screen. Should be just one or line of edits in the scss file.

I was following the README.md to set up the project and realized that some parts can use refining.
In regards to #37

Here's new way of organizing our project.

We would potentially switch to using Apollo and Node, based on sending and fetching data GraphQL.

From the backend, we will naturally use Prisma and connect it to a SQL database (e.x. Postgres). Prisma is a good choice because it is an database abstraction layer that works really well with GraphQL.
This will drastically alter the structure of our project, since we are converting from using REST to GraphQL and from NoSQL to SQL. We are forsaking mongoDB and potentially even redux.

Right now, I have created a new branch named apollo-node-prisma that serves as the starting point of the milestone. I want to know who might be interested in this idea of transformation, and whether transforming our project at this point is actually feasible or not. I don't think this should a given a high priority just because this is only an alternative way of doing things, and should be thought as a good way to practice, learn new tools, and see a full-stack application from a different perspective.

Please let me know what you think of this idea and whether you would like to get started working on this. If you have any questions or need some clarification, please let me know also!