GithubHelp home page GithubHelp logo

vikash-8090-yadav / sal--dapp Goto Github PK

View Code? Open in Web Editor NEW
3.0 1.0 0.0 24.05 MB

The Sal-dApp provides an efficient platform for organizational administrators to effectively oversee and manage their employees' salaries by adding them as users and securely storing their information on IPFS/Filecoin network. The platform enables the administrator to process payments conveniently and seamlessly on both Matic Ethereum blockchai

Home Page: https://sa-l-d-app.vercel.app/

License: MIT License

JavaScript 88.56% Solidity 1.93% Nix 0.15% CSS 8.92% Dockerfile 0.44%
repl ethereum ethereum-blockchain filecoin foss ipfs metamask nextjs polygon polygon-network

sal--dapp's Introduction

Sal-dApp

This Dapp allows an organization's admin to manage employee salaries by adding them as users and storing their info in IPFS /Filecoin and making payments in Matic , Ethereum.


How to Run Locally

To run the Sal-dApp locally, follow these steps:

  1. Clone the repository:
git clone https://github.com/Vikash-8090-Yadav/SaL--dApp.git
  1. Navigate to the project directory:
cd SaL--dApp
  1. Install the dependencies:
npm install
  1. Start the development server:
npm run dev
  1. Access the dApp: Open your web browser and visit http://localhost:3000 to interact with the SaL application.

Back to Top




📋 Table of Contents

Back to top

💡Introduction

The Sal-dApp provides an efficient platform for organizational administrators to effectively oversee and manage their employees' salaries by adding them as users and securely storing their information on IPFS/Filecoin network. The platform enables the administrator to process payments conveniently and seamlessly on both Matic and Ethereum blockchain networks.

▶️ Experience the Live Site by Clicking the Link Below




🚀 Setting up the project locally


🔍The problem it solves

As startups and established companies continue to flourish, a common problem that exists in the industry is the mode of payment for employees. To address this issue, we have developed a decentralized application utilizing blockchain technology that streamlines the payment process for startups and companies. With this application, an organization's admin can easily send payments and manage employee salaries in one central location, eliminating the need for multiple individuals to handle the task.

Using Blockchain technology we want to improve this problem for the payment structure of these startups and companies by allowing an organization's admin to send payments to their employees and manage it all in one place. So we built a decentralized infrastructure tooling application that does this work for startups/companies by adding employees and paying them a salary in one click. Our decentralized application aims to simplify the process of paying employees by allowing a single admin to manage and distribute salaries for all employees in the company. By streamlining this process and removing the need for multiple individuals to handle it, startups and companies can save valuable resources and streamline their workflow. Additionally, the application is designed to pay employees based on their position, ensuring fair and efficient compensation for all employees

We aim to leverage the advancements in blockchain technology to streamline the traditional process of salary management for startups and companies, making it easily accessible with a single click. Additionally, we plan to continue improving and expanding the application by incorporating features such as the ability for multiple startups and companies to register and manage their employee's additional details and try to make a blog section for this on the blockchain , ultimately making it a comprehensive tool for enhancing workflow and productivity.


💥 Challenges we ran into

During the development of this project, several obstacles were encountered and valuable lessons were learned. This was the team's first experience working with Next.js, and they are pleased to have successfully created a functioning project.

Working on a project with my team member, we encountered some difficulties with understanding certain technologies, specifically Next.js and Tailwind. My team member was not as familiar with these technologies and it was a hard task for him to understand. Additionally, I also faced some difficulties in understanding a specific aspect of the project, the blockchain part. However, we were determined to overcome these obstacles and worked together to tackle the problem. Through our combined efforts, we were able to understand the technology clearly and were ultimately successful in completing the project to our satisfaction. Despite the initial difficulties, we were able to understand the technology together and achieve success as a team.

Aesthetics were improved by utilizing Tailwind CSS. Initially, the team struggled with determining whether to permit external access to the solidity functions, ultimately opting to restrict usage to the contract deployer.

However, to allow for proper testing by **judges, the "onlyOwner" modifier was removed **to enable full access to the application's capabilities. Difficulty was also encountered when attempting to integrate a "Connect Wallet" button across all components in the Next.js framework, requiring duplication of the feature in each necessary component.

Efforts were made to minimize gas costs by simplifying the Solidity code and optimizing the contract.


Back to top

🏁 How Our Project Aligns with the Following Hackathon Tracks

📁 IPFS/FILECOIN

Storing images on a blockchain can be a costly endeavor due to the large amount of storage space required. To address this issue, one common solution is to utilize the InterPlanetary File System (IPFS). IPFS is a peer-to-peer network that allows for the storage and retrieval of large files, such as images, in a decentralized manner. By utilizing IPFS, we can store all past and present images on the network, rather than on the blockchain node itself.

When it comes to displaying images on a card along with other information such as a user's name, position, wallet address, and date and time, we can utilize the Content Identifier (CID) returned by IPFS. The CID acts as a unique identifier for each image stored on the IPFS network, allowing us to easily retrieve and display the image on a card. This approach is not only cost-effective but also allows for a more efficient and streamlined process of storing and displaying images on a blockchain.

⛓️ ETHEREUM + POLYGON

Our project has been successfully deployed on the Polygon Mumbai testnet blockchain and we are using the Matic (Mumbai) token to pay our employees' salaries according to their positions. We have implemented the Web3 model to establish a connection with the Polygon network and have deployed our smart contract on the network as well. This allows for seamless integration of the Polygon network into our project for deployment and salary distribution purposes.

FOSS

We are proud to participate in the hackathon under the Free and Open-Source Software (FOSS) track with our project that is fully built using FOSS technologies such as Solidity for smart contract development, Next and Node.js for front-end and back-end development and Hardhat for testing and deployment. It is available for anyone to download, use, modify and distribute via Github, free of cost. We believe in the power of open-source software and are committed to making our project accessible and open to contributions from the community. We are excited to share our project and continue to improve it through collaboration and contributions in the FOSS spirit.

⚡️ ETHEREUM

We are thrilled to be participating in the hackathon under the Ethereum track with our innovative project that utilizes the power of blockchain technology to give salary to the employees. By utilizing the Georli testnet, which is a test network for the Ethereum blockchain, we are able to take advantage of the security and transparency provided by the Ethereum platform. We understand the importance of leveraging this technology to create new and efficient ways of conducting business. Our project is still in the development phase, but we are excited to have the opportunity to share it with the community and continue to build and improve it through collaboration and contributions in the Ethereum ecosystem

☁️ REPLIT

We are thrilled to be participating in the hackathon under the Repl.it track and utilizing the power of this free, open-source platform to seamlessly integrate the latest languages and technologies such as Node.js, JavaScript, MERN, Next.js, and React.js into our project. We have chosen to build our project using Next.js (Node.js) and have written all of our smart contract code in Solidity and JSX on Repl.it. While we faced some challenges, such as issues with replit.nix file integration and determining the proper entry point for our project, we were able to overcome these obstacles through utilizing the extensive documentation available on Repl.it. We are proud to announce that we have successfully deployed our project on Repl.it.


🛠️Technologies we used

Next.js Tailwind CSS Hardhat ethers.js Polygon IPFS Powered by Ethereum

Technology Description URL
Next Js JavaScript framework for building server-rendered or statically-generated applications https://nextjs.org/
Tailwind CSS Utility-first CSS framework for rapidly building custom designs https://tailwindcss.com/
Hardhat Ethereum development environment https://hardhat.org/
Etherjs Ethereum JavaScript API https://docs.ethers.org/v5/
Polygon Polygon (formerly known as Matic Network) is a Layer 2 scaling solution for Ethereum that enables faster and cheaper transactions on the blockchain. It leverages Ethereum as its main backbone while adding its own network of sidechains, allowing for efficient scaling and interoperability with other Ethereum-based systems. https://polygon.technology/
Ipfs/Filecoin Decentralized file storage and content distribution https://ipfs.io/ & https://filecoin.io/
Repl it Online code editor https://repl.it/
Ethereum Decentralized blockchain platform for building decentralized applications https://ethereum.org/

🎥 Video Demo

https://youtu.be/74lFjQw34pI

🤝 Contributing

Contributions to Algo-Media are always welcome! If you'd like to contribute, please follow these guidelines: Fork the repository.

Create a new branch for your feature or bug fix:

git checkout -b feature/your-feature-name

Commit your changes:

git commit -m 'Add some feature'

Push the branch:

git push origin feature/your-feature-name

Open a pull request.

We appreciate your contributions and thank you for helping us improve Algo-Media!


Project Contributors

🌐 Socials:

LinkedIn Twitter GMail

Project Contributor (Member)


Vikash Kumar Yadav


Mahak Garg

Show some ❤️  by giving to this repo

Back to top ⬆️

sal--dapp's People

Contributors

1shubham7 avatar agrawal-ayush-009 avatar arioum avatar ayush-tibrewal avatar ayushhgupta39 avatar baibhavtiwari avatar bhavika-14 avatar capsy14 avatar chinmay-deo-2004 avatar deepanshu0703 avatar harmeetsingh11 avatar hereisswapnil avatar himanshunarware avatar hindu-muppala avatar iasadk avatar jitendragangwar123 avatar joseph2001-braganza avatar mahak008 avatar mohitvdx avatar ojasaklechayt avatar praashh avatar raghav1030 avatar sandeep0009 avatar senali-d avatar shanvijha30 avatar tab21 avatar vikash-8090-yadav avatar vsatwika avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar

sal--dapp's Issues

README NEW LOOK

. I have given your README a completely new look and added simplified text that is highly useful for new contributors. I incorporated the text you provided and made sure it enhances the overall appeal of the document. Please review my changes and let me know if there are any issues. If you have any concerns, feel free to assign me to the relevant issue, and I will address it as soon as possible.

Updating the Pay Salary Section with updated UI

The UI of the pay salary section can be improved by using some neumorphism in the cards and making the text more readable
I am a frontend developer and I would like to contribute to this issue under GSSOC'23
I request you to please assign me this issue
image

to change the footer

issues in the footer section are:
there is no spacing between the text form and button
button is not rounded
text form outline is not none thats why showing border.
changes to be made in copyright too.
im raising these issues please assign it to me

Improving the README.md

I would like to be assigned for GSSOC'23 for this issue

Suggestions:

  • Restructuring the header for a more visually appealing look
  • formatting text in a better manner
  • SEO friendly changes to link and text
  • adding badges for a cool effect
  • other minor changes

Bug in smart contract

Hello ,
Myself Raja Kumar , a proud contributor at GSSOC23. I would like to contribute to this project

I have identified a potential bug in the addemp function of the allemp contract. The issue lies in the _wallet_ddress parameter of the function.

If you think it is legit then do assign me the issue under GSSOC23 with the level of PR as Well.

Re-design SAL-DAPP homepage in Figma

I'd like to propose a new design for Sal-Dapp Homepage/Dashboard

It's also my suggestion to separate the dashboard part to a new '/dashboard' route away from the main landing page.

Tasks:

  • Design Landing Page in Figma

I'd like to be assigned to this issue as a part of GSSoC'23

mobile responsiveness

using the webiste on mobile phone doesnot gives much good experience
Screenshot_20230521_072932
can you please assign this issue to me so that i can make it a little better

introducing a check for valid address

The addemp function does not check if the _wallet_ddress is a valid address. This means that an attacker could create a new employee with a _wallet_ddress that does not belong to anyone, and then steal any donations that are made to that employee.

add readme badges

I want to add readme badges .Please assign this issue to me under GSSOC
badges

Grammatical mistake in the Contact.js component:

I suggest we should change "Oh! You stucked? Dont worry" To "Oh, You're stuck? Don't worry,". It's my first contribution so I thought I'd start with something mundane. Please assign me this issue so that I can merge the PR that I've created.

to change the ui image of log in page

as i visit the website i found that logo image should be small and also that cloud transion should be removed because that is making website look so much unethical and not pleasing for a user while login in it will just distract them.
so raising this issue under gssoc23 i hope u will assign me this
sal

[STYLE] Styling the Help Section

Hello!
I am Himanshu Agarwal, a proud contribtuor at GSSoC '23. I would like to the contribute to this project by styling the help section on the homepage.

Things I will be doing as of now:

  • Styling the help section in homepage

@Vikash-8090-Yadav If you think it is legit then do assign me the issue under GSSoC '23 with the level of the PR as well ✌️

CONTRACT- fixing bug in contract

There is a bug in the allemp contract that can lead to unexpected behavior.

In the addemp function, the _wallet_ddress parameter is passed as an argument, but it is not used anywhere within the function. This can cause confusion and potential issues when trying to store or access the wallet address of an employee

Fix the bug in the allemp contact that can lead to unexpected error

In the addemp function, the _wallet_ddress parameter is passed as an argument, but it is not used anywhere within the function. This can cause confusion and potential issues when trying to store or access the wallet address of an employee.

To fix this bug, I removed the _wallet_ddress parameter from the function if it is not needed, also updated the logic to store and utilize the wallet address appropriately within the contract.

Additionally, please note that the allemp contract doesn't implement any access control mechanisms, allowing anyone to call the addemp function and deploy a new Sal contract.

employe form overflow

Screenshot 2023-05-23 at 1 15 47 AM

enhancement : -
Make the employe form fully responsive
Also add some clicking effects to the employe dashboard

Improvement in UI by making several css changes

The changes are mostly related to :

Button : we can add color changing property when the button gets hovered upon. It makes the design look more modern.

scrollbar : adding css to the scrollbars to make the website look more pretty.

and many other small changes that can make the the UI better.

So if you want I would like to do the task.

And this is related to Gssoc'23

Enhancement and Optimization of smart contract

Hello ,
Myself Raja Kumar , a proud contributor at GSSOC23. I would like to contribute to this project.

### Optimization
1. Use uint256 instead of uint .

2. Consider using a mapping instead of an array
If you anticipate a large number of deployed Sal contracts, using a mapping instead of an array for deployedSal in the allemp contract can provide better efficiency for contract retrieval and management.

3. Consider using bytes32 for string parameters
If the string parameters have a fixed length, such as _FirstName, _LastName, _Country, _Position, and _image, use the bytes32 data type instead of string. This can save gas costs and improve efficiency.

4.Consider using bytes32 for string parameters
If the string parameters have a fixed length, such as _FirstName, _LastName, _Country, _Position, and _image, you can use the bytes32 data type instead of string. This can save gas costs and improve efficiency.

5.Consider using a modifier for access control
If certain functions should only be accessible by specific roles or addresses, you can use a modifier to enforce access control. This helps improve security and restrict unauthorized access to critical functions.

Adding a constructor in the allemp contract.

The allemp contract does not have a constructor. This means that the contract will not be initialized when it is deployed, and any state variables will be initialized to their default values.

Transaction Floating Button Invisible

Hey, there @Vikash-8090-Yadav,

When we scroll to the About Us Section the Transaction button becomes Invisible and hard to see

Current :
PrevColor

After Change :
Color

( Demo I can change it in a better way)

Can I Work on It to enhance the wallet button so that it feels Interactive to the users?

Update Readme.md

I want to update the "How to run locally" section in the readme.md.
image

These shell commands should be properly written and aligned so that it is easier for the readers to understand and comprehend. Please assign me this issue.

[FEAT] Custom Error Page 404

I will design an Error Page for calls or redirecting to pages which do not exist.

Hello!
I am Viraj Chandra, a proud contribtuor at GSSoC '23. I would like to the contribute to this project by designing an Error Page for calls or redirecting to pages which do not exist.

Things I will be doing as of now:

  • Designing the error page 404

@Vikash-8090-Yadav If you think it is legit then do assign me the issue under GSSoC '23 with the level of the PR as well ✌️

Data button Non-responsive

Data button on the landing page header is not responding.

Screenshot 2023-05-22 at 5 34 53 PM

Highlighted with a Red box in the above image.

Small UI Fixes needed in the Login screen

Need Following UI fix in the login screen :

  1. Fixing the Login button (on hover) element enlargement.
  2. Fixing the element alignment on google sign in icon.
  3. Modified the Github svg logo to stretch to its edge.

Bellow is a detailed summary of the issues mentioned above*

1. Fixing the Login button (on hover) element enlargement.

This is a small UI fix related to the login button. When hovered, the elements above and below shifts up and down respectively. This is due to the usage of borders which usually takes space part to its element as per box-model.

Below is a visual representation of the issue:

Notice the height of the button:

Before Hover:

On Hover

2. Fixing the element alignment on google sign in icon.

A simple fix related to the alignment of the Google sign in icon on the login page.

Visualized:

3. Modified the GitHub svg logo to stretch to its edge.

The GitHub logo does not stretch to its edge(the svg does not touch the border but has some padding which cannot be modified with css) while the Google logo does, this creates inconsistent alignment of the logo with context to one another.

Visualized:

  1. Here notice the highlighted area of the image where it shows that the Google icon - "G" has little to no padding to its container i.e the img element:

  1. However the image below which shows the GitHub logo svg not taking the full width of the boundary container of image:

CONCLUSION: This basically results in github logo looking smaller than google logo despite having same height and width for the logo images and the space you see is embedded in the svg file and can only be fixed by modifiable the svg source.

Responsive Navbar UI

Hello ,
Myself Raja Kumar , a proud contributor at GSSOC23. I would like to contribute to this project

Issue

When the screen size is reduced to 991 nav-links move to the top

Also when the screen size is reduced to 950 px logout button starts overflow

Enhancement

improved the ui for example such as colours spacing alignment

Also we can add hamburger menu for the mobile screen

Also needed some margin padding to enhance ui and provide better ux experience

If you think it is legit then do assign me the issue under GSSOC23 with the level of PR as Well.

Screenshot 2023-05-21 at 9 18 10 PM

Improve Navbar

The Home and the Data navlink are doing the same thing. Also we can link the logo to home such that whenever user clicks on Logo they are redirected to https://sa-l-d-app.vercel.app/

Redirecting to different section

When you click contact form, it is redirecting to starting of interface. I want to know whether it is intentional or a bug, If bug I can solve it. And it is happening to setting section also. I did not add any employee ( for clarification ).

Adding Managers section and fixing the errors in contract balance and pay salary section

Problem

Currently any anonymous user can add employee or pay the employees in the contract, and this shows that you are giving the power directly to the common people to make changes and this creates too much problem later in managing of the employees.
Currently when I am donating some amount in the contract, it is not reflecting in the total balance of the contract.
When I am paying the salary to the employee I am getting error.

Solution

The updated change will be that the owner of the contract will create managers for maintaining the employees and paying them salary just like it works in the real world field and fixing the errors in balance and payment section

changes in the footer section of input tag and button

image

so this is the condition of the input tag and button in which there is no spacing in the button and input tag
secondly when i start typing in the input tag there is border which is not a good practice and distracting for peopl and even the spacing between the input tag and seach bar which can create trouble for ppl while inputing things

image

and even looking at your website i found ur buttons have radius in this not this not making consistency in the website so raising this issue to make changes

Creating User struct for storing user details

Since the FirstName, LastName, Location, etc are all related to a person. We can create a struct named person and store all the information related to the person in that struct. This will help in code organization.

Make Buy me coffee working

I want if someone clicks on the support me button then the wallet opens and the small form opens asking for the amount to donate in the form of matic . and that amount should be sent to my wallet address!

use the confirmation button also and a message after the donation is completed as Transaction successful !!

Wallet address - 0x7719E64418C13c3Ab97e6f8500E81ce1101e8C40

Add ContributingGuidelines.md

The Contributing Guideline documentation will contain set of guidelines that will help contributors during the contribution process.
File type markdown.

[UPDATE] Enhancing Header with better UI and changing Banner image in Homepage

Hello!
I am Himanshu Agarwal, a proud contribtuor at GSSoC '23. I would like to the contribute to this project by enhancing the header with better UI and animated buttons.

Things I will be doing as of now:

  • Enhancing Header and making it fit with the theme
  • Adding Animated buttons with logos
  • Adding a more clearer and suitable image in the banner of Homepage

@Vikash-8090-Yadav If you think it is legit then do assign me the issue under GSSoC '23 with the level of the PR as well ✌️

BUG

When we opt to sign in with GitHub Login. It's not redirecting onto GitHub Login page. It is redirecting into Gmail Login page.
Please assign this issue to me under GSSOC'23.
Thank You!
image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.