Table of Contents

1. Project Description
2. Installation instructions
3. Usage
4. Contributing Instructions
5. Credits and Acknowledgements
6. Licences

Project Description

This project utilised Javascript, React, HTML and CSS to build a frontend for supermarket stock management database. This frontend builds on a backend API for a fictional warehouse which contains stock batches of particular items. Products in stock can be chosen and sorted into a list of ordered items, that is then added to an order placed by a supermarket.

MVP

• Create a landing page with navigation routes.
• Create a navigation bar and display it on each page.
• Create a page for a creating a new order with ordered items.
• Create a page to display all orders.
• Functionality to create a new order that is stored in the database.
• Add delete functionality for an order on the display orders page.
• Add CSS styling to the pages.

Extensions

• Add a button that generates warehouse themed jokes.
• Add an audio player to the page with audio controls.
• Add functionality to edit the order status to be updated to be in progress, out for delivery, delivered.
• Add ability to edit orders.
• Add an expand button to see full order details on the current orders page.

Wireframe

Prop Diagram

Installation instructions

• In the terminal, navigate to the directory you want to copy the repository into. \
• Run the command git clone [email protected]:Marv3llous/Backend_API.git
• Run the command git pull to ensure you have the latest version.
• Open the project in the preferred IDE such as IntelliJ.
• In the terminal, create the database called inventory_db by running the command createdb inventory_db.
• Run the BackendProject file.

---

• In the terminal, navigate to the directory you want to copy the repository into. \
• Run the command git clone [email protected]:KajananGit/Stock_Frontend.git
• Run the command git pull to ensure you have the latest version.
• Open the project in the preferred IDE such as VSCode.
• Run the command npm i in the terminal.
• Now the backend API is running, you can run the frontend application by entering the command npm startin the terminal.

Usage

Home Page:

• Acts as a Welcoming Screen. Use buttons to navigate to other pages such as the Current Orders Page & New Orders Page.

Current Orders Page:

• Displays all the current orders.

• Can search orders based on the client (supermarket) that has placed an order.

• Can sort orders based on the order status.

• Can view more details about an order when clicking on the 'More' button.

• Can delete and order by clicking on the 'Delete' button.

• Can update the status of an order by selecting a new status from the drop-down list.

New Orders Page:

• Can select a supermarket from the dropdown bar and start an order.

• Once a store is selected and the button is submitted, the item form is displayed and you can add items, choose quantity and add them to your order.

• Once an order is placed you get an alert to confirm the order went through.

Extensions:

• Can click the box in the header to generate warehouse themed jokes.

• Can use the audio player to play music.

• Clickable links in the footer.

Contributing Instructions

Find below our contributing guidelines. By following these guidelines, you'll help us to maintain a high quality codebase and make the review process smoother for everyone.

1. Fork the Repository: Create a fork of the Stock_Frontend repository on GitHub.

2. Create a Branch: Clone the forked repository to your local machine & create a new branch for your contribution.

3.Make Changes: Make your changes to the code & ensure your changes follow our coding style and conventios to ensure uniformity.

4. Commit Your Changes: Commit your changes to your local branch with a descriptive commit message.

5. Push Your Changes: Push your changes to your forked repository on GitHub.

6. Create a Pull Request: Open a pull request from your branch to the main branch of the upstream repository.

7. Review and Feedback: We will review your pull request and provide feedback.

Credits and Acknowledgements

• Kajanan Lingkeswaran - Github: https://github.com/KajananGit
• Zarrin Rahman - Github: https://github.com/z-for-zarrin
• Yeabsira Negash - Github: https://github.com/Y-Negash
• Gabriel Dzharadat - Github: https://github.com/GJaradat
• Marvellous Akib - Github: https://github.com/Marv3llous

Licences