E-Pharmacy Admin Dashboard (Frontend part)

Type: Individual MERN stack project

Role: Fullstack Web Developer

Backend: Swagger documentation with routes

##

Test account of admin:

Email: vendor@gmail.com

Password: Vendor12345@

Attention!!! Backend was deployed to render.com with free of charge plan. Can be delay about 50 seconds whith first HTTP-request.

Technical skills:

React, React Router, Redux, Redux Toolkit, Axios, React-hook-form, react-select, react-responsive, yup, Material UI, emotion-styled, JavaScript, Redux-Persist, React-spinner-loader

Software:

VSCode, Figma, Postman, Mongo Atlas, Swagger (for backend), GitHub, Git Bash

Task: create admin dashboard for e-pharmacy web project due to Technical requirements

Layout: this project was created due to Figma layout

Description

Develop a web application in React for a Dashboard page that displays information about income, expenses, and other statistical data of a medical store. The layout of the Dashboard page is provided, and it should be implemented with consideration of both design and functionality.

The layout is responsive, except for mobile devices. Breakpoints:

• Mobile: fluid layout starting from 320px, becomes responsive from 375px;
• Tablet: from 768px;
• Desktop: from 1440px;

The layout is valid

• ✔ Connect fonts
• ✔ Optimize the sizes of vector and raster graphics
• ✔ Ensure support for displaying images on retina screens
• ✔ Optimize image loading
• ✔ Connect all icons through a sprite
• ✔ Add page favicon display

##

Dashboard page (main)

First of all Admin should login into app with credentials (email and password)

Then he will navigate to Dashboard page with general statistic, recent customers and latest income/expenses.

Admin dashboard has 5 private pages: Dashboard (main) page, Orders page, Products page, Suppliers page and Customers page. For navigation between pages admin should use navigation menu. Until 1440px menu can be open with burger's button. In burger menu also exist button for Logout.

Also from dashboard page admin can directly navigate to Products page, Suppliers and Customers page from statistic section.

Orders page

Orders page includes information about orders and their status. There is filter for filter orders by user name.

Products page

Products page includes list of all products with filter by Product name. Admin can add new product, delete product or edit them.

Suppliers page

Suppliers page includes list of all suppliers with filter by user name. Admin can create a new supplier or edit them.

Customers page

Customers page include list of all customers with filter by user name.