Giter Club home page Giter Club logo

oopsie_bits_csf213's Introduction

OOPSIE

image

NOTE: (Updated in 2023) If you are planning on copying as it is, I would advice you to atleast go through the documentation for spring because your oops project will actually go a long way in your future. Take this as an advice your senior gives

Features

  • Has a frontend made using React JS + Tailwind CSS
  • Supports payments using a custom system
  • Has coupon code functionality
  • Dockerized and ready to scale up whenever needed
  • Support for email notifications
  • User can order, cancel and check status of order
  • Manager can add products, check orders and delete orders
  • Admin can add and delete users, managers, check orders, and inventory
  • Forgot password feature was also implemented
  • Connected with a MySQL Database
  • Passwords were encrypted using bcrypt

Resources

Postman -> https://www.postman.com/joint-operations-observer-50626032/workspace/oopsie
JPA Repositories -> https://docs.spring.io/spring-data/jpa/docs/1.6.0.RELEASE/reference/html/jpa.repositories.html
REST -> https://spring.io/guides/gs/rest-service/
Java Spring -> https://www.twilio.com/blog/create-rest-apis-java-spring-boot \

Running Frontend

All these commands are to be run from /frontend folder npm install -> Installs Packages for the project
npm start -> Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

Running Backend

  1. cd Server
  2. ./gradlew bootRun
  3. You might have to change variables in the application.properties so that it works for your local database
  4. The server runs at SERVER_URL

Extra Setup Guide

  1. Install Mamp and create a database called oopsie in PHPMyAdmin, with username as mamp and password as Admin@123 The initial parts of this video can be helpful
  2. Install Postman and check all the requests the server accepts. I ensured all of the responses had examples as well. Postman
  3. Link frontend and backend using fetch requests and converting them to JSON on the frontend

Can refer to these files: https://github.com/Divyateja04/Oopsie/commit/15e5f0eb798d2e3af9d72c8beea4866d25aee481

We send a request to the backend, then get that response and process it in the backend. The Syntax for a standard fetch statement is(in our case)

fetch("http://localhost:8080/user/signin",
        {
          method: "POST",
          body: JSON.stringify(
            {
              emailId: email,
              password: password
            }
          ),
          headers: {
            'Content-Type': 'application/json',
          },
        })
        .then(rawResponse => rawResponse.json())
        .then(resp => {
          if(resp.error != null){
            setErrMsg(resp.error);
          }

          if (resp.emailId === email) {
            //If we got a response from server with email
            //He can be logged in
            dispatch(setLoggedIn());
            if (resp.isAdmin === true) {
              //Change Admin Status is it's an admin
              dispatch(setIsAdmin());
            }
            if (resp.isManager === true) {
              //Change Admin Status is it's an admin
              dispatch(setIsManager());
              if(resp.isApproved === true){
                dispatch(setIsApproved);
              }
            }
            //Passing the money to the set money function
            dispatch(setMoney({ money: resp.money || 0 }));
            //Set the fetching status to false so that button is not disabled
            setLoggingIn(false);
  
            //Using localstorage to set items
            localStorage.setItem("user", resp);
            navigate("/shopping");
          }
        })
        .catch(err => {
          console.log("Error Occured")
          setErrMsg(err.toString());
          //Set the fetching status to false so that button is not disabled
          setLoggingIn(false);
        });

oopsie_bits_csf213's People

Contributors

goldengod-1 avatar goldengod-12 avatar rohanpothireddy avatar saphereye avatar shivamt-16 avatar thenicekat avatar

Stargazers

 avatar

Watchers

 avatar

oopsie_bits_csf213's Issues

First Set Up your systems :)

  1. Install Mamp and create a database called oopsie in PHPMyAdmin, with username as mamp and password as Admin@123 The initial parts of this video can be helpful
  2. Install Postman and check all the requests the server accepts. I ensured all of the responses had examples as well. Postman
  3. Link frontend and backend using fetch requests and converting them to JSON on the frontend

Can refer to these files: 15e5f0e

We send a request to the backend, then get that response and process it in the backend.
The Syntax for a standard fetch statement is(in our case)

fetch("http://localhost:8080/user/signin",
        {
          method: "POST",
          body: JSON.stringify(
            {
              emailId: email,
              password: password
            }
          ),
          headers: {
            'Content-Type': 'application/json',
          },
        })
        .then(rawResponse => rawResponse.json())
        .then(resp => {
          if(resp.error != null){
            setErrMsg(resp.error);
          }

          if (resp.emailId === email) {
            //If we got a response from server with email
            //He can be logged in
            dispatch(setLoggedIn());
            if (resp.isAdmin === true) {
              //Change Admin Status is it's an admin
              dispatch(setIsAdmin());
            }
            if (resp.isManager === true) {
              //Change Admin Status is it's an admin
              dispatch(setIsManager());
              if(resp.isApproved === true){
                dispatch(setIsApproved);
              }
            }
            //Passing the money to the set money function
            dispatch(setMoney({ money: resp.money || 0 }));
            //Set the fetching status to false so that button is not disabled
            setLoggingIn(false);
  
            //Using localstorage to set items
            localStorage.setItem("user", resp);
            navigate("/shopping");
          }
        })
        .catch(err => {
          console.log("Error Occured")
          setErrMsg(err.toString());
          //Set the fetching status to false so that button is not disabled
          setLoggingIn(false);
        });

NOTE: Do not copy paste, won't work :)

I'll be giving deadlines from now on; I need proper contribution from each and everyone, no excuses will be allowed. I get that this is not polite but still, I need this to be done by Sunday Morning
I need the following deliverables:

  • Postman installation done
  • Database setup done
  • Progress on the fetch part

Orders and Wallet Integration

  • A customer should be allowed to view/search the items published/available for
    sale.
  • Select items to the cart.
  • Drop items from the cart if required.
  • Request for estimation (total cost) for selected items.
  • Confirm order and make payment.
  • User should get a confirmation message with an expected delivery date.
  • User will have a Wallet from where payments will be made, and the user can top-up the wallet if necessary. But at the time of registration must start with a minimum of 1000/

Email Integrations

  • Forgot Password
  • Topping up wallet notification
  • Order Placed
  • Delivery Information

Admin Integration

  • Admin user should be able to generate reports like โ€“ items sold on a date,
    customer order details(summary) for a month, item stock status, etc.
  • Any user can generate his order history (summary) for a given month

Manager Integration

  • Manager classes need to be linked with the frontend
  • Manager or admin users should be allowed to publish the details of the items made
    available for sale. Details needed are item_name, item_code, price, offer if any, qty
    available, delivery time etc.
  • A manager or admin can delete the published item whenever required.
  • Manager/admin can add or delete items and modify details about the items (price/qty/offers, etc.)

User Integration

  • A user can be - an admin, manager, or customer (appropriately decide the
    permissions/responsibilities).
  • Admin is the super user with all permissions.
  • Users (customer, admin, and manager) will have information such as user name, a user
    id (unique across the system), phone number, email id, and address.
  • An existing user should log into the system with a user id and password.
  • New customers are permitted to register.
  • A user can withdraw himself from the Application.
  • Password change (reset) facility is required.

Logout Functionality

As of now, the website doesn't have a logout button or functionality in the backend.

Use local storage for the same

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.