Welcome, this project is this project is a clock in software for small business
This project is a MVP. In future versions will be changed in a SAAS model app and will be integrated with full payroll, automatic HMRC submissions, mobile apps and many more.
See this project on live enviroment on GitHub Pages here: https://zai-clock-in-software.herokuapp.com/
As a employer:
- I want users to be able to easily navigate my website on any device.
- I want to bo able to add, edit employees.
- I want to be able to check presence.
- I want my website to be accessible to anyone even for screen readers.
- I want to be able to personalize my software
As a employee:
- I want to be able to clock in and out easy and fast.
- I want to know if my action was successfully.
Click To Expand Features
- Same navigation menu is used across all pages for consistency, but is hidden from user that is not authenticated because in index page is no need for navbar.
- Navigation was designed to be easy to use and to understand.
- Navigation was designed to work well on all devices.
Index Screen was designed with employee in mind. Only required features are in this page. NFC is working only in Google Chrome For Android, and is activated if is possible.
- Index Screen Desktop
- Index Screen Tablet ( NFC INACTIVE )
- Index Screen Mobile ( NFC ACTIVE )
- NFC READY message appear on screen only if device is compatible, NFC is active and permissions given
-
Registration page is designed with employee, hr employees in mind
-
Registration Page Mobile
Once registration was successful email verification is required.
- Verification Email Desktop
- Verification Email Mobile Top Part
- Verification Email Mobile Bottom Part
Once user click the email is redirected to verification page where have to input email address and secret code from email.
- Verification Page Desktop
- Verification Page Mobile
If user don't have verification code, can request to be resent to email address.
- Resend Verification Page Desktop
- Resend Verification Page Mobile
Once email is verified user is redirected to login.
- Login Page Desktop
- Login Page Mobile
Once email is verified user is redirected to login.
- Dashboard Desktop
- Dashboard Mobile
Settings page give the power to end user to customise the lock of his brand now software by changing brand name, navbar-footer color and text color and google font. More settings will be added latter.
- Settings Page Desktop
- Settings Page Mobile
In this page employer or hr department can see or update their details
- Employer Profile Page Desktop
- Employer Profile Page Mobile
In this page we can check who is working now, and clock in times.
- Working Now Page Desktop
- Working Now Page Mobile
In this page we can check who is not working now, and clock-out times.
- Home Now Page Desktop
- Home Now Page Mobile
In this page we can add an employee. Clock nr is unique and because of that we generate this number automatically.
- Add Employee Page Desktop
- Add Employee Page Mobile
In this page we can see all employees. And we have an link to edit page if is required.
- Employees Page Desktop
- Employees Page Mobile
In this page we can edit employee details, excepting Clock Nr.
- Edit Employees Page Desktop
- Edit Employees Page Mobile
In this page we can delete employee details, action is irreversible. We use clock in like a security.
- Delete Employees PopUp
- Delete Employees PopUp Mobile
Click to expand wireframes
- Desktop and tablet wirefame is shared because of minimalistic design
- Mobile Wireframe
- Desktop and tablet wirefame is shared because of minimalistic design
- Mobile Wireframe
- Desktop and tablet wirefame is shared because of minimalistic design
- Mobile Wireframe
- Desktop and tablet wirefame is shared because of minimalistic design
- Mobile Wireframe
- Desktop and tablet wirefame is shared because of minimalistic design
- Mobile Wireframe
- Desktop and tablet wirefame is shared because of minimalistic design
- Mobile Wireframe
- Desktop and tablet wirefame is shared because of minimalistic design
- Mobile Wireframe
- Desktop and tablet wirefame is shared because of minimalistic design
- Mobile Wireframe
- Desktop and tablet wirefame is shared because of minimalistic design (Same as registration page)
- Mobile Wireframe
- Desktop and tablet wirefame is shared because of minimalistic design
- Mobile Wireframe
- Desktop and tablet wirefame is shared because of minimalistic design
- Mobile Wireframe
- Desktop and tablet wirefame is shared because of minimalistic design
- Mobile Wireframe
- Desktop and tablet wirefame is shared because of minimalistic design
- Mobile Wireframe
- Desktop and tablet wirefame is shared because of minimalistic design
- Mobile Wireframe
- Desktop and tablet wirefame is shared because of minimalistic design
- Mobile Wireframe
- Both are site-wide, desktop:
- Mobile Wireframe
- Visual Studio Code
- HTML
- CSS
- JavaScript
- Python
- GIMP
- Microsoft Paint
- Materialize CSS 1.0.0
- Ubuntu 20.04 on WSL on Win 10 64bit
- Virtual Enviroments
- GIT, GitHub, Heroku, Heroku CLI
- MongoDB
For database MongoDB was the requirement. I used https://mongodb.com
Click To See Database Collections
After registration of an admin details are stored in admin collection. Please notice that email_is_verified is False and there is an verify_secret created.
When user use correct secret code to verify the email address then email_is_verified is updated with true and secret code is deleted, for sequrity and to be able to reuse it if we have milions of registrations daily.
When a employee clock-in using clock nr or clock-in card(ON NFC ONLY), details are stored on this collection. (Date, Time and Clock Nr). Because this is the most used feature, and time sensitive i decided to keep clock in and clock out in separate collections and to store the minimum required informations only here.
Same as clock in but when user clock out we store in another collection all the details: Both Clock In and Clock Out and after we delete the respective entry from Clock In. This is because the user can be or clock in or clock out never both.
As we said earlier when user clock out we retrieve the informations from clock in before to be deleted, first name and last name from employee collection and clock out details and we build a document in this collection with all the details to be easy accesible for furter queries.
In this collection we keep all the details of a employee when is registered by admin. Clock nr is auto generated.
In this, collection are stored template settings this in only collection that have to be created at script installation.
- Images was taken from: https://www.pexels.com/
Click To Expand Mobile Tests
- Index Page
- Login Page
- Register Page
- Dashboard Page
- Settings Page
- Profile Page
- Working Now Page
- Home Now Page
- Add Employee Page
- Presence Page
- Employees Page
Click To Expand Desktop Tests
- Index Page
- Login Page
- Register Page
- Dashboard Page
- Settings Page
- Profile Page
- Working Now Page
- Home Now Page
- Add Employee Page
- Presence Page
- Employees Page
Click to open Validator Tests
- Index Page
Index page validator link: Click To See
- Login Page
Login page validator link: Click To See
- Register Page
Register page validator link: Click To See
- Dashboard Page
Dashboard page validator link: Click To See
- Settings Page
Settings page validator link: Click To See
- Settings Page
Settings page validator link: Click To See
- Profile Page
Profile page validator link will throw 500 for some reason: Click To See
Page was checked by source code:
- Working Now Page
Working Now validator link: Click To See
- Home Now Page
Home Now validator link: Click To See
- Add Employee Page
Add Employee validator link: Click To See
- Presence Page
Presence validator link: Click To See
- Employees Page
Employees validator link: Click To See
- Verify Page
Verify validator link: Click To See
All CSS tests pass, error and warning is from materialize.min.css with is from Materialize. My css is error and warning free.
Validator link: Click To See
I did the check against my code only by code input to avoid Materialize errors.
I have 2 javascripts files because i wanted some functions to be available only in index page. And like this i avoided some console logs errors.
- Index JS
- Scripts Site-Wide JS
-
For This script you will need an account on Heroku https://heroku.com For This script you will need an account on MongoDB for Database https://mongodb.com
-
In top menu press CODE > Download ZIP or clone the project in VS Code
-
In your system you need to have to have locally installed: Python 3.10.4, pip3, GIT, Heroku Cli.
-
I am using a development environment composet like: Win 10 64 Bit, Python 3.10.4, WSL - Ubuntu:20.04. On Ubuntu: VENV, GIT, HEROKU CLI. VS Code is in Windows and is accesing Ubuntu enviroment remote. I choose to use this setup to benefit from the best tools from Windows and Ubuntu. To setup your env like this you can use this tutorial: https://docs.microsoft.com/en-us/windows/wsl/install
-
Once your development env is ready and you clone the script from GitHub you need to install all requirements. This can be found in Requirements.txt file. to install fast just open a terminal in VS Code and type next comand:
pip3 install -r requirements.txt
This will install all the required packages.
Now go to env_example.py and copy the file and rename it to: env.py.
- Now is time to go to MongoDB site and create a database.
- After you create the database, is safe to leave it empty. All required fields will be created on first run of the software.
- Ignore any previous instructions like we need some mandatory fields in database. That was sorted in code.
- Next you need to take your database conection details and fill them in your env file.
- Go to MongoDB site click on left on database then the 3 dots next to Browse Collections and Comand line tools
- Select connect Instructions > Connect Your Application.
- Select Python and 3.12 or later and you will get a link:
mongodb+srv://username:<password>@cluster0.wiqjj.mongodb.net/myFirstDatabase?retryWrites=true&w=majority
- Add the link in your env.py in mongo uri field. Don't forget to replace and with your database name and password.
- If all is ok you should be able to run the app locally.
- Now to deploy to heroku open your terminal and type:
heroku login -i
You will be promted for your login info
heroku create your_app_name_here
To create a new app, replacing your_app_name_here with the name you want to give your app
git push heroku main
And your app will be deployed to Heroku.
- Last steps will be to to in heroku website, access your new created app and go to settings and then scroll the page and click on Reveal Config Vars.
- Now you will need to copy your variables from env and save them in this place. Mandatory are 3 variables as you see in the image:
-
Email to work you will need to add your SMTP details in same way like the app details. To learn how to get this fallow this tutorial: https://kinsta.com/blog/gmail-smtp-server/
-
Congratulations your app is up and running on url provided by Heroku!
- Materialize - For well documented css framework
- Pexels - For images
- GIMP - For Image processing
- Favicon.io - For Favicon
- Google Fonts - For Poppins font.
- Code Institute - For brilliant lessons from where i learn to do this.
- https://unlayer.com/ - For Email Template
- https://web.dev/nfc/ - For Briliant NFC tutorial.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent