Haji Flour Mill

'Haji Flour Mill' is a commercial site for my own small mill business to keep track of users(customers) and daily entries.
Checkout Haji Flour Mill

Main Functionalities

Anyone can view home, services and pricing of the services pages.
Logged in users can see their profile details and all of their entries from the business. They can also give review to service. (Users themself can not register, only admin can register new user.)
Logged in admin can manage administrative tasks such as:
- Add a new entry
- See all entries
- See a user's entries
- Create a new user
- See all users
- See a user's details
- Add a new service
- Update an existing service
- Delete an existing service
- See all reviews
- See a service's reviews
- See reviews by a user

Features

Allows user to explore services and their prices that business provide.
Admin is created using a specific route, not disclosed in or accessible from the app, which will only be known to owners of the business and higher level development administrators only.
- Currently it's a normal signup form, working on a feature that will allow only owner and the administrative person to create admin, even if route has been known to someone else.
Generates an automated unique username for every user to differentiate between users.
- It is automated, as only admins are allowed to register new users, and it's unneccessary load for them to think of a unique username for every registered user.
A customer or user of the business can log-in and see it's profile details and history about his/her entries.
A customer or user can give review to a service.
Admins can log-in and manage the business tasks discussed in Main Functionalities section.
It has good and attractive UI.
It provides good User Experience(UX) by showing clear navigation links through out the application.
It is fully responsive for Desktop and Tablet screens but can break design on some pages in Mobile screens.
- It is because it's a commercial website and most of the time it will be used in Desktop or Tablet screens.
- Another reason is, it's pages contains tables to show data, which takes required space even in mobile screens and causes the design break.
- However I am constantly working to make it more responsive for Mobile screens too.

How to use

As an admin

Create admin by going to the route /admin/signup.
- Server will create a unique username and show it on the screen, remember it for further login.
Login as an admin by clicking the Login-Admin button.
- Enter the credentials to login as admin.
- If a normal user tries to login as an admin, it will show access forbidden error.
After successfully logging in, admin will see the New Entry page. (It is default render as it is the primary work of the admin.)
From here admin has access to many administrative tasks.
When admin crates a new user, a unique username for the user is generated and displayed on the screen, admin must tell the user it's username and password for login process.
For ease, I suggest use the mobile number as password, it will be easy for the user to remember. But it's not compulsory.

As a user

Login as user by clicking the Login-User button.
- Enter the credentials to login.
After successfully logging in , user will see the Profile page.
User can also see it's history of entries of the business.
User can give review to a service.

Run in local environment

First fork and clone the repository to your local device.

Setup backend

Go to the backend directory by typing the command:
- cd backend
Run npm install to install all dependencies.
Create a .env file and add the following variables:
- DATABASE_CONNECTION_STRING - set it's value to a mongodb cluster connection string.
- JWT_SECRET - set a unique and secure jwt secret key.
- CORS_ORIGIN - set it to the client app url if any. (In case of development environment, it is going to be http://localhost:3000).
Run npm start to start the server. It will run on port 3030. (In case of development you can run npm run dev to automatically restart the server after making changes.)

In case if you want to run frontend separately.

Setup frontend

First run the backend.

Go to the frontend direactory by typing the command (from haji-flour-mill directory):
- cd frontend
Run npm install to install all dependencies.
Open the src/store/APISlice.js file.
- Set the variable apiBaseUrl from /api/v1 to http://localhost:3030/api/v1.
- Set the variable adminBaseUrl from "" to http://localhost:3030.
Run npm start to start the server.

To run the app locally this is all you need to do.
In case you want to contribute or optimise the code, see the steps below.

How to contribute

First fork and clone the repository to your local device.

Setup backend

Setup the backend as described here

Setup frontend

Do all the steps in Setup frontend
Do the desired changes in code.
Before making the build, change base urls to their previous values in src/store/APISlice.js :
- Set the variable apiBaseUrl from http://localhost:3030/api/v1 to /api/v1.
- Set the variable adminBaseUrl from http://localhost:3030 to "".
After making changes run npm build to build the production build of the app. There will be a new folder named build inside frontend.

Copy the content of build folder.
Go back to backend directory, go to public/client folder, delete the existing content of the client folder and paste the content of the build folder.

Now run npm start in backend and test your changes by going to url http://localhost:3030.

To contribute to the project, push your local changes to your forked repository.
Make a pull request to original repository and start conversation about the changes.

With that said at the end I would like to say:

A project is never complete and there is always something to improve.

I am constantly working on code optimization and adding new features. You Can always come back and check updates.

UI Showcase

To explore public pages go to the Haji Flour Mill

Here are the UI screenshots of the protected pages which require login.

User pages

User Login page
It will show error message if credantials are wrong.
User Profile page
User Entries page
Give Review page

Admin pages

Admin Login page
It will show error message if credantials are wrong or user is unauthorized.
New Entry page
New Entry success alert
Success alert will contain the amount of the entry.
All Entries page
Single User's Entries page
Create User page
Create User success alert
Success alert will contain the unique username for the newly registered user, required for login process and filling the entry.
All Users page
Single User's Details page
Add Service page
All Services page
Each service card contains edit and delete button.
Update Service page
Clicking the edit button in above service card will open this page.
Confirm Delete Service alert
Clicking the delete button will ask the admin for confirmation to delete the service.
Delete Service success alert
All Reviews page
Service Reviews page
Reviews for a perticular service.
Reviews by User page
Reviews given by a perticular user.