bakshay96 / My-Dairy

Milkify is a Dairy web application for Milk Collection Management. provides various functionalities for daily milk data management in the milk collection centre.

Milkify

🖥️ Tech Stack

This is an Individual project.

This is a complete MERN Stack project, which is inspired by a village milk collection centre. For the front end, I utilized React JS and Next UI to design an attractive and user-friendly interface. I also employed Redux for front-end state management to ensure a smooth user experience.

In the backend, I utilized Node.js and Express.js to handle all backend operations and create APIs for front-end requests. To store the data, I used MongoDB and the Mongoose library. For user authentication and authorization, I implemented JSON Web Tokens (JWT) and secured user passwords using Bcryptjs.

Overall, this project allowed me to showcase my proficiency in various technologies and tools, including React, Chakra-UI, Redux, Node.js, Express.js, MongoDB, Mongoose, JWT, and Bcryptjs.

Objective

Our main objective is to complete all main functionalities of the Milkify web app, such as User Authentication, Add to Farmer/Add daily Milk to the user account, filter, Sorting date wise, Milk stats page, admin dashboard page and user stats page also add user expected functionalities based on current requirements, in a given time constraint and provide smoother experience of the web app.

• Click here to see preview of our project.

Credits

• Images : [google Images](https://www.google.com/]
• Content : meriDairy.com
• Icons : Font Awesome
• References : MDN Docs | W3School

Tech Stack

• React.Js
• Redux
• ExpressJs
• MongoDB
• Chakra-UI
• NodeJs
• HTML5
• CSS3
• JWT
• JavaScript

Features

• Homepage - The Landing Page
• Login/Signup Page
• Jwt(tokens) for Authentication
• Admin user Dashboard
• Add Farmer
• Daily milk stats Dashboard
• Quick messaging alert
• filter farmer data by date & time
• total count by range
• sorting
• Pagination

Screens tour of Milkify 🙈 :

Home Page Signup Page SignIn Page Add Milk Page Farmer dashboard Add new Farmer Milk Records

Setting Up Project in local

Frontend

1) Setting up node environment

1) navigate to the Frontend directory
2) use node version 16 or 18.12.1 is recommended
3) run the command npm install or npm i --legacy-peer-deps it will install all the required Dependencies with no errors.

2) Starting frontend on localhost

(make sure you are confirming the URL of the server)

npm dev /*or*/ npm run dev

3) Making a Production-ready folder

npm run build

Server

1) Setting up node environment

1) navigate to the Backend directory
2) use node version 16 or 18.12.1 is recommended
3) run the command npm install or npm i --legacy-peer-dep

1) Starting Server in deployment

npm start

1) Starting Server with nodemon on localhost

npm run server

Database: MongoDB

1) Atlas

in .env file provide MONGODB_URL with proper credentials

2) Local database

if MONGODB_URL is not declared in .env, by default it will connect to the local database

in case not working try changing MONGODB_URL by creating your own in the MongoDB Atlas server

Tools used on this project

• Visual Studio Code
• Vite-JS template

Contact

If you want to contact me, you can reach me through the below handles.

© 2024 Akshay Bombatkar

Show your support

Give a ⭐️ if you like this project!