Wonka's [eSpice - DPS Noida]

• 

  Manager Home

• 

  Manager Chat

• 

  logo

Inspiration

Pushpagandha Kar, an 11 year old, had to lead a huge company with no prior experience. It wasn't going to be easy for her, and the Oompa Loompas knew that she won't be able to manage the factory. Therefore, it was our task to create something simple, yet efficient, that would solve this problem. We tried to get as many details from the original movies and series of books as we could, and tried to understand the Oompa Loompas' needs and their necessities, to ensure that our product could be easy to use and would be useful to them.

What it does

Obviously, running a factory is no child's play, so it was essential for us to ensure that we could fit in as many utility features as we could. This Wonka's website is filled with everything you need to have. Customers can buy the Wonka products produced by hardworking Oompa Loompas, manage their cart, and place orders.

We categorized Oompa Loompas into two categories - manager Oompa Loompas, and workers. Manager Oompa Loompas are responsible for running the factory, and ensuring that the Oompa Loompas under them are efficient. All Oompa Loompas are assigned to a certain location. Mangers can chat with the Oompa Loompas of a current location in real time, making supervising and and training them easier and more efficient. Managers can access these chats to ensure that there's nothing wrong going on, just in case. Managers can even assign these Managers haven the provision of assigning these Oompa Loompas tasks, and keep a tab if they are being completed regularly or not. Oompa Loompas simply need to open the dashboard, check their tasks, complete them, and mark them as done.. Of course, these tasks can always be discussed in the chat. And well of course, these Oompa Loompas need to be paid. We all know that we pay them cocoa beans, and the finances of the web app right now are well - really simple. We just assume that 1 USD is equal to a 100 cocoa beans, and pay an Oompa Loompa 150 of such beans. Managers can even add a bonus if the Oompa Loompa has been working hard. The managers get a cut from the revenue they make, and Pushpa relaxes as she becomes a billionaire in no time.

We have also added a customer section to the app where they can access the store. The contents of this store can be edited by manager Oompa Loompas. From this store they can by the products offered by Wonka and when they checkout the total budget of the managers is increased. This can easily be transferred into a real app by adding a payment gateway in our middleware. Together with these features, this app will allow Pushpagandha to supervise her employees and reach a global target demographic using the store, boosting the factory's productivity and making the Wonka's business reach new heights.

How we built it

We used the MERN (MongoDB Express React & Node.js) stack for this web app. The frontend is built using next.js, a framework for react, and we use Express and MongoDB for the backend. We use socket.io for the chat, allowing workers to chat with each other in real-time. We use SCSS for styling pages.

We spent a lot of time thinking about ideas and just researching about Oompa Loompas, and we found out a lot about them. Did you know they're always making up songs? We made the UI design in Figma, which allowed us to create our frontend with ease. There are a few reasons why we chose this stack, and React in particular: First of all, react allows developers to create custom components easily, a feature which a lot of people love and use. Secondly, all of our team members were experienced with this stack, which made setting up things much more easier. Express is like the go-to framework for creating APIs, so we chose it without even thinking.

Challenges we ran into

We faced a lot of bugs during making this app. Connecting frontend with backend after every change to the pipeline was a task in itself, and they infinite loops were no less than nightmares. Some of our most prominent bugs were the chat not being real time and the paycheck history not working as it was intended to. In the end we persevered through these hardships, fixed these bugs and completed the app.

Accomplishments that we're proud of

We are proud of the design we created. It looks simple yet elegant. Its a modern UI with a classy look which is pleasant to the eyes. We don't want to ask customers to fill in all their personal details. They probably won't even fill the first few fields. Therefore, we used OAuth Providers, which allow customers to sign up in 1 or 2 clicks, creating a smooth authentication flow. We are proud that we came together as a team and finished this project harmoniously, setting up a semantic frontend and backend for this site in 4 days. Not to forget, the logo we created which captures the playfulness of the Wonka's brand along with fitting perfectly into our design. tldr; we're proud of our app.

What we learned

We learnt a lot about Figma and UI design, along with learning about new hooks, using MongoDB and creating API pages. We also learnt about axios, and got a lot of experience with socket.io.

What's next for Wonka's [eSpice - DPSN]

Next up we can make a senior manager account who can manage the managers and check whether they are delivering or not, we can add an actual payment gateway to make this a secure store and of course, we will polish up the UI more. More coming up with our honorable judges recommendations!

Built With

• axios
• express.js
• figma
• mongodb
• next
• node.js
• react
• scss
• socket.io