Live React Portfolio Sample App - E-Shop Notifications

10 Jan 2025

Dev Ops

Portfolio App Notes

Objective

To demonstrate my React App development skills, I have exposed a fully functional front end React App (with out a backend). This portfolio sample features a simple intuitive, and easy to use mobile first User Interface.

Application Title:

Store Notices

Application Overview:

The React App is a front end component designed to allow users (E-Shop managers) to maintain a data (store notifications) and meta data used for customer communications. The data will be consumed/shared by a backend web component to display store notifications/banners e-commerce shop.

Application Features:

Mobile first, responsive design, mouse, touch, and keyboard accessible.
Filter and display store notices
Create, read, update delete, and copy store notices (CRUD and copy) and meta data, begin and end dates, enabled, etc.
Keep changes in local storage to minimize potential loss of data by api errors/failures
Notices are always sorted by begin date as follows, current active notice, future notices and past notices.

How is the React App different from the production version?

The production version of the React App would have a backend API to store and retrieve the data. Additionally, the production version of the app would is embedded as component of a web app that provides user authentication, authorization, role-based access control, e-store functionality, etc. Also, a backend component would be used to actually display the store notices in e-commerce shop.

How to use the Portfolio Sample React App?

Simply visit the url Live React Portfolio Sample App - E-Shop Notifications and interact with the UI to filter, view, edit, and save changes to the default store notification and list of scheduled notifications. Important Note: If saving fails, changes are saved in local storage and can be retried. That is, the user is allowed to work offline and retry saving changes when the server is available.

How to “reset” Portfolio Sample React App?

To reset the React App to the “sample data”, simply refresh the page via the browser button. If the page shows “Saving to server failed. Local changes still available.”, Click the “X Refresh” (cancel) button to abort the changes you have made. This action will restore the original sample data.

Are there missing desired features?

Yes, of course (as projects are never done) the app can be enhanced with basic features such as: prevent overlapping time frames for notifications, improved default start and end dates, for new notifications, etc. However, these enhancements will need to be prioritized according to the value being delivered to the business.

Final Thoughts

I hope you enjoyed interacting with the React App and found it helpful. If you have any questions or feedback, please feel free to reach out to me. I am always looking to improve my skills and learn from others. Thank you for your time and consideration.

Skills Footprint:

Category	Technical Specifics
general	Web Development * React Development
standards	HTML * CSS * JSON * Typescript * REST * JSON
tools	VSCode * GIT * NPM * React * Jest
concepts	Front End Development * Responsive Design * UI/UX
packages	React * Jest
deployment	Github Actions