calin.manager

It's not a bug - it's an undocumented feature.

Anonymous

Ng-Shift

Angular app

Ng-Shift

This is the final project for the Front-End part, given to me by the company where I follow my full-stack web development learning path. I had to create a shift manager application in Angular, connected with Firestore database and using Firebase Auth for authentication. The app has two parts, the user side and the admin side, with a small backend in Node.js and Express.js using the Firebase Admin SDK.

The application is a shift manager for a company that has multiple locations and multiple employees. The user can create an account, log in, and create a shift for a specific location and a specific employee. The user can also edit or delete a shift, and can also edit his profile, change his password, or delete his account.

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.

The admin side is a little bit different. The admin can create an account, log in, and see all the shifts created by all the users. The admin can also edit or delete any shift, and can also edit users profile, change their passwords, or delete their accounts.

For the admin part, I built a small backend in Node.js and Express.js, using the Firebase Admin SDK. The backend is deployed on Render, and it is used for some strong privileges, like deleting a user or editing a user's password and email. These were the requirements for the project.

Because I wanted to learn more about Angular, I used Angular Material for the UI, and I also used Angular Fire to connect the app with the Firebase services.

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 (calin.codes).

NOTE that the app will use the REST API deployed on a free plan on Render, that is why it will take a few seconds to load the admin side, because the server will be sleeping.

    Admin side testing

  • username: admin1
  • password: 12Saaa@

    User side testing

  • username: willdoe
  • password: 12Saaa@
Ng-Shift

calin.codes