An App designed to display the current inventory of a company in a browsable, user-friendly manner, generate quotations and useful reports for a variety of purposes.
Explore the project directory »
View Demo
·
Report Bug
·
Request Feature
Table of contents
The app is designed to display the current inventory of an international consumer electronics and computer accessories manufacturer in a browsable, user-friendly manner and generate useful, exportable reports for a variety of purposes. The initial raw data the App uses is provided by the factory's hourly updated XML data-feed for approximately 3,000 unique products.
Useful tool in the field: The App helps to present the factory's assortment transparently during negotiations. We can display the product portfolio quickly and simply, filter it by category or search among products by other criteria. It provides information about current stocks, prices, as well as photos and other specs of each product.
Support in other sales activities: It simplifies the compilation of different custom quotes as you can browse between products and find all relevant data in one place. In the future, it will be possible to compile and export Special Offers/quotations, downloadable in excel/pdf format
The App provides features where you display various long-term statistical analyzes / statements / charts to help us keep track of current market trends and needs. Based on these, our business strategy can be more accurate and effective. It helps to determine the right pricing policy and future product developments (supply expansion, product delisting) aiming the best possible rate of return and the lowest possible risk.
(in accordance with the roadmap)
Pages available to Guest visitors
- Landing page - the current promotional products are displayed
- Registration page - guests can get access to the site by filling in the registration form
- Login page - registered users can login to the site here
Pages available to Logged in users
- Profil page - the user can update the user details previously provided
- Inventory browser - browse products, filter, free word search, display product data/descriptions/images
- Quotation request - the user can create a list of selected products for which he/she would like to request a specific quote
- Quotation requests sent - list of quotation requests previously submitted by the user
Guest
- Can browse the site, view current promotions
- Can sign up on the site
Registered user
- Access product data, use the stock browser
- Can create a quotation request list of relevant products, but cannot send it yet
- Can modify own user details
Registered and email verified user
- Can send the quotation request list
- Can see previously submitted quote requests
- Displaying current promotions and discounted products - main page
- User registration
- Email verification (automatic confirmation link sending)
- User login
- Admin login, unique permissions
- Inventory browser
- Load and display products with details and photos
- Filter displayed products
- Search product by ID/name
- Compilation of a quotation request list
- compiling and sending list of selected products
- export compiled list in excel format
- export compiled list in pdf/word format
- send list by email
- Special offer maker - Admin side
- compiling a list of selected products - with date, name, qty, price, specs, photo, available stocks
- export compiled list in excel format
- Statistics - Admin side
- display changes in distribution prices for a given period
- represent changes on a chart/diagram
- Automatic scheduled database update
- Scheduled corporate database connection via xml/csv datafeed
- EU Customs Tariff API connection - collection of product data (product category, customs tariff number/EKAER validation)
- EU EPREL API connection - collection of product specifications (EPREL product data sheets, QR code)
- Database update (prices, stocks, product range)
- Contact form - sending user e-mail to the admin
Backend:
- MongoDB
- Express
- Node
- JSON Web Token
- Nodemailer
- Docker
- Cyclic - backend hosting
Frontend:
- React
- Semantic UI React
- Styled-components
- Docker
- Firebase - frontend hosting
Test:
API documentation:
- create
.envfiles in thebackendandfrontenddirectory based on.env.example - run
docker compose buildcommand in root directory, then - the
docker compose upcommand can be used to start the application - use
npm run loadDatacommand in thebackendroot directory to load our database with test products (in the case of an online database, the total upload time is 2-3 minutes) - use
npm run loadArticlescommand in thebackendroot directory, to load our database with some test promotional articles - Inventory Browser app: http://localhost:3000/
- Open API dokumentation: http://localhost:4000/api-docs
The hosted Application demo can also be viewed at the public link below:
https://inventory-browser.web.app/
Login
- Email: test@test.com
- Password: 12345678
Or you can register your own new user under /register
The backend was deployed on Cyclic, the frontend on Firebase.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag enhancement.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature)- Commit your Changes (
git commit -m 'Add some AmazingFeature')- Push to the Branch (
git push origin feature/AmazingFeature)- Open a Pull Request
Gergely Almasi
Project Link: https://github.com/Skill4fun/Inventory-Browser
Complete guide for Styled components in React
Common mistakes with React Testing Library
Swagger Editor
Build component driven UI
A useful tool for React testing
The most visual and interactive way to learn Git branching
12 React UI Layout Grid Components & Libraries
Build any component and share it with your team!
A custom hook for managing forms with ease
Markdown Guide
