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
- 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
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 \
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.
cd Server./gradlew bootRun- You might have to change variables in the application.properties so that it works for your local database
- The server runs at SERVER_URL
- 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
- Install Postman and check all the requests the server accepts. I ensured all of the responses had examples as well. Postman
- 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);
});