Shift manager
This is a project given to me by the company where I follow my full-stack web development learning path. I had to create a shift manager application, where users can create accounts, add, delete and update their shifts. Also, they can see their earnings, and the best earning month in the year.
I used HTML, CSS, and Vanilla JavaScript to create this shift manager application. And because it's only a learning project, to simulate a database for the users and their shifts, the request was to use Local Storage.
It is built with a mobile-first approach, making it responsive on all devices. I also used CSS Grid and Flexbox to create the layout, and as in all of my projects, I used variables and utility classes to make the code more readable, reusable, and maintainable.
As additional features, I added a dark mode based on the user's system preferences, settings that are also saved in Local Storage for the next time the user visits the app.
Also, to simulate a 2FA reset password feature, I created an admin account that can approve a reset password of any app user, based on the user's request. This request is sent to the admin's account in a message, and the admin can approve or deny the reset password. If the request is denied, the user can then delete his account, or if the request is approved, the user can change his password.
I added many additional components and this is also a project that I will continue to work on. In the future I plan to develop it with a back-end service built by me, because I believe it can be expanded with many more features, to become a full-fledged shift manager app.
More about this app you can find in my GitHub repo, which contains readme files with more details about the app. Also, you can try it using the link below, being deployed on Firebase on a subdomain of my portfolio website and I used WebPack to bundle the app.
NOTE that the app will use your browser's Local Storage, and you can use it with made-up data as long as the data is in a valid format. For example, you can use a made-up email address, but the format must be just like a real email address. Also, you can register as many users as you want from a single device. And, if you want to use the admin account, you can use the following credentials:
- username: admin
- password: admin
